Sorting the Divi Gallery Module Images

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

The Divi Theme's gallery module lets you display a grid of images in your posts. Here's how to control the order in which the images appear.

Set the Default Order in the Divi Gallery Settings

By default Divi will display the images in the order that they are added to the gallery. This might be enough for you to get the order you wish. You can just add the images one at a time to the gallery in the order you want them to display. Note that you can add multiple images at once and they will be added to the gallery in the order they appear in the media library – i.e. the most recently uploaded image will appear earliest in the gallery.

Sorting the Gallery Image Modules by Drag and Drop

The Divi gallery module has a handy, though not very obvious, feature for re-ordering the images in the gallery module. You can simply drag and drop them into the order you wish them to display, like so:

Displaying the Gallery Module Images in a Random Order

To have the gallery images shown in a random order each time the page is displayed, you can simply set the following Divi option:

Gallery Settings > Content > Images > Image Order = Random

Displaying the Gallery Module Images Alphabetically

If you'd like to have the images in your gallery modules automatically sorted alphabetically, by the title set in the media library, you can use the following PHP code:

add_filter('et_pb_module_shortcode_attributes', 'dbcf_sort_gallery_by_name', 10, 3);
add_filter('et_module_shortcode_output', 'dbcf_clear_gallery_sorting');

if (!function_exists('dbcf_sort_gallery_by_name')) {
	function dbcf_sort_gallery_by_name($props, $atts, $slug) {
		if ($slug === 'et_pb_gallery') {
			add_action('pre_get_posts', 'dbcf_gallery_orderby_title');
		}
		return $props;
	}
}

if (!function_exists('dbcf_clear_gallery_sorting')) {
	function dbcf_clear_gallery_sorting($content) {
		remove_action('pre_get_posts', 'dbcf_gallery_orderby_title');
		return $content;
	}
}

if (!function_exists('dbcf_gallery_orderby_title')) {
	function dbcf_gallery_orderby_title($query) {	
		$query->set('orderby', 'title');
	}
}

Sorting the Gallery Module Images by Filename

If you wish to sort your images by filename, this Stack Overflow post offers some options.

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

7 Comments

  1. HI, I am not seeing this work. I posted a different comment earlier but it appears to be gone.

    Here is my child theme with your code in it… What did i do wrong?

    /*
    Theme Name: Divi Child
    Theme URI: http://elegantthemes.com/
    Description: Divi Child Theme
    Author: ElegantThemes
    Author URI: http://elegantthemes.com
    Template: Divi
    Version: 0.1.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
    Text Domain: divi-child-theme
    */

    /* ==== Add your own styles below this line ====
    * ——————————————– */
    /*
    add_filter('et_pb_module_shortcode_attributes', 'dbcf_sort_gallery_by_name', 10, 3);
    add_filter('et_module_shortcode_output', 'dbcf_clear_gallery_sorting');

    if (!function_exists('dbcf_sort_gallery_by_name')) {
    function dbcf_sort_gallery_by_name($props, $atts, $slug) {
    if ($slug === 'et_pb_gallery') {
    add_action('pre_get_posts', 'dbcf_gallery_orderby_title');
    }
    return $props;
    }
    }

    if (!function_exists('dbcf_clear_gallery_sorting')) {
    function dbcf_clear_gallery_sorting($content) {
    remove_action('pre_get_posts', 'dbcf_gallery_orderby_title');
    return $content;
    }
    }

    if (!function_exists('dbcf_gallery_orderby_title')) {
    function dbcf_gallery_orderby_title($query) {
    $query->set('orderby', 'title');
    }
    }
    */

    Reply
    • Hi John, your earlier comment is still there, awaiting moderation (though I'll delete it in a moment since it's basically the same as this one). The issue is that you're placing PHP code in a file meant for CSS code (style.css). You need to instead place the code in your child theme's functions.php file (if there isn't already one in the main folder of your child theme, create a blank file named functions.php and start it with a line that reads "<?php" – no quotes – to put it into PHP mode).

      Reply
      • Thanks Dan! I literally JUST saw the options for the functions tab on the right side of the screen and went "A-HA" and came back here to grab the code again.
        Works like a charm, thank you!!!!!!!

        Reply
        • Great! Glad you got it working, John 🙂

          Reply
  2. Hi, thanks for this post. Can you reverse the order for alphabetical ordering?

    Reply
    • Never mind! I realized I just needed to add ASC to the function.

      if (!function_exists('dbcf_gallery_orderby_title')) {
      function dbcf_gallery_orderby_title($query) {
      $query->set('orderby', 'title', ASC);
      }
      }

      Reply
      • Great! I'm glad you figured it out Justin and thanks for sharing 🙂

        Reply

Submit a Comment

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