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:
1 add_filter('gettext', 'dbc_translate_gallery_image_count', 10, 3 ); 2 3 function dbc_translate_gallery_image_count($translated, $untranslated, $domain) { 4 if (!is_admin() && $domain === 'divi-booster') { 5 if ($untranslated === ' of ') { 6 $translated = ' de '; 7 } 8 } 9 return $translated; 10 }
Related Post: Adding PHP to the Divi Theme
Add a Gallery Module Image Count with PHP
You can use the following PHP code to add an image counter below the gallery:
1 add_filter('et_pb_gallery_shortcode_output', 'dbc_add_gallery_image_count'); 2 3 function dbc_add_gallery_image_count($output) { 4 if (is_string($output)) { 5 $total = substr_count($output, 'class="et_pb_gallery_item '); 6 $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>'; 7 $output = preg_replace('/<\/div>$/s', $counter.'</div>', $output); 8 } 9 return $output; 10 } 11 12 add_action('wp_footer', 'dbc_update_image_count'); 13 14 function dbc_update_image_count() { ?> 15 <script> 16 jQuery(function($) { 17 18 // Trigger counter refresh on first load 19 $('.et_pb_gallery').each(function() { 20 triggerSlideChanged($(this)); 21 }); 22 23 // Trigger counter refresh when the slide changes (due to arrow button clicked) 24 $(document).on('mouseup', '.et_pb_gallery .et-pb-slider-arrows a, .et_pb_gallery .et-pb-controllers a', function() { 25 var $gallery = $(this).closest('.et_pb_gallery'); 26 triggerSlideChanged($gallery); 27 }); 28 29 function triggerSlideChanged($gallery) { 30 $gallery.trigger('divi-booster:gallery-slide-changed'); 31 } 32 33 // Update the counter when the slide has changed 34 $(document).on('divi-booster:gallery-slide-changed', '.et_pb_gallery', function() { 35 var $gallery = $(this); 36 setTimeout(function() { 37 var currentIndex = $gallery.find('.et-pb-active-slide').index() + 1; 38 $gallery.find('.dbdb-slide-counter-active').text(currentIndex); 39 }, 50); 40 }); 41 42 }); 43 </script> 44 <style> 45 .dbdb-slide-counter { 46 position: absolute; 47 width: 100%; 48 } 49 50 .et_pb_gallery { 51 overflow: visible !important; 52 } 53 54 .et_pb_gallery_items { 55 overflow: hidden; 56 } 57 58 /* Fix divi gallery layout change on first slide change bug (as this causes the counter to jump too) */ 59 .et_pb_gallery .et_pb_gallery_item.et_slide_transition { 60 display: block !important; 61 } 62 </style> 63 <?php 64 }
Related Post: Adding PHP to the Divi Theme
Thanks again for this feature, it's really useful!
You’re welcome, Dylan :)