This tutorial explains how to to create an overlay image gallery using template defaults.
This is an example of the basic overlay gallery:
media: gallery. tags=comic strips, display rule=Dynamic size overlay gallery
figure 1
First, add the group of images to your site that you wish to make a gallery. The quickest way to upload multiple files is to use the File Manager. Select the File Manager button from the admin toolbar (fig. 1, D.).
media: gallery. tags=junk to delete, display rule=Dynamic size overlay gallery
Figure 2
This will open the File Manager in a new window (fig. 2). Select Upload Files to Site (A.) and then Select File(s) to Upload (C.). This will open a file chooser window. (Note: If the button doesn't do anything, you don't have Google Gears installed. Download it here, and restart your browser.) Select one file or multiple files, and click Open. This will add the files to the Pending Files list (F.). If you need to add files from different folders, you can go back and add as many as you want.
Next, type a short tag describing your gallery. Tags are used to organize files within the file manager, and are also used to create a gallery. A tag can be a group of words, and multiple tags can be added by using commas to separate them.
In most cases, leave the "Do Not Resize" checkbox unselected. The designer of your site has set maximum image dimensions in the site settings. You can upload an entire folder from your digital camera, and the file manager will resize all of the images to web-friendly dimensions. This checkbox overrides those settings.
Next, select Upload (E.). The Pending Files list (F.) will show the progress of the upload. When all uploads are complete, close the window.
In the site admin, place the cursor where you want the gallery to be placed and select Insert Media (fig. 1, M.).
Figure 3
The Insert Media Dialog (fig. 3) will appear. Select one or more tags from the Tag list (G.). Scroll through the preview window (C.) to make sure all of the images are correct.
Select the checkbox labeled Create a gallery based on selected tags (H.), and choose the display rule "Dynamic size overlay gallery." Select "Use This Media."
In the site editor, you will see a line of serveeML code that looks like this:
This says "This gallery contains all images tagged 'portfolio', and uses the display rule 'Dynamic size overlay gallery." If you want to add or remove images from a gallery, simply add or remove the tag 'portfolio' from the image. You can do this in the Insert Media Dialog (fig. 3). Select the image you wish to add or remove from the gallery. Add or remove the gallery tag from the tag field and select Update Resource Fields (D.). Close the window.
Select Save/Publish (fig. 1, Q.) and refresh the site to see your changes.
This is an example of a gallery with captions enabled:
media: gallery. tags=instructions, display rule=Dynamic size overlay with caption space
To use an image gallery with space for a caption, the process is very similar. Instead of selecting the display rule "Dynamic size overlay gallery" in the Insert Media Dialog (fig 3, H.), choose the display rule "Dynamic size overlay gallery with captions." This display rule adds extra space at the bottom of each photo and pulls in the title, description, and content attached to the image.
figure 4
To add captions to the images, open the File Manager (fig. 1, D.) and select a tag from the tag field (fig. 4, A.). Toggle the checkbox labeled Show Thumbnails (B.) to turn the image thumbnails on or off. Select an image from the list (C.). The full image will appear in the preview window (E.). The Title, Description, and Tags (F.) may already be filled in if you have populated those fields with the media dialog (fig. 3). If not, you can enter all of those details here. The content window (G.) is the only field that cannot be accessed from the media dialog. This is where the body of your caption will go. Enter all of the caption information and click Save Content (H.).
If you wish to delete any files, that is done in this dialog as well. Select the red "X" that appears when hovering over a file name (D.).
Once you have added all of the captions, go back to your site and refresh to see your changes.