Fast Start: Working with Templates – Sample Site Gallery part 2

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:

gallery-page layer comp selectedGallery Layers Visible

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?

  • Gallery page in Photoshop document windowblue 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:


nostore-metadata

Metadata layerThe 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

These are graphical layers that are for showing the previous and next sets of thumbnails, allowing the user to scroll through the gallery quickly.

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

nostore-thumb
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.


nostore-thumbsheet

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.


nostore-picturebox

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.


nostoregallery-column

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.

2 comments on “Fast Start: Working with Templates – Sample Site Gallery part 2

  1. Pingback: Fast Start: Working with Templates – Sample Site Gallery part 3 | Media Lab

  2. Pingback: Fast Start! Working with Templates – Galleries part 4 | Media Lab

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>