Using the Photo Gallery

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.

You can easily adapt any other HTML, JavaScript, or Flash photo gallery to work with Webvanta. You can start with our photo gallery and modify it to meet your needs, or you can follow the general approach and substitute any gallery code that you'd like.

Uploading Images

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:

• Choose Content > Images & Files from the admin menu
• Click Add File to display the upload dialog
• Click the Browse button and locate the file on your computer
• Select the gallery tag in the Tags section to identify the image(s) as ones that should be included in the photo gallery
• In the Processing Options section and make sure the Create Thumbnails box is checked
• Click Save to upload the image (or a zip file with multiple images)

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).

Choosing Photos with Tags

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.

The <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.

The Galleriffic JavaScript library gets the file names for the large images from the links in the list of thumbnails. We've set it up to use the medium rendition so it doesn't matter at what size the original photos were uploaded. If you want to change the size of the large images, you'll need to change the CSS for the gallery and the global setting that determines the size of the renditions.

Displaying Photos by Category

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.

Customizing the Gallery Options

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:

• Options for the behavior of the gallery, including the number of thumbnails displayed per page, whether it starts the slideshow automatically, and the transitions between photos, are set in the JavaScript initialization code, which is in page-js region of the photo gallery page.
• The visual appearance of the gallery is controlled by the CSS file, photo-gallery.css.
• To rearrange the components, modify the HTML on the page /photo-gallery (or wherever you put the gallery).
• To change the size of thumbnails or the large images, change the Config Setting image.thumbnail.settings. You may also need to change the CSS correspondingly.

For details on customization options, see the Gallerific documentation.

If you want to eliminate the thumbnails entirely and show only the slideshow, you can set the CSS for the div that includes the thumbs to an offscreen location. You cannot eliminate that div, because it is where the JavaScript code looks to find the images to include in the slideshow.