Software Developer

Equal Heights For WordPress Image Gallery Captions

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');

See more:

By

We've 6 Responses

    • 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; }

      avatar
        • 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.

          avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]