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;
}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:
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($){
function update($gallery) {
setTimeout(
function($gallery) {
$gallery.find('.dbdb-slide-counter-active').text($gallery.find('.et-pb-active-slide').index()+1);
},
50,
$gallery
);
}
update($('.et_pb_gallery'));
$(document).on('mouseup', '.et_pb_gallery .et-pb-slider-arrows a, .et_pb_gallery .et-pb-controllers a',
function () {
update($(this).closest('.et_pb_gallery'));
}
);
});
</script>
<?php
}Related Post: Adding PHP to the Divi Theme
Thanks again for this feature, it's really useful!
You’re welcome, Dylan :)