Add an Image Count to the Gallery Module


The Divi Theme includes a gallery module which lets you display a slideshow of images in your posts. Here's how to add a '1 of N' image count below the gallery.

Add a Gallery Module Image Count with Divi Booster

Divi Booster adds an option to enable an image count on a gallery module, when the slider layout is active. You can activate it by setting:

Gallery Settings > Design > Layout > Layout = Slider

Gallery Settings > Content > Elements > Show Image Count = On

You should then see the image count displayed beneath your gallery:

It can be styled using the options at:

Gallery Settings > Design > Image Count Text

This option is available in Divi Booster 3.9.8 upwards.

Translating the Image Count Text

If you are using a language other than English, the "of" string is translatable. You should be able to supply your own translation with a plugin such as "WPML", or using the following PHP code:

add_filter('gettext', 'dbc_translate_gallery_image_count', 10, 3 );
function dbc_translate_gallery_image_count($translated, $untranslated, $domain) {
   if (!is_admin() && $domain === 'divi-booster') {
      if ($untranslated === 'of') {
		  $translated = 'de';
   return $translated;

Add a Gallery Module Image Count with PHP

You can use the following PHP code to add an image counter below the gallery:

add_filter('et_pb_gallery_shortcode_output', 'dbc_add_gallery_image_count');

function dbc_add_gallery_image_count($output) {
    $total = substr_count($output, 'class="et_pb_gallery_item ');
    $counter = '<div class="dbdb-slide-counter"><span class="dbdb-slide-counter-active">1</span> '.esc_html__('of', 'divi-booster').' <span class="dbdb-slide-counter-total">'.esc_html($total).'</span></div>';
    $output = preg_replace('/<\/div>$/s', $counter.'</div>', $output);
    return $output;

add_action('wp_footer', 'dbc_update_image_count');

function dbc_update_image_count() { ?>
    function update($gallery) {
            function($gallery) {
    $(document).on('mouseup', '.et_pb_gallery .et-pb-slider-arrows a, .et_pb_gallery .et-pb-controllers a', 
        function () {

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin


  1. Thanks again for this feature, it's really useful!

    • You’re welcome, Dylan :)


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.