How to add an image gallery to a template (part 2)

Post 174 of 262

This is part 2 in a series of tutorial posts about adding an image gallery to a website template. For this post to be useful, make sure to read part 1 first!

In the part 1 of this tutorial I described how to replace the single sample image of the Gallery template with a simple jQuery image gallery plugin. Part 1 ended when one of the example galleries included with the plugin had been inserted in its default form. In this second part, it is time to adjust the image gallery to fit better into the template design and replace the default images with own photos.

Step 7: Adjusting the CSS

This is what the CSS for the image gallery plugin looks like right now:

#gallery {width:515px; margin:0 auto;}
#gallery img.output {width:500px; height:375px; border:solid 5px #fff;}
#gallery span.caption {display:block; margin:1em 0;}
#gallery ul.thumbnails {width:100%; list-style:none; margin:0; padding:0;}
#gallery ul.thumbnails li {float:left; margin:0 0.5em 1em;}
#gallery ul.thumbnails li img {width:100px; height:75px; border:solid 5px #fff; cursor:pointer;}
#gallery ul.thumbnails li {border:solid 5px #77D0EF;}

The gallery itself is 515 pixels wide, and the image sizes are 500 x 375 pixels for the large image and 100 x 75 pixels for the thumbnails. Since the main content area in the Gallery template is 750px, I want bot the large images and the thumbnails to be larger. Taking the border into account, I define the width of #gallery as 750px and the width of the images to 740px. The thumbnails are set to 130x95px. There are also a few other changes I want to do, adjustments of margins and colors of borders.

After making the wanted changes, my CSS for the image gallery looks like this:

#gallery {width:750px; margin:0 auto 20px auto;}
#gallery img.output {width:740px; height:525px; border:solid 5px #ddd;}
#gallery span.caption {display:block; margin:0;}
#gallery ul.thumbnails {width:100%; list-style:none;
margin:20px 0 10px 0; padding:0;}
#gallery ul.thumbnails li {float:left; margin:0 10px 5px 0;}
#gallery ul.thumbnails li img {width:130px; height:92px; border:solid 5px #ddd;
#gallery ul.thumbnails li {border:solid 5px #c03939;}

Step 8: Adding own photos and editing the HTML

Now I want to remove the sample images and insert own photos into the gallery. I’ll stick to the theme from the original template and use dog photos, to keep the example relevant with gallery template designer Steve’s site about dogs. First of all, I delete the numbered images in the /images folder (which is located in the template folder). Second, I create my selected new images in the proper sizes using an image editor. 740 x 525 pixels for the large versions, 130 x 92 pixels or the thumbnails. I save the large images as 1.jpg, 2.jpg and 3.jpg – and the corresponding thumbnails as 1_thumb.jpg, 2_thumb.jpg and 3_thumb.jpg, all in the /images folder.

The next step is to edit the HTML for the new images. At this point, the HTML for the sample images look like this:

<div id="gallery">
  <img class="output" src="images/1.jpg" alt="" />
  <span class="caption">Monument Valley</span>
  <ul class="thumbnails">
    <li><img class="active" src="images/1.jpg" title="Monument Valley" alt="" width="100" 
     height="75" /></li>
    <li><img src="images/2.jpg" title="Honey Bee" alt="" width="100" height="75" /></li>
    <li><img src="images/3.jpg" title="Cup of Coffee" alt="" width="100" height="75" /></li>
    <li><img src="images/4.jpg" title="Grand Tetons" alt="" width="100" height="75" /></li>
    <li><img src="images/5.jpg" title="LA Skyline" alt="" width="100" height="75" /></li>
    <li><img src="images/6.jpg" title="Leaf" alt="" width="100" height="75" /></li>
    <li><img src="images/7.jpg" title="Chinese Bell" alt="" width="100" height="75" /></li>
    <li><img src="images/8.jpg" title="Ladybird" alt="" width="100" height="75" /></li>
  <br class="clear" />

There are two changes to make. First, replacing the code for the sample images with the code for my three own images. And second, move the caption to display it as a header above the large image instead of as an ordinary smaller text below the large image. The first change is a matter of removing unwanted list items and then changing the title, width and height attributes (the file name remains the same). The second change is made by creating a <h2> element right after the div id=”gallery” tag and then copy the <span> tag (including class=”caption” and ending tag) into this new header element. With these changes applied, the code will look something like this:

<div id="gallery">
  <h2><span class="caption">Papillon (adult)</span></h2>
  <img class="output" src="images/1.jpg" alt="" />
  <ul class="thumbnails">
    <li><img class="active" src="images/1.jpg" title="Papillon (adult)" alt="" width="130" 
    height="92" /></li>
    <li><img src="images/2.jpg" title="Papillon (puppy)" alt="" width="130" height="92" /></li>
    <li><img src="images/3.jpg" title="Kleinspitz (puppy)" alt="" width="130" height="92" /></li>
  <br class="clear" />

Finally, I add a credit link in the footer to the creator of the Gallerax jQuery plugin, nodethirtythree design.

Step 9: Save and review the result in the browser

By now, the image gallery looks as I want it to look. Sizes have been adjusted, I have replaced the sample images with own photos and made sure that the code validates without errors. This is what the modified template looks like in the browser:

Click here to see a live demo

Final words

This version of the Gallery template is now available as a separate download ( so you can dive right into it and play with the image gallery plugin without having to repeat all steps in this tutorial. To download Gallery (alternate version), click the screenshot above. For more details about the Gallery template, go to the Gallery template page.

, , ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.


Facundo GonzálezFebruary 12, 2011 at 03:00Reply

This reminds me Johana :)

JayAdamsFebruary 15, 2011 at 22:25Reply


mikeFebruary 20, 2011 at 04:54Reply

Thanks Andreas for your tutorials, they are very helpful. I was wondering if there is any way to make the thumbnails appear in a single row with a scroll bar. I have a lot of pictures and it is annoying having to scroll down for the thumb then scroll up to view the picture.

Gregory RestivoJuly 21, 2011 at 10:38Reply

Thank you, very helpful to me. I think i can follow your steps to add image gallery in my wordpress, I don’t know how to do it before I saw your article.

terryAugust 16, 2011 at 17:55Reply

many thanks, this is very helpful, i think i can add my gallery to this now and integrate as part of my web site, but as previous query by mike is it easy to add a scroll along the bottom, because if you have 20 photos it spoils the look of the page

TrevorJanuary 19, 2012 at 16:19Reply

Dear Andreas

I have just come across your gallery-alt template through the use of Style Master.

I have been playing about a little and added GIF images (thumbnail and large versions) to the HTML page of a mount (matt) which has the window (opening) set as the transparent colour. When I view the webpage and select the mount the window is indeed transparent.

What I would like to do when the mount thumbnail image is clicked, is for the large mount image to display over the top of the image (layer? Z order?) which is currently in the main window so that the whole of that image would show through (behind the mount but through the mount window. Eventually I would add extra mount images of different colours to view my photographs in different coloured mounts. Even perhaps show the effect of a double mount etc.

I wondered if this was possible and if you would be able to give me some ponters towards how to begin. Incidentally, only in the last week or so have I become interested (and excited) in the use of CSS.

I wold like to thank you for your free template (I am reading your tutorials also).

With best regards
Trevor (UK)

denisAugust 28, 2012 at 18:10Reply

this was a blessing in disguise guys….im so helped,,,,i have always wanted a simple,SHORT AND understandable tutorial that puts me on track for css template editing and image gallery creation ,thanks so much hey.GOD BLESS YOU !!!!

denisAugust 28, 2012 at 18:10Reply