(NOTE: THIS IS BETA DOCUMENTATION AND IS THEREFORE INCOMPLETE AND SUBJECT TO CHANGE. PLEASE NOTIFY HELP@MEDIALAB.COM OF ERRORS OR SUGGESTIONS)
SiteGrinder Pro introduces a powerful new set of features for rapidly creating galleries of images.
This feature is aimed at photographers, artists, or anyone with collections of images they would like to display on the web in an organized, easy to navigate fashion.
There are a number of key benefits to SiteGrinder Pro's approach:
- Intuitive approach similar to other SiteGrinder features
- Automatic gallery navigation
- Automatic resizing of images
- Custom Portrait (Tall) vs. Landscape (Wide) orientation support
- Automatic creation of thumbnail images and thumbnail linking
- Powerful JPEG metadata support
- Easy creation of multiple galleries from one or more page layouts
We'll start with a simple gallery example and work up to one with multiple galleries, thumbnails and metadata.
A Basic Gallery With Manually Created Pages
Hints introduced: next-button, prev-button
SiteGrinder Pro introduces a number of new button types to save users a huge amount of labor when making galleries. Two very useful new hints are "next-button" and "prev-button". SiteGrinder Pro will automatically link buttons with these names in intelligent ways.
Their most basic use is with layer comp pages you create. If a layer named "next-button" appears on a page, SiteGrinder will auto-link it to the next page in the list of layer comp pages. Similarly a "prev-button" layer will be auto-linked to the previous layer comp page. (Don't forget, you can change the order of layer comps just by dragging and dropping in Photoshop's layer comps palette.)
This functionality makes it very simple to create sequential navigation between layer comps. We can use it to manually construct a gallery with auto-linked navigation.
NOTE:
- Unlike most SiteGrinder hints, which allow you to use any layer name as long as the hint appears at the end, these hints are full-name hints: the name of these buttons must be "next" or "prev" followed by standard SiteGrinder hints like "-button" or "-rollover" .
- These buttons can be text, graphic or layer set.
In the Photoshop document below we have a next-button, a prev-button, and three images. The built pages will show in the order they appear in the layer comps palette.
Examine this animation to see how the different comps are set up (Note that we have manually hidden prev-layer in the first comp and hidden next-layer in the last comp because they have nowhere to go.):
From this document SiteGrinder will generate a web page for each of the three images and will program the correct navigation for the forward and backwards buttons.
This manual technique for creating sequential, Powerpoint-like navigation is fine for small numbers of images or for situations where each page needs a lot of custom elements and formatting.
For situations where you have a lot of images, such as folders of digital photos, SiteGrinder Pro can automatically generate both the navigation between pages and the pages themselves. The next example explains how.
A Basic Auto-Generated Gallery With Next/Previous navigation
Hints introduced: -picturebox, -gallery
The recipe for the simplest auto-generated gallery includes the following ingredients:
- A folder of images on your hard disk
- A layer in a Photoshop document with the -picturebox hint
- "next" and "prev" buttons to navigate from one image to another
- A layer comp with the -gallery hint in which the -picturebox is visible
The -picturebox layer is a rectangular image layer which will indicate to SiteGrinder where you want your images to appear on the page and what size to make them. You can use a solid rectangle or an example picture you've imported. What's important is the size and position of the layer, and adding "-picturebox" to the end of its name.
After you've created your -picturebox and the next and previous buttons, create a new layercomp and name it sample-gallery. (You don't need the -page hint.)
When you open SiteGrinder you will see a "PictureBox" panel if SiteGrinder has found a -picturebox layer in your document. Here you can point SiteGrinder to the folder of images you wish to display one at a time in the space indicated by the size and position of the -picturebox layer.
This panel displays a list of all the -picturebox layers it found in your document. In this case there is only one,named "example".
Clicking in the "Source" column to the right of the -picturebox layer's name will bring up a dialog with which you can choose a folder of images and set other options.
SiteGrinder now knows enough to auto-generate a web page for every image in your folder, but there isn't yet any way to navigate from one image to another.
This is accomplished using the layers named "next-button" and "prev-button." When layers with these special hints appear on a page that also contains a -picturebox layer, they will automatically be programmed to correctly navigate your gallery. All you have to do is create the layers and give them these names. You can use text or graphic buttons for this.
NOTE: unlike most SiteGrinder hints, which allow you to use any layer name as long as the hint appears at the end, these hints are full-name hints: the name of these buttons must be "next" or "prev" followed by standard SiteGrinder hints like "-button" or "-rollover" . (The order in which the images will be displayed is determined by the alphabetical order of the image names in the source folder of images.)
Once you have added a "next-button" layer and a "prev-button" layer, you are ready to build!
Open SiteGrinder and click the "Build" button. SiteGrinder will generate a web page for each image. The first page will have only a next button and the last page will have only a prev button. All other pages will contain both next and prev buttons. Unlike in the manually-built gallery example above, SiteGrinder automatically handles the visibility of next-button and prev-button on the first and last pages of -picturebox galleries.
Once the pages are generated, SiteGrinder will open one in a browser where you can use the navigation buttons to move between them.
Adding Metadata To The Gallery
Hint used: -metadata
A JPEG photo can contain, in addition to the image, textual information called "metadata." Most digital cameras, for example, automatically record the date and time the photo was taken along with the make and model of the camera, whether or not a flash was used, the exposure, f-stop, etc.
You can also add metadata to JPEG photos after you load them into your computer. Comments, authorship credits, copyright statements, even entire news stories can be added. The big advantage to metadata is that it travels along with the image file. You don't need to keep a separate database, so you don't have to worry about the data getting out of synch with your image files. Each metadata comment needs a label to identify it. The label for the exposure at which a photo is taken, for example, is "Exposure", and its value will be something like "1/60 at f/2 ".
This is how metadata is seen in Adobe Bridge.
|
You can set photo metadata using the File-> File Info menu in Adobe Photoshop, using Adobe Bridge, or using any number of image organization applications. When you add your own metadata you will add both a label for the data (which can be pretty much whatever you want) and the data itself.
SiteGrinder Pro can read text metadata and automatically add it to gallery pages. Three elements are required to do this:
- A -picturebox Layer
- A type layer with the "-metadata" hint added
- Metadata codes typed into the "-metadata" layer
We'll use the file from the previous example since it's already set up with a "-picturebox". This example assumes you or your camera have placed "Exposure" and "Flash" information in your photos.
First we'll add a type layer and call it "Photo Info-metadata". Into this layer we'll type the following:
What exposure: [[Exposure]]
Flash status: [[Flash]]
SiteGrinder will look for metadata in each photo corresponding to any label it finds inside double brackets in a "-metadata" layer, and replace the label and brackets with that data on the gallery page displaying that photo. SiteGrinder will even match the text formatting applied to the labels and their brackets, so in this case we have applied some special formatting to the metadata.
Now, just open SiteGrinder and build to get a swanky, metadata-labeled slide show.
Two things to note:
- The descriptive text we placed in the field, i.e. "Flash status:" was optional. In addition to the bracketed metadata labels you can add anything you like or nothing.
- You can have more than one "-metadata" layer on a page. As an exercise, modify the included file to split the metadata layer into two layers, one with the exposure and the other with the camera flash info.
How SiteGrinder Sizes Images To Fit In -Pictureboxes
SiteGrinder Pro provides you a great deal of control over placement of images within the -picturebox layer.
Any images in the designated image folder small enough to fit in your picturebox will simply be centered over the center of your picturebox. Many users will simply place a picturebox where they want it on the stage and won’t need to do anything else for placement.
If your images are too large to fit in the picturebox then you must indicate to SiteGrinder in the Picturebox panel how it should handle the necessary resizing. Keep in mind that SiteGrinder never directly modifies the images in your source folder, instead it creates copies of the images and modifies them.
NOTE: If your images have the same height to width ratio as the -picurebox then the images will scale perfectly, and the fit settings described below won't be needed.
There are two choices when images need to be shrunk to fit the picturebox : inset or fill.
- Inset causes the image to shrink to fit the -picturebox, but not to crop. This is similar to watching a wide screen movie on a normal television using “letterbox” mode which doesn't crop the movie but also doesn’t use the full area of the tv screen. You won’t notice that kind of gap unless you have placed graphical borders around the picturebox.
- Fill causes the images to use the entire area of the picturebox layer, but not to stick outside of it. This can potentially cause cropping when, for example, SiteGrinder Pro must fill a short and wide picturebox with a tall and narrow image. The same thing happens when wide screen movies are scaled to fill normal tv screens.
Because of this issue of fitting we have provided a solution for those of you with collections of images that include both wide ones and tall ones. See below.
Creating Different Portrait and Landscape Layouts
Because most people with galleries of images have some images which are landscape oriented (wide and short) and others which are portrait oriented (tall and narrow) SiteGrinder Pro actually allows you to set up a gallery page for any number of height::width ratios
To use this feature to support separate tall and wide layouts you will set up two -gallery pages, one for portrait and one for landscape. Each page must contain a -picturebox layer, and each page must have the same name, such as "my photos -gallery". You can lay out each page however you like - placing the horizontally oriented picturebox in one place and the landscape oriented picturebox in another. SiteGrinder will automatically choose the layout for each picture in your folder that most closely matches the image's aspect ratio. You can have as many of these pages as you like if you have many different aspect-ratio images.
Remember, this feature, while very useful, is totally optional.
Creating Multiple Galleries
Adding Galleries To Your Site
Multiple PictureBoxes
Galleries and Pages