How to Make a Web Page With Photo Thumbnails

There are hundreds of methods and techniques for creating a web gallery and it would be impossible to cover them all here. A good place to start, however, is by finding free services, software programs and script libraries that can make the task quick and easy regardless of your experience level with HTML. If you use a blogging platform, creating a photo gallery with thumbnails is as easy as clicking "Create Gallery." For a more customized page, or to embed slideshows from onlines services you use, a few more steps are necessary.

Instructions

Preparation

1. Prepare your images for the web by using the photo software that came with your camera, or a photo editing program such as Picasa, Photoshop or Corel Photo. If optimizing manually, your photos should be resized to a maximum of 1024px wide and saved as JPG files with a quality of 6 to 8 (or 20% to 40% compression).

2. Determine how you will host the images and display them on your Web page. Hosting them yourself and displaying them manually will require a large amount of web space and a hosting service that supports the GD image conversion library. If hosting them elsewhere, make sure that you will be able to link to and display the images from your website either directly or via a widget or slideshow.

3. Follow the steps below that best match your knowledge level and skills. Writing CSS and HTML, or working with Javascript, is beyond the scope of this article, so only follow those sections if you have a working knowledge of these languages.

Use a Free Service

1. Sign up for a free account at Flickr, Shutterfly, or Picasa (see References). These services provide ample storage for your photos, an easy interface for creating and managing galleries, and the ability to embed slideshows and thumbnails in your own website. Social networking sites such as Facebook and Myspace also have gallery options, thought they might not be as robust.

2. Upload your photos and create a new album to display on your Web page. Add titles and descriptions to each photo prior to saving them.

3. Add a new page to your website or blog to display the gallery. If using Flickr, you can access the embed code by viewing the album and clicking Slideshow>Share. In Picasa, a page is created for you that you can link to friends or family and includes an Embed Slideshow link on the right side if you want to place it in your blog or social site. Shutterfly offers a web gallery page creator, which you access from your account page by clicking on "Add a Share Site". Facebook and Myspace both have Share album options inside the album view to create slideshows or embed code, or you can link directly to the galleries.

Create a Page Manually

1. Download and install a free application such as Infranview or Picasa. Place all the images you want to appear in your gallery within their own folder, and open the software program.

2. In Infranview, press "T" on your keyboard to access the thumbnail viewer and locate your gallery folder. In Picasa, click on "File > Add Folder to Picasa" to view the contents on the right.

3. Export the images to an HTML file. In infranView, click on "Options > Select All," then click "File > Save selected thumbs as HTML file." In Picasa, click "Folder > Export as HTML page" and select a template to use.

4. Upload the files created by your chosen program to your web space, keeping the images and folders in the same structure the program created them in. Point your browser to the HTML file to verify the files were uploaded correctly.

Use Advanced Scripts and CSS

1. Download the Galleria, Gallerific, or PrettyPhoto jQuery libraries (see Resources) and call them in the head of your HTML or PHP document.

2. Create CSS styles using the defined selectors for the library you choose to use. Detailed instructions on how to style and integrate these libraries is available in the downloads or on the author's website.

3. Load the thumbnails into your Web page manually or use a script like Timthumb to generate them. Depending on the platform you are working with, the initial gallery page may or may not be something you need to create, as these libraries will display the images you define in the page body or included XML document. A free desktop program such as Picasa can save you time by generating XML or HTML documents and thumbnails from a folder you specify if the images are on your hard drive.

References

• Picasa: Getting Started Guide
• Shutterfly: Share
• Flickr: How to Embed a SlideShow

Resources

• PrettyPhoto
• Galleria
• Gallerific
• Infranview