Gallery Image Setup (overwrite method)

Web template support for photo gallery setup

Note: In gallery pages, the closeup image view height and width sizes are not defined in the html code. This allows for any size closeup images to be used and also allows responsive templates to resize the images as the viewing area decreases. In responsive templates, closeup image maximum sizes are edited in the "style.css" and use "max-width" css.

Replacing gallery images (overwriting)
The best way to replace gallery images (and setup the gallery and slideshow at the same time in some templates), is to name your pictures by the default names that are used in the template gallery folder.

Inside the gallery folder, in most templates, you'll see files named for example:

Fgallery1-1.jpg - (full size image closeup)

gallery1-1.jpg - (thumbnail image)


Setup the full sized closeup image first:

1. Open one of the photos that you plan to use in the gallery in your graphics software. (You'll be saving this image as "Fgallery1-1.jpg" for example.)

2. Resize this image to be 750 pixels wide or less. You can use any height. (see your "help.html" for the recommended gallery image sizes).

3. Choose "save as" on your graphics program menu.

4. Browse to the template folder, then to the "gallery" folder inside the template folder.

5. Click on (highlight) the "Fgallery1-1.jpg" inside the folder one time (Fgallery1-1.jpg is the full sized image, gallery1-1.jpg is the thumbnail). The "file name" box should "grab" this name for you and make it the "save as" file name.

6. Click the save button. Click the eye below for a visual look:




2: Setup the thumbnail image:

1. You have saved the full sized image above, now re-size your open image for the thumbnail. Default thumbnails may be 75, 100, 130 or 150 pixels wide (see your "help.html" for the recommended thumb sizes). You can optionally make your thumbs any size you would like.

2. Choose "save as" on your graphics program menu.

3. Browse to the template folder, then to the "gallery" folder inside the template folder.

4. Click on (highlight) the "gallery1-1.jpg" inside the folder one time. Again the "file name" box should "grab" this name for you. Click save.

5. Test the "gallery1.htm" page in your browser. You should see the "gallery1-1.jpg" in the first spot on the HTML page. Click the first thumbnail image and you should see the full size "Fgallery1-1.jpg" image in the closeup.



Related Topics:
Gallery Setup Overview
Editing Thumbnails