Creating a Staff Gallery

It's always important to think critically and creatively while implementing your website. Often times, our clients will be interested in having content (not just design) that stands apart from others. One way to achieve this is to use page elements in a creative way.

Start by navigating to your staff or directory page, then add a photo gallery element.
Click on the settings link from the element options and configure the photo gallery skin to one of the options with captions.
Click Update, and then select Add/Remove Photos from the element options. Add your staff or directory photos either in a zip file or individually.
Now we'll rename each photo to match the person's name and position with the title being first. Click edit under the photo.
In the Caption blank enter the title and name seperated by a HTML Break.
In the WYSIWIG Editor, enter the bios or paste it from another source using the "Paste Plain Text" button.
Repeat this steps 4-6 for the remaining staff or directory members. Now view the results by returning to the staff or directory page.
Clicking on a photo or name will open the bio in a lightbox.

Staff Gallery Tips:

Using wide images will create wider lightbox windows to view the bio. In the example above we added white space to our images before we uploaded them creating a wider image.
Make sure all of your images have the same dimensions. Images with different heights can often unintentionally stand out in the grid.
Once you upload your images you can drag them around to reorder them on the Add/Remove Images page.
Headings, links, even images work in the bio text. Use this space to its full potential but be sure to check how your changes look in the lightbox once you make them.
The Caption blank we used for the name and title can hold multiple lines of text. Seperate each line with an HTML Break (<br/>) and be sure that each image's caption has an equal number of lines.

Posted on Tue, March 17, 2009 by Michael Thomas

No comments (Add your own)

Add a New Comment

Your Name:

Your Email/URL (Optional):

Your Comment:

Enter the code you see below:
code

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.