Examining the Gallery Layers
Now that we’ve looked at some of the basic steps required to create a SiteGrinder gallery, in this post, we’ll look at the specific gallery components and configuration used in the compani.psd template file.
If you want to learn more about other gallery features, check out our Gallery Webinar.
Let’s take a look at the specific elements used in our template file:
You’ll see that we’ve collected all of the layers that comprise the gallery in a layer group called nostore gallery stuff. (We chose that name because we also created an estore using gallery features, but that’s a topic for another post!)
So, what do we see here?
- blue sphere copy 5 is just a graphic layer that contains the blue icon we’re using on each page.
- basicgallery-h1 is the headline of this page which will be output as CSS text with the H1 heading style.
- nostore-metadata is a text layer that has a metadata field name in double-square brackets: [[Title]].
- nostore-button-nextthumbset and nostore-button-previousthumbset are button layers for showing the previous and next sets of thumbnails, allowing the user to scroll through the gallery quickly.
- nostore-thumb is a placeholder layer that will display an image thumbnail.
- nostore-thumbsheet is a layer that will be a container for displaying multiple thumbnails.
- nostore-picturebox is a placeholder that will display a full size gallery image.
- nostoregallery-column is a layer that is used to group all of the gallery components together as one element on the web page.
Let’s look at some of these in more detail:
The nostore part of this layer name tells SiteGrinder that this layer is related to the gallery called nostore. The -metadata hint a type layer contains one or more metadata fields surrounded by double brackets. When SiteGrinder sees such a field in a type layer’s contents, as in “I took this photo on [[date]]”, it replaces the metadata field and its surrounding brackets with metadata from the current image gallery image.
SiteGrinder allows you to embed metadata field names in Photoshop type layers that also have the -metadata hint. For example you can add the “description” metadata to a type layer for a gallery named “wedding” by naming the layer wedding-metadata and typing [[description]] anywhere in the type layer’s contents. When you add images to SiteGrinder it will extract the metadata (if it exists) and replace the metadata chunk, such as [[description]] above, with the actual metadata for each image you add. You can edit metadata after you deploy in the Content Manager’s gallery editor. If the metadata in your image files is empty or you use a non-standard metadata name like [[services]] the metadata will initially be blank – but you’ll be able to add text for such fields in the Content Manager as well. This means the gallery editor is really an easy database designer and editor!
nostore-button-nextthumbset and nostore-button-previousthumbset
- The -nextthumbset hint, used in conjunction with the -button hint and a gallery’s name, will move to the next group of thumbs in a thumbsheet. So a thumbsheet named weddings-thumbsheet can be advanced by a button named weddings-nextthumbset-button.
- The -previousthumbset hint is identical except that it moves backwards through a thumbsheet.
The rectangular contents of a -thumb layer must be contained within a -thumbsheet layer (see below). It must be:
- smaller than the sheet
- above the sheet in the layers palette
- positioned entirely within the borders of the sheet layer
The size of the thumb layer contents determines the size of thumbs to be generated for the thumbsheet or viewsheet. Thumbsheets and viewsheets can have thumbs of different sizes. Each sheet has only one associated thumb layer. If you don’t supply a thumb, then SiteGrinder will use a generic size.
The rectangular contents of an image layer with the -thumbsheet hint contain one -thumb layer to represent the size of the thumbs which should be displayed and which will be repeated as many times as necessary to display one thumb for each image in a gallery.
The -thumbsheet hint is a boundary hint, meaning it “contains” other layers if their contents are above the contents of the panel layer in the layers palette and their contents don’t extend beyond the edges of the thumbsheet layer’s contents.
If there are more thumbs than can be displayed at once in the thumbsheet rectangle, there are various ways to navigate to additional thumbs depending on the type of thumbsheet you choose in the Design Manager and whether or not you also create thumbsheet navigation buttons using hints like -nextthumb and -previousthumb.
SiteGrinder uses the -picturebox hint on an image layer to indicate that the rectangular contents of the layer with the -picturebox hint represent that large version of the currently selected gallery image.
Pictureboxes are extremely powerful and are available in different variationg, from basic CSS to auto-playing animated Flash movies. In fact a gallery can consist of nothing but an auto-playing picturebox. But all the gallery navigation components, including next-buttons, thumbsheets, panelsheets, viewsheets, can control the currently displayed picturebox image.
Columns group many page elements so they rearrange themselves intelligently when other page elements change size or position. Columns can also ensure backgrounds and borders behind these changing areas stay beautiful and organized.
The -column hint is a boundary hint, meaning it “contains” other layers if their contents are above the contents of the column layer in the layer palette and their contents don’t extend beyond the edges of the column layer’s contents.
I think that’s enough for one day. We’ll come back next and look at what happens with these layers when you build and deploy the page in SiteGrinder.