If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
  • #26812

    I would like to insert a gallery and show the captions under each picture NOT just on the tooltips, which is where it is at the moment… Would be very appreciative if you could point me in the right direction.. This would save a lot of time creating tables, columns and inserting single images !

    I searched the forum and only saw one question which hinted at an upcoming update, but that was two months ago… thanks !


    Open up wp-contentthemesenfoldconfig-templatebuilderavia-shortcodesgallery.php and replace

    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";


    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /><span class='visible-caption'>{$caption}</span></a>";

    I guess you also need to add some custom style rules for the caption but it’s a starting point.


    Thanks for your time,

    I already did that as the code was the same as the post 2 months ago..

    sadly the caption still only appears as a tooltip.. nothing underneath it!

    What do you suggest ?


    Ah It gave me a place to start.. your code was a little out:

    <span class=’avia-gallery-caption>

    in place of :

    <span class=’visible-caption’>

    which is :

    $thumbs .= ” ".$alt."<span class=’avia-gallery-caption>{$caption}</span“;

    and the css class for this is:



    $thumbs .= " <a href='".$link[0]."' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /><span class='avia-gallery-caption>{$caption}</span</a>";

    The weird thing is that in 2 columns the captions appear on the sides of the image !-0



    Can you post a link to your 2 columns template please?

    Best regards,



    If the thumbnails are smaller than the total column width – the extra space is filled with other images and/or captions

    have created a sample page with same 300×300 px thumbnail size in different column widths




    There are two settings in the gallery , one asks if you want to give your gallery images a specific size, and another asks if you want you images to automatically adjust to the width of the column. Have you tried switching this setting (it is in same location prior to where you begin adding the images to the gallery )




    yep, still has the same problem albeit with slightly diff layout.



    This code will remove the captions that appear on the sides

    #top .visible-caption {
    display: none;

    You also need to create some rules about types of images that get uploaded. For example , never upload images that are less than 300px wide. So even if they are portraits, they need to be at least 300px wide and if bigger, they should get resized lower by the theme. You can change the setting using http://wordpress.org/plugins/simple-image-sizes/ this plugin in Settings > Media. Set width at 300px , no crop and set height at 9999. And as long as you upload image 300px and wider, you will be ok.




    perhaps you misunderstand.. I really have to have the captions.. but the text just to be aligned center under each thumbnail

    Most of the images are really huge and way over 300px – it does appear that the ones less than 300px are causing the problem ! I will try fixing the sizes and see where I go…

    help with the caption alignment would be great thanks !


    ok.. if you have a 800×800 picture.. insert as a 2 column gallery.. if you choose any size less than half of the width of the column.. so say 450px x 450px – the captions appear underneath.. if you choose 300px x 300px the captions appear on the right of the thumbnail.

    so 1. How to stop this and 2. how to center align the captions under the pic *not left justified..

    Thanks again I know how busy you are and appreciate the assistance


    still at a loss for aligning text to center underneath the image.. I understand about the image sizes, but is there a way to force the caption underneat the image, no matter the size -AND to make sure it is centered not left justified.




    From what I see, your text captions are identical to the tooltips. So you want the text to show up static under each image, and then to have the identical text popup in a tooltip on hover on top of the image?

    Please try changing the code you pasted above

    $thumbs .= " <a href='".$link[0]."' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /><span class='avia-gallery-caption>{$caption}</span</a>";

    to look like

    $thumbs .= " <a href='".$link[0]."' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /><br /><span class='avia-gallery-caption>{$caption}</span</a>";




    I have implemented your code… Sadly this doesnt actually change the layout from the code I pasted,,

    the text is not always aligned underneath the thumb nor is it centered when it is underneath -(

    as per: http://goo.gl/3ww04b



    I have a feeling you made some edit to the template files that is messing up the entire page. Because I took 3 of your photos and made a gallery with them. I am not seeing the problems you are experiencing. and everything looks nice and neat as you can see http://i.imgur.com/EvnraaY.jpg

    Try this css to center the text

    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
    text-align: center;
    #top div .avia-gallery {
    text-align: center;

    Now try this

    .avia-gallery-thumb {
    margin: 0 auto;
    width: 591px;

    #top div .avia-gallery img {
    width: 100%;
    float: left;
    #top .avia-gallery .avia-gallery-thumb a {
    float: right;

    With this css, I got your page to look like this http://i.imgur.com/A6yYN84.jpg .

    Also please try to use images with a consistent height as the thumbnail, people can click on that image and see the full version.




    updated to 1.9.1 without the original mod and the captions are the same.. the layout code for thumbs has now changed to:

    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";

    how can I add the forced alignment etc here?


    I pasted a minute before you, please implement the changes above.


    YES !!!! thanks so much… it works !! thankyouthankyouthankyou :-) I really really needed this.. thanks again !

    im already on making the pics standardises min width ..


    it has issues with scaling the page down as the columns get lopped off.. but I can live with that


    actually no I cant.. some of the thumbs get chopped off.. is there any way to set width:auto instead of 591px and still have the alignment?

    The issue being that fix was in place to stop thumbs resizing bigger than you want according to the column page…

    btw I made no template adjustments.. the test page showed the column layout in adv builder.. also you are cropping the image thumbs on your first pic !



    Sure I am cropping, but can just as easily set height at 300px and set width at 9999px , so that the aspect ratio remains the same and nothing gets cropped. By definition thumbnails are usually all of similar size. Go to amazon.com and look how they deal with displaying thumbnails of flag poles (vertical) and happy birthday banners (horizontal).

    The margin in my previous code is what centers them margin 0 auto; but it needs a definitive width to work, you are welcome to play around with it. perhaps try using em instead of px since thats more scalable regarding screen size.

    The way css issues are solved is via Google Chrome Developer Tools. I suggest you watch some youtube videos on how to use those tools built into the Chrome browser, since almost every answer can be found there.

    The css code I provided was the base css code, now you need to add some media queries based on this code and change the pixel width in each one probably. There is a problem with some of your galleries, the lower two, since they remain dim until the end of the page is reached, and that’s when they come alive.

    I made some for you but you need to adjust them. At higher screen sizes the first block behaves badly, and probably may need some separate code in order to drop the width of the two empty columns

    In original code you can try changing 591 to 691, its fine with all other blocks except first one (1/3 1/3 1/3).

    between 990 to 1139px

    @media only screen and (min-width: 990px) and (max-width: 1139px) {
    .avia-gallery-thumb {
    between 768 to 989px

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .avia-gallery-thumb {

    between 480 to 767px

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .avia-gallery-thumb {

    smaller than 480px

    @media only screen and (max-width: 479px) {
    .avia-gallery-thumb {




    hey Nick, how can I achieve the same thing without making the gallery reversed !!

    as per http://www.kriesi.at/support/topic/gallery-image-order-ignored



    You can always use the http://wordpress.org/plugins/post-types-order/ plugin to put them in whatever order you want.




    Nick.. I do appreciate your help.. perhaps you misunderstand me. your code provided above causes the gallery animation to reverse (right to left) and also the gallery items to reorder right to left. Changing the float from right to left makes the gallery anim correct but the gallery order still backwards.

    I cant see how adding another plugin will fix this problem.


    Hi mrkuji,

    Please re-post which page you are having issues with. This topic is a bit too long to follow and figure out where you were and what the issue still is.



Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘How to add captions to gallery thumbs’ is closed to new replies.