Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Display Image Captions Below Thumbnails

Share This Post!

By default, image captions are shown below the image thumbnails in a gallery only when you’re using the ‘Captioned’ theme with our Themes Addon.

  1. To display the captions below thumbnails on individual galleries add the following code to a new file at wp-content/plugins/envira-gallery-image-captions.php. You’ll need to adjust the $galleriesToShowCaptions option to include the Envira Gallery IDs you wish to show titles below images for.
    <?php
    /**
    * Plugin Name: Envira Gallery - Image Captions below Thumbnails
    * Plugin URI: http://enviragallery.com
    * Version: 1.0
    * Author: Tim Carr
    * Author URI: http://www.n7studios.co.uk
    * Description: Display captions below images
    */
    /**
    * Display image captions below thumbnails
    *
    * @param string	$output	Output HTML
    * @param int $id Image Attachment ID
    * @param array $item Image Data
    * @param array $data Gallery Data
    * @param int $i Image Count
    * @return string Output HTML
    */
    function envira_gallery_image_captions( $output, $id, $item, $data, $i ) {
    	
    	// IDs of galleries to display captions on
    	$galleriesToShowCaptions = array(
    		391,
    		392	
    	);
    	
    	// Check if we need to display captions on this gallery
    	if ( !in_array( $data['id'], $galleriesToShowCaptions ) ) {
    		return $output;
    	}
    	if ( isset( $item['caption'] )) {
    		$output .= '<span class="caption">' . $item['caption'] . '</span>';
    	}
    	return $output;
    	
    }
    add_action( 'envira_gallery_output_after_link', 'envira_gallery_image_captions', 10, 5 );
    
  2. Navigate to the WordPress admin > Plugins and activate the Envira Gallery – Image Captions below Thumbnails plugin.

Alternatively, you can use the following instead to display the caption below thumbnails in all galleries following the instructions above.

<?php
/**
* Plugin Name: Envira Gallery - Image Captions below Thumbnails
* Plugin URI: http://enviragallery.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Display captions below images
*/
/**
* Display image captions below thumbnails
*
* @param string	$output	Output HTML
* @param int $id Image Attachment ID
* @param array $item Image Data
* @param array $data Gallery Data
* @param int $i Image Count
* @return string Output HTML
*/
function envira_gallery_image_captions( $output, $id, $item, $data, $i ) {
	if ( isset( $item['caption'] )) {
		$output .= '<div class="caption">' . $item['caption'] . '</div>';
	}
	return $output;
	
}
add_action( 'envira_gallery_output_after_link', 'envira_gallery_image_captions', 10, 5 );

Envira Gallery How to Add Captions Below Thumbnails

Styling The Caption

Let’s add some styling to those captions to really make them pop. I’m going to add the following to my individual gallery’s Custom CSS field (using the CSS Addon):

#envira-gallery-35 .envira-gallery-item span.caption {
   padding: 20px 5px 30px;
   text-align: center;
   display: block;
}
.envira-gallery-item-inner .caption {
    white-space: pre-line;
    margin-top: 10px !important;
}

Now you can see the caption is more visually pleasing and provides some space between thumbnail images.

Envira Gallery Styled Caption Below Thumbnails

Share This Post!