Home         Blog         Resources         About         Contact 

Basic Skills:  Build a Photo Gallery

This example will employ the following skills:

• Tables
• Images
• Documents
• Hyperlinks

Step 1:  With a photo editor, make two versions of each image, a thumbnail and a full size:

Step 2:  Upload the thumbnail images to the Image Gallery and the full size images to the Document Gallery.  By now, you should be able to find your way to these galleries.

Step 3:  Make a Table with cells to contain the thumbnails.  Use the Generic Style and give it an arrangement of rows and columns that will look nice on your page.  Be sure to clean the cells by removing text and spaces from every one.  With the Image tool, insert a thumbnail photo into each cell:

Step 4:  Click on each image to show the handles:

Do not touch or move the handles with your mouse pointer, or the image will distort.  Next, click on the Hyperlink tool to open the dialog.  Select the My Documents button and pick the corresponding full size image that matches the thumbnail.  Check the box for Open link in a new window.  Repeat these steps for each thumbnail in each table cell.  If you want to include text or other content with the image, use the Hyperlink tool to open another web page on your site, instead of a document.

Step 5:  You can make the table cell borders invisible by assigning them the same color as the background.  Right-click on the table, then click on Properties... to reset the border color.  This example also nests the gallery table inside of another table cell.  The outer cell is used to create a frame:

Notice that all of the thumbnail images have been cropped in a photo editor to be the same size and shape.  This makes a more attractive presentation.  Finally, the image link borders have been modified using CSS code and the Custom Style Sheet.  For instructions, see the Add a Little Pizazz page.    

Back to Basic Skills »