How to add captions to gallery thumbs

Hi,

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 )

Thanks,

Nick

Hi,

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.

Thanks,

Nick

Hi,

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>";

Thanks,

Nick

Hi,

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.

Thanks,

Nick

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

Hi,

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 {

width:621px;

}

}

/*

between 768 to 989px

*/



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

.avia-gallery-thumb {

width:408px;

}

}



/*

between 480 to 767px

*/



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

.avia-gallery-thumb {

width:428px;

}

}



/*

smaller than 480px

*/



@media only screen and (max-width: 479px) {

.avia-gallery-thumb {

width:268px;

}

}

Thanks,

Nick

Hi,

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

Thanks,

Nick

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.

Regards,

Devin