Your Webvanta site includes a photo gallery and slideshow that is easy to use, both for the designer and the visitor. It uses a highly configurable jQuery plug-in called Galleriffic, and it is styled entirely with CSS so it is easy to make it look and behave exactly how you want.
The gallery is preconfigured on new Webvanta sites, on the page /photo-gallery. (If you have an older Webvanta site that does not have it installed, just let us know and we'll set it up for you.)
Initially, there won't be any photos in the gallery. To add photos:
Then return to the /photo-gallery page, refresh the browser, and you should see the photos you uploaded.
When you upload the photos, Webvanta automatically creates versions (called renditions) at whatever sizes you want. These sizes are specified in the Global Setting image.thumbnail.settings (see Creating and Accessing Image Renditions for details).
In the preinstalled gallery, we use the tag "gallery" to identify photos to include. You can add other tags and use them to identify photos for other galleries.
The WebvantaScript and HTML to create the gallery is simple:
<ul class="thumbs"> <w:assets:each tag='gallery'> <!-- find the assets you want --> <li><a class="thumb" href="<w:path rendition='medium' />"> <!-- choose rendition for large image --> <img src='<w:path rendition="square_thumb" />' /> <!-- choose rendition for thumbnail --> </a></li> </w:assets:each> </ul>
The WebvantaScript line
<w:assets:each tag='gallery'> causes the code that follows it to be repeated for every uploaded file that has the tag "gallery" assigned to it. To use a different tag, just substitute the name.
<w:path rendition="square_thumb" /> statement provides the file path for the image, at the appropriate size. Our default gallery
is set up for square thumbnails.
If you set the page type for your photo gallery page to "Category," then you can automatically select photos based on a category name in the URL. Just change the code above to the following, selecting the assets based on the category rather than a tag:
<ul class="thumbs"> <w:assets:each category="current"> <!-- find the assets you want --> <li><a class="thumb" href="<w:path rendition='medium' />"> <!-- choose rendition for large image --> <img src='<w:path rendition="square_thumb" />' /> <!-- choose rendition for thumbnail --> </a></li> </w:assets:each> </ul>
Don't forget to set the page type to Category, or the category selection from the URL won't work.
You can then generate a list of galleries as follows:
<ul> <w:kb:category:each> <li><a href="<w:path url='gallery' />"><w:name /></a></li> </w:kb:category:each> </ul>
The w:path statement creates the URL of the page with the slug "gallery", which must be a category page, with the ID and name of the gallery appended.
With this mechanism, you can have any number of photo galleries, and you only need to create one index page and one gallery page.
By default, the photo gallery is configured to show two rows of square thumbnails on the left side of the page, with a large image (up to 640 x 480) on the right. The large image area functions as a slideshow, and starts playing automatically.
There are controls for pausing and restarting the slideshow, and for moving backward or forward one image. You can also click on any thumbnail, and the gallery switches to that image and pauses the slideshow, if it was playing. In addition, clicking on the large image pauses the slideshow and advances to the next image.
You can change everything about the way the photo gallery works. Depending on what you're changing, there are several places you may need to make changes:
page-jsregion of the photo gallery page.
/photo-gallery(or wherever you put the gallery).
image.thumbnail.settings. You may also need to change the CSS correspondingly.
For details on customization options, see the Gallerific documentation.