This gives your WordPress image captions equal heights on a gallery page. The text captions will take the height of the tallest caption on the page.
This applies to the “gallery-caption” element, not to the entire “gallery-item” element. This is useful if you added a background color for your “gallery-caption” or “wp-caption-text“. Captions with a background color in a gallery may look better if they are the same height.
This uses jQuery, so you must include jQuery for this to work. Instead of using wp_enqueue_script to load a small external .js file, this loads the JavaScript inline into wp_head. This is recommended for faster page speed.
/**
* Make the WP image gallery captions have equal heights on a gallery page.
*/
function isa_equalheight_gallery_captions() {
?><script>(function(jQuery){jQuery.fn.equalHeights=function(minHeight,maxHeight){tallest=(minHeight)?minHeight:0;this.each(function(){if(jQuery(this).height()>tallest){tallest=jQuery(this).height()}});if((maxHeight)&&tallest>maxHeight)tallest=maxHeight;return this.each(function(){jQuery(this).height(tallest)})}})(jQuery)
jQuery(window).load(function(){
if(jQuery('.gallery-caption').length){
jQuery('.gallery-caption').equalHeights()}
})</script><?php
}
add_action('wp_head','isa_equalheight_gallery_captions');
Frank
November 15th, 2014 at 1:38 pm
Hi, I am using your awesome widget to display attributes in the shop page, see http://www.abel.tax/benchmark-searches/shop/. As you see I have a height issue similar to what you describe above. I would like the prices / add to cart buttons to be aligned per row. Do you know a fix for this?
Isabel
November 16th, 2014 at 2:43 pm
They look aligned on your shop page. But to be sure that they remain aligned, you can use the function above, but change ‘.gallery-caption’ on lines 8 and 9 to ‘.custom-attributes’. Also, for this to work, you will have to add this CSS:
.custom-attributes{ display:block; }Frank
November 16th, 2014 at 3:03 pm
Yeah I changed the attributes to align the page…. Thanks for your response, where would I put this function?
Isabel
November 16th, 2014 at 3:31 pm
It could go in your theme’s functions.php file. However, if you update your theme, the change will be overridden. I see that you’re using the Canvas theme. You can create a child theme and place the code in the child’s functions.php where it will remain even after updates.
However, the line of CSS that I pasted above is not part of the function. Since you’re using a WooCommerce theme, you should be able to add the CSS into the Custom CSS area in your Canvas Theme Options. Hope that helps.
Frank
November 17th, 2014 at 1:01 am
Yes that worked (http://www.abel.tax/benchmark-searches/shop/)! Thank you so much!
Nils
September 24th, 2017 at 9:49 pm
Worked great! Thank you very much!