Introduction
The -thumb hint is part of SiteGrinder Pro's powerful automatic image gallery creation system.
Click here for a complete overview of this system and its many options.
Often it is helpful to create a set of small "thumbnail" images linked to the gallery pages that show the full-sized versions. SiteGrinder Pro can automatically generate thumbnails from folders of images, and automatically link them to the appropriate gallery pages. If you choose to create your own thumbnails manually and place them in a folder, SiteGrinder Pro can use them and auto-link them to gallery pages as well.
Thumbnails are essentially small, generic rectangular image placeholder layers that have the -thumb hint in their names. SiteGrinder will replace them with small version of the actual images in the folder you are building a gallery of. SiteGrinder will either make small versions of the images or use small versions you've already made, depending on the setting you choose in the "PictureBox" panel of the SiteGrinder window.
SiteGrinder supports the following thumbnail features:
- Auto generation of thumbnail images from full sized images
- Thumbs can be any size and appear anywhere on a page
- Auto navigation from individual gallery pages back to thumbnail pages
- Optionally include metadata with thumbnails
- Optionally use your own already-created thumbnails
- Optionally combine with the -thumbsheet hint for auto grid layout of thumbnails
- Use standard SiteGrinder buttons as thumbnails
- Auto create multiple pages of thumbnails and navigation between them
- Place thumbnails on pages together with full-sized gallery images
- Thumbnail borders to indicate normal, rollover, and selected modes
- Use layer set/group as a thumb for thumb backgrounds, metadata, etc.
Click here for a tutorial using the thumb hint
Click here for a tutorial using the thumbsheet hint
Basic Thumbnails
Galleries have two primary elements:
- Pages with full sized images, each loaded from a a folder of jpegs
- Pages with small thumb images you can click on to go to the full sized versions
(SiteGrinder galleries can also have full sized images and thumbs on the same page...see below.)
A basic thumbnail is just an image layer with a filled rectangle in it that has the -thumb hint in its name. But by itself it does nothing...it must be part of a SiteGrinder gallery to actually function.
When visible on a layer comp page that has the -gallery hint in its name, the thumb becomes a placeholder for a small version of one of the full sized images in a gallery.
You can place as many thumb layers on a page as you like, make them any size, and put them anywhere on the page. Often it is easiest to create a single thumb layer and then duplicate it for as many thumbs as you need, repositioning as necessary.
- NOTE: If you want your thumbs to be presented in a line or a grid you can have SiteGrinder automatically lay them out for you using the -thumbsheet hint.
When SiteGrinder builds your gallery, it will automatically create small versions of your full sized images and size and place them to match the thumbnails on the gallery page that contains them. SiteGrinder also links these thumbs to the pages with their full sized versions.
SiteGrinder matches the full sized images to the thumbs in left-to-right, top-to-bottom order.
If there are more images in a gallery than there are thumbnails on the page then SiteGrinder will automatically create new pages of thumbs using the same design.
Layer Set/Group Thumbnails
Photoshop's layer groups, previously known as “layer sets”, are the folders you can use to organize the layers palette.
Many SiteGrinder hints can be applied to layer groups as well as individual layers.
You can turn a layer set/group containing a number of layers into a single thumbnail.
To create a thumbnail from a layer set, place the -thumb hint in the name of the set, and also in the name of an image layer contained within the set that will determine the size and placement of the thumbnail image.
There are two big advantages to using -thumb with layer groups:
- You can include image -metadata with each thumbnail
- You can provide custom decorative layers for the thumbnails
The most powerful element in a -thumb group are type layers that use the -metadata hint. These can be used to label each thumb with any information you can find or place in your jpeg files using a metadata editor.
Other image layers in a -thumb layer set/group can embellish the -thumb image that SiteGrinder creates by adding, for example, a drop shadow. The big advantage to putting these layers in a -thumb set is that SiteGrinder will only create as many of these as are needed on a page based on how many images you have.
Below is an example of four -thumb sets/groups. The bottommost is open and selected. you can see the internal red -thumb layer and the blue background.
Layer set thumbs that include -metadata layers cannot be used with -thumbsheets.
Click here for a tutorial using layer set thumbs.
Placing Thumbs and Full Sized Images on the Same Page
When you set up a gallery you need to decide whether you want your thumbs on the same page as your full sized images or on separate pages.
To place -thumbs made from layers or layer sets/groups on the same page with the full sized images, just add them to the layer comp page their corresponding -picturebox is on.
You can even use -thumbsheets on pages in conjunction with a -picturebox for maximum convenience.
Using Already Existing Thumbnail Images
If you already have thumbnail images or you wish to create custom thumbnail images outside of SiteGrinder, you can still take advantage of SiteGrinder's automatic linking of thumbnails to image pages.
Here is the basic workflow to achieve this:
- Place the jpeg thumbnail images that already exist in a folder on your hard disk
- Name them so that each thumb's name is identical to the full size image it represents
- Add -thumb layers to your gallery page(s) in the layout you desire
- Open SiteGrinder
- Switch to the Galleries panel
- Click in the column to the right of your gallery in the list of galleries
- In the thumbnails are of the dialog that opens, uncheck "Autogenerate" to let SiteGrinder know you have existing thumbs
- Click the "Browse" button in the Thumbnails area and select the folder that contains your thumbnails
Thumbnail Borders
SiteGrinder can optionally place various kinds of borders around your thumbs.
Unique border colors and styles can be set to surround:
- All thumbs on a page
- The thumb the user is currently rolling over with the mouse pointer
- The thumb representing the current image when thumbs appear on the same page with full sized images
Specify your desired thumbnail border settings in the "Galleries" pane of the SiteGrinder window.
Using Buttons to Create Thumbnails
Sometimes it fits a design better to use generic icons or other graphics as thumbnails, rather than small versions of the gallery images they link to. One of our customers has a gallery with 8 views of a house. Rather than using eight small versions of the images, he placed eight colored rectangles with the numbers 1-8 in them.
If you wish to have generic thumbs that aren't small versions of your images, all you have to do is create SiteGrinder button layers, place them on a -gallery page, and add the -thumb hint to them.
SiteGrinder will treat them as it does all buttons, but will automatically link them to your images. As with other -thumbs, if there are more images than thumbs then SiteGrinder will create additional pages of these buttons, as necessary.
You can also create rollovers and popups for thumbs created in this manner. A button thumb layer named pic1-button-thumb would use layers pic1-rollover and pic1-popup in the normal way.
Button thumbs cannot be used with thumbsheets.
