Gallery Tutorial:
Add automatically positioned thumbnails
using the -thumbsheet hint
Hints demonstrated: -thumbsheet
Requires: SiteGrinder 2 Pro

Part 1: Creating Thumbsheets

This tutorial assumes you are have the document you created with the basic gallery tutorial.

Click here to download a starting document

Thumbsheets allow you to specify a large area that SiteGrinder should fill with thumbnails in a line or grid pattern. This area can optionally grow or present the user with a scrollbar when it is too small to fit all of the thumbnails.

Using Thumbsheets is by far the quickest way to create thumbnails, whether on the same page with your full sized images or on separate pages. (This tutorial creates a separate page of thumbnails. )

It only takes two layers to accomplish this:

  • One image layer with the -thumb hint tells SiteGrinder how big to make each thumbnail
  • One image layer with the -thumbsheet hint tells SiteGrinder where to put the thumbs in a line or grid

This method is so easy there are only two reasons not to use it:

  • If you want to place your thumbnails in an arrangement that is not in a line or a grid
  • If you want to use layer set/group thumbnails to incorporate metadata into your thumbnails

If you have one of those reasons, click here to learn about manually positioned thumbs.

Step 1: Add an up-button layer to the full sized image page we made in the previous tutorial

Since we'll be making a thumbnails page separate from the full sized image page, we'll need to add a button to navigate from the page with a full sized image back to the page of thumbnails. SiteGrinder does this using the up-button hint.

  1. Close SiteGrinder if it is open
  2. Create a new select the type tool, create a new type layer, and enter something like "Back to thumbnails" in its contents.
  3. Change the name of the layer to up-button.
  4. Position this layer wherever you should like it, perhaps in between the next-button and prev-button layers.

  5. Open Photoshop's layer comps palette if it is not already open.
  6. Right click (control-click for MacOS) on the example-gallery comp you created in the previous tutorial.
  7. Select "Update layer comp" from the menu that appears.

  8. Hide all of the layers you created in the previous tutorial except the layer containing the background color.

Step 2: Create the thumb (you'll only need one)

Make sure you have followed part 8 from the previous step and hidden all layers but the background before continuing.

  1. Create a new image layer to be your first thumb layer
  2. Select the rectangular marquee tool
  3. Create a selection in the new layer that is the size of the first thumbnail. This can be any size you like.
  4. Fill the selection with a color that is different from the background color so you can see it
  5. Rename the layer "example-thumb"

This -thumb layer you've now created will tell SiteGrinder how big to make each thumb. Its size is all that matters, not its position. You can place the thumb on top of the thumbsheet for visual reference, but it is not necessary.

Step 3: Create the thumbsheet

Now you will tell SiteGrinder where it should lay out the sheet of thumbs with another image layer and the -thumbsheet hint.

SiteGrinder will calculate how may thumbs it can fit into this area horizontally and vertically based on the size of the thumbnail you created in the previous step along with any between-thumb spacing you set in the Galleries pane.

  1. Create a new image layer
  2. Activate the rectangular marquee tool (press shift-M) and create a selection that is as large as you would like the thumb display area to be.
  3. Fill this selection with some color
  4. Name the layer "example-thumbsheet"

Step 4 : (optional) Add "next" and "prev" buttons to the thumbsheet page

Question: Why do we need "next" and "prev" buttons on a thumbsheet page?

Answer: Because there may be more images in our gallery than thumbs that can fit in the -thumbsheet.

This situation will requiring one of these three solutions:

  • Add the -scroll hint to the thumbsheet so users can scroll through all of the thumbs, no matter how many there are
  • Add the -grow hint to the thumbsheet causing the sheet to grow vertically as large as it needs to to contain all of the thumbs.
  • Add next and previous buttons

The third solution above works because SiteGrinder will create additional pages of thumbs if there is no -grow or -scroll hint and not enough room on one page in the -thumbsheet area specified.

  1. Select the type tool.
  2. Create a new type layer and enter something like "Next Thumbnails" into it. Name that layer next-button and position it wherever you like.
  3. Create another new type layer and enter something like "Prev Thumbnails" into it. Name that layer prev-button and position it wherever you like.

When you put next-button and prev-button layers on a thumbnail page, SiteGrinder 2 Pro programs them to go from one page of thumbnails to the next or previous page of thumbnails.

SiteGrinder is even smart enough to hide the "next" button on the final page and the "prev" button on the first page.

Step 5: Create the new gallery thumbnail page

  1. Open the layer comps palette if it is not already open.
  2. Select "New layer comp" from the layer comp palette popup menu.
  3. Name this new layer comp the same as any other pages in this gallery. If you are following from the previous tutorial this will be example-gallery.
  • Important: As you see from this example, galleries can have a number of layer comp pages that all work together. So far, for example, we have a page for -thumbsheet and a page for the -picturebox. All of these pages must be named the same so SiteGrinder knows they are all part of the same gallery.

Step 6: Adjust thumbnail spacing and border settings

You've now completed everything you need to do in Photoshop. Now it is time to adjust thumbnail settings in SiteGrinder.

  1. Save the document and open SiteGrinder 2 Pro
  2. Select the "Galleries" tab at the top of the SiteGrinder window
  3. Adjust any border properties you like. Spacing adds both vertical and horizontal space between -thumbs.
  4. If you have not selected an image folder, click in the "Source" column to the right of the "example" slideshow entry. Click the "Image Folder" button in the dialog that appears and locate a folder of jpeg images. (SiteGrinder will use dummy images if no source is set.)
  5. Click the "Build" button at the bottom of the SiteGrinder window to build your pages

Step 7: Extra Credit

You may wish to close SiteGrinder and add the -scroll hint to your -thumbsheet layer's name (ie example-thumbsheet-scroll)and rebuild the document. If you do this make sure you make the -thumbsheet too small to fit all the thumbnails or else there will be no scroll bar.

You may also wish to add the -grow hint instead to see what happens. If you wish to have a repeating background tile behind a growing -thumbsheet you can use an interiorgrow-tile.

Obviously it makes no sense to use both at the same time.

Learning More

You've learned to create a separate thumbnail page using manually positioned -thumb layers.

In this exercise you created a separate page for your thumbsheet. SiteGrinder also allows thumbsheets to appear instead on the same pages as your full sized images. The layer group thumb tutorial shows this technique. The basic workflow for this is even simpler: just add and position everything, -picturebox, -thumbs, and -thumbsheet, on the same -gallery page. Only one layer comp page is needed, instead of the two shown here.

At this point you may want to learn about any of the following: