Sorting the Divi Gallery Module Images

|

 The Divi Theme includes a gallery module which 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:

Sort 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

Sort the Gallery Images in Reverse with Divi Booster

Divi Booster adds additional image orders to the gallery module, including the option to automatically reverse sort the gallery module images. With Divi Booster installed, select:

Gallery Settings > Content > Images > Image Order = Reverse

 This puts the images in the reverse of the standard "Default" order.

This option is available in Divi Booster 3.7.4 upwards.

Sort the Gallery Images by ID with Divi Booster

Divi Booster adds additional image orders to the gallery module, including the option to automatically sort the gallery module images by ID. With Divi Booster installed, select:

Gallery Settings > Content > Images > Image Order = By ID

This orders images by the ID they were assigned when uploaded to WordPress. In effect this displays the images uploaded the longest ago first.

This option is available in Divi Booster 3.7.4 upwards.

Sort the Gallery Images by ID (Reverse) with Divi Booster

 Divi Booster adds additional image orders to the gallery module, including the option to automatically sort the gallery module images by reverse ID. With Divi Booster installed, select:

Gallery Settings > Content > Images > Image Order = By ID (Reverse)

This orders images by the reverse of the ID they were assigned when uploaded, or most recently uploaded images first.

This option is available in Divi Booster 3.7.4 upwards

Sort the Gallery Images Alphabetically with Divi Booster

Divi Booster adds additional image orders to the gallery module, including the option to automatically sort the gallery module images alphabetically, by their title in the media library. With Divi Booster installed, select:

Gallery Settings > Content > Images > Image Order = Alphabetical

 This option is available in Divi Booster 3.9.3 upwards.

Sort the Gallery Images Reverse Alphabetically with Divi Booster

Divi Booster adds additional image orders to the gallery module, including the option to automatically sort the gallery module images reverse alphabetically, by their title in the media library. With Divi Booster installed, select:

Gallery Settings > Content > Images > Image Order = Alphabetical (Reverse)

 This option is available in Divi Booster 3.9.3 upwards.

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 (isset($_GET['et_fb'])) { return $props; }
		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.

Displaying the Gallery Module Images in Reverse via PHP

The following PHP code can be used to reverse the default order of the images. This can be useful if you want to display the most recently added images first in the gallery, but don't want to have to drag and drop them in the module settings to achieve this:

add_filter('et_pb_module_shortcode_attributes', 'db_reverse_gallery_ids', 10, 3);

function db_reverse_gallery_ids($props, $attrs, $render_slug) {
    if (isset($_GET['et_fb'])) { return $props; }
    if ($render_slug !== 'et_pb_gallery' || empty($props['gallery_ids'])) { 
        return $props; 
    }
    $props['gallery_ids'] = implode(',', array_reverse(explode(',', $props['gallery_ids'])));
    return $props;
}

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

Divi Booster

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

18 Comments

  1. The PHP for reverse ordering works well, but would there be any way of being able to do this, and any other sort options, on an individual gallery basis rather than site-wide?

    Reply
    • Hey Les, I've just added a reverse sort option (and ID-based sort options) to Divi Booster (v3.7.4) that can be applied on to individual gallery modules. I hope they help!

      Reply
  2. Hi, i added the code as shown in a snippet plugin. But somehow when i add a new photo to the divi gallery this one is on top, but the last photo before the new photo is then down again. How can i fix this?

    Reply
    • Hey Martijn, I've just send you through an email. If you're able to send me through a couple of screenshots in reply to that to help me understand the issue better that would be much appreciated. Thanks!

      Reply
    • The problem it's because when you edit the gallery the code is loading too. So it reverse the reverse function :)

      You need to disable the code before adding new images and then enable it again. Not really a fluid solution

      Reply
      • Hey Seb, nice catch! I've added a check to the code to stop it running in the visual builder. That should stop the gallery image order from getting messed up in the module settings. Note that it also means the reverse effect won't show in the visual builder preview – you'll need to view the final page to see it in action. I've got a fix for that will be in the next version of Divi Booster, and I'll try to add it to the code here soon. Thanks again!

        Reply
  3. Is there any way to show the latest images on the top side instead of the bottom?

    Reply
    • Hey Judith, am I right in understanding that you basically want the gallery images to be shown in reverse order – so that when you add a new image in the gallery module settings it'll show up first in the gallery, rather than last? If so, I've just added a new section to the end of the post with the PHP code for doing so. If I've misunderstood, or you have any trouble getting the code to work, just let me know. Thanks!

      Reply
      • Just to add this… I've now added added reverse gallery sorting as an option in Divi Booster. I've update the post above with the details.

        Reply
  4. 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
  5. 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
      • This didn't work for me. Came up with this error

        ParseError thrown

        syntax error, unexpected 'ASC' (T_STRING), expecting ')'

        Here is the code I used.

        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' ASC);
        }
        }

        Reply
        • Hi David,

          This line looks wrong:

          query->set('orderby', 'title' ASC);

          Try replacing it with:

          query->set('orderby', 'title');
          $query->set('order', 'ASC');

          Let me know if you're still having problems after that. Cheers!

          Reply

Submit a Comment

Your email address will not be published.