Overview of SiteGrinder Pro Thumbnails & Thumbsheets
(NOTE: THIS IS BETA DOCUMENTATION AND IS THEREFORE INCOMPLETE AND SUBJECT TO CHANGE. PLEASE NOTIFY HELP@MEDIALAB.COM OF ERRORS OR SUGGESTIONS)
Often it is helpful to create a set of small "thumbnail" images linked to the 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 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, rectangular image placeholder layers that have the "-thumb" hint in their names. SiteGrinder will replace them with small version of the 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 thumbnails, with custom size/fit
- Auto creation of scrolling "sheets" of thumbnails
- Auto rollover/hilight behaviors
- Use your own already created thumbnails
- Use button layers as thumbnails to auto link to gallery pages
- Auto create multiple pages of thumbnails and navigation between them
- Place thumbnails on pages with full sized gallery images
- Auto generate navigation from individual gallery pages back to thumbnail pages
Creating Thumbnails Automatically With SiteGrinder Pro
New hint : -thumb
A thumbnail is just a rectangular layer with the -thumb hint. This layer indicates the size and position of a thumbnail to SiteGrinder Pro. You can create as many of these as will comfortably fit on a page and place them wherever you like.
SiteGrinder auto links the thumbs to the corresponding gallery pages it creates. SiteGrinder matches the left-right, top-bottom order of the -thumb layers to the alphabetical order of the images in the image folder.
SiteGrinder will replace these layers with the actual thumbnails and link them to the appropriate gallery pages when it builds.
Here is an example of a page with eight thumbnails on it as it looks in Photoshop:
In this case we have used 8 white rectangles to tell SiteGrinder how to place the thumbs. When SiteGrinder builds the page it will replace the white rectangles with small versions of the images your -picturebox layer is showing. These thumbnails match to the "planets-picturebox" layer located on our gallery page.
SiteGinder Pro only displays as many -thumbs as it needs. If there are fewer images than -thumbnails then SiteGrinder will just ignore the extra -thumbs and not display them.
Thus, when the above example is built with a folder of 6 images, it results in the web page below:
SiteGrinder has replaced the first six thumb layers with scaled down versions of the actual images and omitted the unused seventh and eighth thumbnails. See below for the opposite case, when there are more images in your image folder than there are -thumbs on your page.
Having SiteGrinder generate and lay out multiple thumbs for you
New hint: -thumbsheet
In the previous example we demonstrated how you can create an arbitrary number of copies of a -thumb to determine where and how big individual -thumbs are on the page.
That technique allows the most customizable control but is also labor-intensive if you are just laying out -thumbs in a line or a grid. SiteGrinder has another way to define -thumbs that lets SiteGrinder do most of the work. You accomplish this with the -thumbsheet hint.
A - thumbsheet ia a rectangular image layer on a gallery page that tells SiteGrinder what area of the page to put thumbs and how to distribute them. A single -thumb layer or layer set/group on the same gallery page tells SiteGrinder how big to make the thumbnails. With just these two layers SiteGrinder has enough information to lay the thumbs out in a grid contained by the area of the -thumbsheet layer.
Here is an example.
The - thumbsheet page as seen in Photoshop:
(roll over the layer palette to see the layers hilite)
After building you will see something like this:
Things to notice:
- The thumbnails appear in a grid within the - thumbsheet area. SiteGrinder places as many across as can fit and then moves down to add more, within the limits of the space. To adjust how many columns of thumbnails there are either shrink the -thumbsheet or make the -thumb bigger.
- If there are more images in your - gallery folder than can fit in the area you have defined and you have added the -scroll hint to the - thumbsheet layer, SiteGrinder will add a vertical scroll bar and place all the thumbnails on one page in a scrollable area. If you don't use the -scroll hint then SiteGrinder will place as many thumbnails as it can in the - thumbsheet area and then create new pages as it needs for the additional thumbnails.
- The -thumbsheet layer itself does not appear on the built page. That is because the -thumbsheet exists only as a guide and is not meant to appear on the page. If you want the thumbnails to sit on top of a special background color or graphic, just add those layers behind the -thumbsheet layer.
- The -thumbsheet layer can just be an outline, it doesn't have to be solid.
- The -thumb can be a layer set/group
When You Need More Than One Thumbnail Page
In the previous example we demonstrated what happens when SiteGrinder builds a thumbnail page containing more -thumbs than there are images to place in them. But what happens if you have more images than thumbnails?
]SiteGrinder handles this by automatically building as many pages as you need. These pages will be duplicates of the first thumbnail page, but they will contain different thumbnail images and links. As with the single page of thumbnails, the final page will omit any unnecessary extra thumbs if there are fewer needed there than are placed there.
This raises the question of how to navigate between these auto-generated pages of thumbnails. The answer is to use the same "next-button" and "prev-button" hints described in the Gallery documentation.
When SiteGrinder finds buttons with those names on thumbnail pages it will automatically link them so they connect the thumbnail pages to each other. SiteGrinder will also omit the "prev-button" from the first thumbnail page, and the "next-button" from the final thumbnail page.
Navigating from a Gallery Image Page Back To The Thumbnail Sheet
New hint: up-button
If you add a layer named up-button to a -gallery page with an -imagebox on it, SiteGrinder will automatically link that button to the page of thumbnails that contains the -thumb for the current image for each page of the -gallery.
Using Existing Thumbnails With SiteGrinder Pro
If you wish to create a custom look for your thumbnails beyond what you can achieve with -thumb sets/groups (which is quite a lot) you can create the thumbnails yourself and save them to a folder.
You set up the thumbnail pages in the same way as shown above, but instead of having SiteGrinder create them you will specify a folder that contains them using the PictureBox panel of the SiteGrinder window.
The name of each thumbnail image must exactly match the name of the full sized image it represents.
Using Buttons As Thumbnails
If you want to create custom looks and rollover behaviors for your thumbnails, you can use SiteGrinder -buttons. SiteGrinder won't alter the appearance of these buttons in any way, but it will auto link them to images in your image folder. SiteGrinder will also, just as with normal -thumbs, create additional pages if necessary.
Keep in mind that these buttons will be generic and repeated exactly on each page of them SiteGrinder creates.
As with normal -thumbs, SiteGrinder matches the thumbs left-right, top-bottom order to the image folder alphabetical order.
You do this by creating a -button and adding the -thumb hint to it, as in "First -button-thumb". In this case you could also make a "First -rollover-thumb" layer.
Thumbnail Borders
When SiteGrinder Pro creates thumbnails, it can optionally generate various borders for them.
There are three types of borders:
- Normal
- Rollover
- Current
The Rollover border appears around the thumbnail that the user is rolling over with the mouse.
The Current border appears around the thumbnail that represents the currently displayed full sized image in the -picturebox. This only applies to thumbnails appearing on the same page as the -picturebox.
The Normal border appears around all thumbs that the Rollover and Current borders don't.
You can set color and style for each type of border.
You can turn off all borders by setting the width to 0, or you can turn off individual border types by setting their style to "none".