SAVE 25% when you purchase our Theme Bundle and Make Plus together. View bundle deal.

Add captions to your Photography gallery page

By Drew Strojny on October 28, 2010

Update November 8, 2011 Captions on your galleries are now available through your Theme Options panel. If you’re running Photography 1.4 or later, you do not need to make the changes in this tutorial.

We have had several requests in the Photography theme support forum for instructions on how to add captions to the main gallery page. By default, Photography shows a “featured thumbnail” image of a chosen photo from your gallery with no text. In this tutorial I am going to walk you through adding two different caption styles to your gallery page. Let’s get started!

Edit the gallery template

We need to add the gallery title to our gallery template by editing the /photography_pro/gallery.php file. Be sure to read through the editing a template file tutorial before jumping in. Open up your freshly copied gallery.php file and find the code below (starts on line 23).

      </a>
    </li>
  <?php endwhile; ?>
</ul>

Add the post title template tag just above the closing </li> and wrap it in an <h5> (shown below).

      </a>
      <h5><?php echo the_title(); ?></h5>
    </li>
  <?php endwhile; ?>
</ul>

Add basic styling

Screenshot of basic caption styling

The gallery title will now show up on your gallery page underneath each thumbnail, but it doesn’t have any styling. We need to add some CSS to clean things up a bit. Be sure to read through the adding custom CSS styles tutorial before you make any changes.

Did you know that Surf Office, Postmatic, Yeah Dave, and over 700,000 small businesses run their websites with Make, our free WordPress page builder. Discover the Make page builder now.

Open up your /photography_pro_child/style.css file and scroll all the way to the bottom.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
/* Example: Change the sidebar background to blue:
#sidebar {
    background: blue;
}
*/

Add some styling to the new <h5> element by replacing that code with the code below, which adds margin above the text, centers it, and makes it a bit larger.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
li.g-thumb h5 {
    margin: 10px 0 0 0;
    text-align: center;
    font-size: 1.3em;
}

Add fancy hover styling

Screenshot of fancy caption styling

If you prefer a fancier “hover only” caption use this code instead.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#gallery ul li {
   height: 195px;
}
li.g-thumb h5 {
    display: none;
}
li.g-thumb:hover h5 {
    display: block;
    margin-top: -97.5px;
    font-size: 2em;
    line-height: 0;
    text-align: center;
    color: #fff;
}
#gallery ul li a:hover img {
    opacity: .25;
}

Here is a summary of each CSS property / value pair listed above.

  1. Hide the <h5> tag by default.
  2. Show the <h5> tag when hovering over the thumbnail.
  3. Add a negative margin to center the text vertically on the thumbnail.
  4. Increase the font size to 20px.
  5. Zero out the line height so the negative margin we specified above works properly.
  6. Center the text.
  7. Set the color to white.
  8. Turn down the opacity on hover so the text is more noticable.

Enjoy your captions!

These captions have been tested and are working in the latest versions of Firefox, Safari, Opera, and Chrome. The second hover method doesn’t look as great in Internet Explorer because it doesn’t support the opacity property (unless you are using the IE9 Beta).

Enjoy this post? Read more like it in Tutorials.

25 Comments

  1. Michael

    Thanks Drew – this is really useful. BTW I noticed an issue on Firefox & IE8 with the hovering version. If there are 7 gallery icons & there are 3 icons per rows, I found that the footer jumps up when you roll over the 7th gallery icon (not sure if it matters, one of these icons is a password-proected gallery that had this icon revealed after password entry). The pre-revealed state of only 6 icons, there was no problem with the header.

    Incidentally, I noticed the opacity seems to work differently on Firefox & IE. – considerable darkening with FF (as expected) vs no darkening at all with IE.

  2. Drew Strojny

    Thanks for the feedback Michael! I haven’t tested the first issue, but thanks for the heads up. As to the opacity (darkening), as I mentioned in the tutorial, IE doesn’t properly support the opacity property (unless you are using IE9 beta).

  3. Michael

    Sorry I missed that about IE. Thanks alot! Keep up the tutes as they are interesting.

  4. Ofunne

    Thanks for this… When I added to the template, the word “Photography” appeared on the left side of the thumbnail and pushed it to the right. My website is a general art site and I’d like to remove the word.

    Also, using the light theme and customizations added to child theme style.css are not updating the site.

    Cheers.

  5. Kenold Beauplan

    Great tutorial. It helps a lot with my theme customization.

  6. Drew Strojny

    Michael: No problem, glad you enjoyed it :)

    Ofunne: You might need to tweak your CSS some more and define the text color in the light theme. Hit us up in the support forums if you need some help.

    Kenold: Glad to hear it!

  7. Lindsay Brown

    Hey this tutorial rocks! I’m so glad I bought your theme, y’all are awesome.

  8. David Barrett

    Hi

    I started to try this mod but was rather confused about the instructions. So backed out of it before I broke anything.

    Do I copy the gallery.php from the parent theme, edit it as instructed and place that edited copy in the child theme folder? Or do I do the editing in the wordpress dashboard>appearance>editor>Gallery Page Template?

    Another question before you answer that: do you expect to include this gallery label functionality in a near future update to the theme, in which I case I can wait for that.

    Like your themes

    David

  9. Drew Strojny

    Hi David!

    This would be great question for the support forums, it isn’t something we like to handle in the comments. To answer your question: we don’t have plans to add this to the theme by default.

  10. sylvia

    The first part (template) works, but not the second (style). I’ve looked at everyone’s sites that have posted here, and none of them having it working either. So what now?

  11. Drew Strojny

    Hi Sylvia!

    I just updated the first part of the tutorial about inserting the <h5> tag (the code had changed slightly). It should now work well. I just tested on the latest version of Photography and didn’t run into any problems and the hover captions are working for me. I think your best bet is to give it another try and then drop us a line in the support forums if it still doesn’t work.

  12. Sherb

    Would be nice if the location of the gallery.php file were specified in this tutorial….

  13. Sherb

    I would love to see similar step-by-step tutorials for the other common requests, like removing the frame from the homepage gallery and resizing the homepage gallery frame. A helpful tutorial indeed! Thanks!

  14. Drew Strojny

    Hi Sherb!

    I added a more specific location for gallery.php to the tutorial. Thanks for the tutorial idea, we’ll keep it in mind :)

  15. Evangelos

    Hello! I like very much the Photography template, and I’m considering buying it! (Haven’t tried the free version yet)

    Just a quick question, is it possible to link each photo in the gallery with a post in the blog? ie, click on the photo -> go a post written about it, with info etc.

    Thanks in advance!

  16. Drew Strojny

    Hi Evangelos!

    Glad to hear you are considering Photography. No, linking of individual photos to blog posts isn’t possible by default.

  17. Evangelos

    Would it be easy to be done by me, by editing some template file? I really like the theme, but I’d like to have that possibility too!

    Maybe you could do it for the next tutorial! :)

  18. Drew Strojny

    Believe it or not, it actually wouldn’t be very easy at all :( It would require some advanced customization of the theme.

  19. Evangelos

    oops, i wrote ” the custom caption could be an < a > < h5 > instead of just an < h 5 >” but the tags got translated! :)

  20. Drew Strojny

    You could add a link in the caption for the individual photos themselves, but the thumbnail caption wouldn’t work because it would need to be dynamic.

    Don’t hesitate to drop us an email if you have any more questions :) (info -at- thethemefoundry.com)

Comments are closed.