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.

Enabling the Image Counter

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.

Changing the image count separator

By default, the image counter displays in a "1 of 4" format. You can change the separator " of ", using this option:

Gallery Settings > Content > Elements > Count Separator

For example, setting this to "/" will make the count display as "1/4" instead of "1 of 4".

This option is available in Divi Booster 4.4.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) {
	if (is_string($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() { ?>
<script>
        jQuery(function($) {

            // Trigger counter refresh on first load
            $('.et_pb_gallery').each(function() {
                triggerSlideChanged($(this));
            });

            // Trigger counter refresh when the slide changes (due to arrow button clicked)
            $(document).on('mouseup', '.et_pb_gallery .et-pb-slider-arrows a, .et_pb_gallery .et-pb-controllers a', function() {
                var $gallery = $(this).closest('.et_pb_gallery');
                triggerSlideChanged($gallery);
            });

            function triggerSlideChanged($gallery) {
                $gallery.trigger('divi-booster:gallery-slide-changed');
            }

            // Update the counter when the slide has changed
            $(document).on('divi-booster:gallery-slide-changed', '.et_pb_gallery', function() {
                var $gallery = $(this);
                setTimeout(function() {
                    var currentIndex = $gallery.find('.et-pb-active-slide').index() + 1;
                    $gallery.find('.dbdb-slide-counter-active').text(currentIndex);
                }, 50);
            });

        });
    </script>
    <style>
        .dbdb-slide-counter {
            position: absolute;
            width: 100%;
        }

        .et_pb_gallery {
            overflow: visible !important;
        }

        .et_pb_gallery_items {
            overflow: hidden;
        }

        /* Fix divi gallery layout change on first slide change bug (as this causes the counter to jump too) */
        .et_pb_gallery .et_pb_gallery_item.et_slide_transition {
            display: block !important;
        }
    </style>
<?php
}

Get Divi Booster Today!

The original and best Divi plugin.
Adds hundreds of new options to Divi.

2 Comments

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

    Reply
    • You’re welcome, Dylan :)

      Reply

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 *.