Add an Image Count to the Gallery Module

Written by Dan Mossop

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
}

Check out Divi Gallery Booster

Enhance your Divi gallery modules with more styling options using Divi Gallery Booster. Perfect for adding features like image counts and dazzling visuals, Divi Gallery Booster saves time and impresses visitors.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

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

We may earn a commission when you visit links on our website.

Latest Posts

Fade a Divi Image Module Edge into the Background

Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...

Hide the Header and Footer in the Hello Elementor Theme

Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...

Setting up the Divi Password Box Module

Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Set Hover Color for Menu Links in the Divi Menu Module

Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...

Random Posts