VSys One: Volunteer Management Software

Image Table Templates

Since an item such as an open schedule job can have multiple images in its album, there needs to be a good way of displaying those images. One way of doing that is with a gallery table template. What these do is take the images in an album and organize them into an HTML table. Set these up from VSys Live sites and settings -> Image galleries -> Setup table templates. (VSys comes with several of these built in, so you don't have to start from scratch.)

Understanding the HTML here requires some basic understanding of creating tables in HTML.

In the example below, we're going to show a table that's three images across, with each image reduced to 200px by 200px, and no more than 99 images will be displayed. (We didn't filter the images; to limit which ones are shown, we could use the Image galleries, Gallery image tags and Gallery image types fields to only show images in the album that meet these criteria.)

What VSys Live will do when creating this table is:

• Write the Header
• Write the Header every 3 times
• Write Repeat for each item once per image, up to three images
• Write Footer every 3 items
• Loop back to Header every 3 images unless there are no images left
• Write Footer.

This looks ugly, but it makes a very simple HTML table with the images.

Under Repeat for each item is the most complex part.

What this does is:

• Starts a new HTML table cell
• Starts an HTML paragraph, centered
• Makes a hyperlink that links to the original image (we placed that as a field in the A HREF tag)
• Shows the image in the current size (the one we selected as part of Gallery image adjustment)
• Ends the HTML paragraph and table cell.

Overwhelmed? Check out the built-in table templates and copy or edit them.

If the album being shown has no images in it, or no images that meet your criteria here, VSys Live won't show anything at all.