How to Write a Code for a Simple Photo Gallery
You want to share your images from travels, events or gatherings with friends and families. You have a website and can easily upload and write basic HTML code. Whether you are a professional photographer or artist posting images for sale, or someone who simply wants to arrange images of your work, family or hobbies, the coding is relatively easy and involves a basic awareness of tables. You can get fancier with Flash displays or slide shows, but to keep it simple, code using HTML.
Other People Are Reading
Things You'll Need
- Image editing software
- HTML coding software
- FTP or uploading program
- Proofed and sized image collection
Instructions
-
-
1
Gather and coordinate all your images into one major folder titled "My images" or named by subject. If you are using photographs of flowers, that would be the main folder title. Then you can make subfolders for roses, irises, wysteria, tulips and so forth, or group them as perennials, annuals and seasonal. Just sort through them all and name each image appropriately: blue_iris1.jpg, marys_garden_spring.jpg, and so forth.
-
2
Size all the images and save them in their large version -- usually a file size of less than 5 megabytes per image is common for the web. Go back through each image and save the files as thumbnails. Some programs have a simple way of doing this en masse, but it's also easily done by changing all of the photographs to a height of 2 inches and saving them with a new name. You'll get a uniform look for your eventual photo gallery if they are all the same height, rather than the same width. Don't go too large, like 5 inches height per image or you'll have a crowded look. Keep the thumbnails small. The new names will now be blue_iris1_thumb.jpg and marys_garden_spring_thumb.jpg. You will have one large and one thumbnail for each picture.
-
-
3
Sign on to your website and upload the images. This is done cleanly and in an organized manner if you create two image folders under your main images holding area. Make a (flowers) thumbnail folder and another folder for the larger flower images. Upload the appropriate pictures into its folder. Check the list once they're all in and make sure it's correct, with no thumbs in the large folder and vice versa. That will come in handy later.
-
4
Use your regular page template to create a new HTML page titled gallery1 or something similar. Within the body, create a table. <TABLE WIDTH="800" border="0"> Change the width to whatever you prefer for viewing. Then add the <TR> and <TD> attributes. This is the table rows and data to go within it. Sometimes you only need to include the width, but follow your usual tabling for your site.
-
5
Make the first row. This will be a list of the images grouped in 5 or 6 across, with space above and below. Paragraphing sometimes keeps things clear. <TR><TD><p> then the images for that line</p>
Enter the image list by using the thumbnails as clickable links. Copy and paste the first one and overwrite
for each photograph.
<A HREF="images/flowers/blue_iris.jpg" target="_blank"><IMG SRC="/images/flowers/blue_iris1_thumb.jpg"></A>
<A HREF="images/flowers/pink_iris.jpg" target="_blank"><IMG SRC="/images/flowers/pink_iris1_thumb.jpg"></A>
<A HREF="images/flowers/yellow_iris.jpg" target="_blank"><IMG SRC="/images/flowers/yellow_iris1_thumb.jpg"></A>
and so forth. Then close that paragraph </p> and </TD></TR>.
-
6
Add any specific image attributes such as height and width plus ALT info if you want. This isn't vital, but is a useful detail. You will only add this information for the thumbnail image that will be visible on the page. Two very useful attributes to place are the hspace and vspace, which give a little clear area around each image horizontally and vertically. Make the vspace the same for each image on the row or you'll have an odd array.
<A HREF="images/flowers_large/blue_iris.jpg" target="_blank"><IMG SRC="/images/flowers_thumbs/blue_iris1_thumb.jpg" height="160" width="85" hspace="10" vpace="20" ALT="Blue Iris"></A>
-
7
Repeat for up to about four or five rows per gallery page with five or six images across each row. (Some people choose many more rows but the appearance isn't always inviting and can look sloppy.)
-
8
Upload and test the gallery page. The rows should have the same number of images unless you had several wide ones. Five or six portrait views across, or three portraits and one or two landscape views usually works. Rearrange the layout by lifting (cutting) the entire line for each image and moving it to a preferred location. Recheck the layout for appeal. </TD></TR></TABLE> at the bottom of the code, before closing out the body and HTML>.
-
9
Verify all the thumbnails work. Click on each thumbnail in each row on each page. The larger version of the appropriate one should open. If one doesn't open, double-check your code.
-
1
Tips & Warnings
You can get a little fancier by putting each image onto it's own page and linking to the page rather than the image. Doing that allows you to click-through images, as in "next" and "previous". Just make a basic template page and put in the code for one image per page with a previous and next method (link or button). Overwrite the name of each image and save them as their own file names, then upload the group.
Learn CSS for some quick template options, too.
Never use images copyrighted or owned by another person or website.
Resources
- Photo Credit NA/PhotoObjects.net/Getty Images
