0

Hope someone could help me with this one! I've already asked for their support but "it goes beyond their support level" and they even adviced me to ask it here..

So I'm using the Divi image gallery for my wordpress catalog, which contains lots of images. Now I'm looking for a way that the images in the gallery are standard sorted by filename.

Any guidelines how to do change this in their code? Thanks a lot!!

2 Answers 2

1

File names for attachments are stored in the 'post_name' column of the posts table. Therefore, this simple change should do the trick.

The simple answer to your question is:

  • Locate the file divi/includes/builder/main-modules.php
  • Search for function get_galleryin the file
  • From there, scroll down slightly to find $attachments_args
  • Change 'orderby' => 'post__in' to 'orderby' => 'post_name'

The bad news...

Making a change to main-modules.php means either you can no longer do updates or when you do update you'll have to apply the hack again.

1
  • Wow Michael, thanks for the support! I will try this as soon as possible! Isn't it possible to get this custom code on a child theme, so it won't get changed when updating the theme? (I'm also using another childtheme in Divi for functions.php) Thanks again!
    – Jokke86
    Feb 14, 2017 at 16:40
0

Michael is right BUT:

The good news

You you can insert it into your Child Theme and everything is save

The better answer to your question is:

  • Locate the file divi/includes/builder/main-modules.php
  • Copy the ET_Builder_Module_Gallery
  • Insert into your functions.php, wrap and modify like Michael said

Complete code for this

function divi_child_theme_setup() {

    if ( class_exists('ET_Builder_Module')) {

        class CHILD_ET_Builder_Module_Gallery extends ET_Builder_Module {
            function init() {
                $this->name       = esc_html__( 'Gallery', 'et_builder' );
                $this->slug       = 'et_pb_gallery';
                $this->fb_support = true;

                $this->whitelisted_fields = array(
                    'src',
                    'gallery_ids',
                    'gallery_orderby',
                    'fullwidth',
                    'posts_number',
                    'show_title_and_caption',
                    'show_pagination',
                    'background_layout',
                    'auto',
                    'auto_speed',
                    'admin_label',
                    'module_id',
                    'module_class',
                    'zoom_icon_color',
                    'hover_overlay_color',
                    'hover_icon',
                    'orientation',
                );

                $this->fields_defaults = array(
                    'fullwidth'              => array( 'off' ),
                    'posts_number'           => array( 4, 'add_default_setting' ),
                    'show_title_and_caption' => array( 'on' ),
                    'show_pagination'        => array( 'on' ),
                    'background_layout'      => array( 'light' ),
                    'auto'                   => array( 'off' ),
                    'auto_speed'             => array( '7000' ),
                    'orientation'            => array( 'landscape' ),
                );

                $this->options_toggles = array(
                    'general'  => array(
                        'toggles' => array(
                            'main_content' => esc_html__( 'Images', 'et_builder' ),
                            'elements'     => esc_html__( 'Elements', 'et_builder' ),
                        ),
                    ),
                    'advanced' => array(
                        'toggles' => array(
                            'layout'  => esc_html__( 'Layout', 'et_builder' ),
                            'overlay' => esc_html__( 'Overlay', 'et_builder' ),
                            'text'    => array(
                                'title'    => esc_html__( 'Text', 'et_builder' ),
                                'priority' => 49,
                            ),
                        ),
                    ),
                    'custom_css' => array(
                        'toggles' => array(
                            'animation' => array(
                                'title'    => esc_html__( 'Animation', 'et_builder' ),
                                'priority' => 90,
                            ),
                        ),
                    ),
                );

                $this->main_css_element = '%%order_class%%.et_pb_gallery';
                $this->advanced_options = array(
                    'fonts' => array(
                        'title'   => array(
                            'label'    => esc_html__( 'Title', 'et_builder' ),
                            'css'      => array(
                                'main' => "{$this->main_css_element} .et_pb_gallery_title",
                            ),
                        ),
                        'caption' => array(
                            'label'    => esc_html__( 'Caption', 'et_builder' ),
                            'use_all_caps' => true,
                            'css'      => array(
                                'main' => "{$this->main_css_element} .mfp-title, {$this->main_css_element} .et_pb_gallery_caption",
                            ),
                            'line_height' => array(
                                'range_settings' => array(
                                    'min'  => '1',
                                    'max'  => '100',
                                    'step' => '1',
                                ),
                            ),
                            'depends_show_if'   => 'off'
                        ),
                    ),
                    'border' => array(
                        'css' => array(
                            'main' => "{$this->main_css_element} .et_pb_gallery_item",
                        ),
                    ),
                );

                $this->custom_css_options = array(
                    'gallery_item' => array(
                        'label'       => esc_html__( 'Gallery Item', 'et_builder' ),
                        'selector'    => '.et_pb_gallery_item',
                    ),
                    'overlay' => array(
                        'label'       => esc_html__( 'Overlay', 'et_builder' ),
                        'selector'    => '.et_overlay',
                    ),
                    'overlay_icon' => array(
                        'label'       => esc_html__( 'Overlay Icon', 'et_builder' ),
                        'selector'    => '.et_overlay:before',
                    ),
                    'gallery_item_title' => array(
                        'label'       => esc_html__( 'Gallery Item Title', 'et_builder' ),
                        'selector'    => '.et_pb_gallery_title',
                    ),
                    'gallery_item_caption' => array(
                        'label'       => esc_html__( 'Gallery Item Caption', 'et_builder' ),
                        'selector'    => '.et_pb_gallery_caption',
                    ),
                    'gallery_pagination' => array(
                        'label'       => esc_html__( 'Gallery Pagination', 'et_builder' ),
                        'selector'    => '.et_pb_gallery_pagination',
                    ),
                    'gallery_pagination_active' => array(
                        'label'       => esc_html__( 'Pagination Active Page', 'et_builder' ),
                        'selector'    => '.et_pb_gallery_pagination a.active',
                    ),
                );
            }

            function get_fields() {
                $fields = array(
                    'src' => array(
                        'label'           => esc_html__( 'Gallery Images', 'et_builder' ),
                        'renderer'        => 'et_builder_get_gallery_settings',
                        'option_category' => 'basic_option',
                        'overwrite'       => array(
                            'ids'         => 'gallery_ids',
                            'orderby'     => 'gallery_orderby',
                        ),
                        'toggle_slug'     => 'main_content',
                    ),
                    'gallery_ids' => array(
                        'type'  => 'hidden',
                        'class' => array( 'et-pb-gallery-ids-field' ),
                        'computed_affects'   => array(
                            '__gallery',
                        ),
                    ),
                    'gallery_orderby' => array(
                        'label' => esc_html__( 'Gallery Images', 'et_builder' ),
                        'type'  => 'hidden',
                        'class' => array( 'et-pb-gallery-ids-field' ),
                        'computed_affects'   => array(
                            '__gallery',
                        ),
                        'toggle_slug' => 'main_content',
                    ),
                    'fullwidth' => array(
                        'label'             => esc_html__( 'Layout', 'et_builder' ),
                        'type'              => 'select',
                        'option_category'   => 'layout',
                        'options'           => array(
                            'off' => esc_html__( 'Grid', 'et_builder' ),
                            'on'  => esc_html__( 'Slider', 'et_builder' ),
                        ),
                        'description'       => esc_html__( 'Toggle between the various blog layout types.', 'et_builder' ),
                        'affects'           => array(
                            'zoom_icon_color',
                            'caption_font',
                            'caption_text_color',
                            'caption_line_height',
                            'caption_font_size',
                            'caption_all_caps',
                            'caption_letter_spacing',
                            'hover_overlay_color',
                            'auto',
                            'posts_number',
                            'show_title_and_caption',
                            'orientation'
                        ),
                        'computed_affects'   => array(
                            '__gallery',
                        ),
                        'tab_slug'    => 'advanced',
                        'toggle_slug' => 'layout',
                    ),
                    'posts_number' => array(
                        'label'             => esc_html__( 'Images Number', 'et_builder' ),
                        'type'              => 'text',
                        'option_category'   => 'configuration',
                        'description'       => esc_html__( 'Define the number of images that should be displayed per page.', 'et_builder' ),
                        'depends_show_if'   => 'off',
                        'toggle_slug'       => 'main_content',
                    ),
                    'orientation'            => array(
                        'label'              => esc_html__( 'Thumbnail Orientation', 'et_builder' ),
                        'type'               => 'select',
                        'options_category'   => 'configuration',
                        'options'            => array(
                            'landscape' => esc_html__( 'Landscape', 'et_builder' ),
                            'portrait'  => esc_html__( 'Portrait', 'et_builder' )
                        ),
                        'description'        => sprintf(
                            '%1$s<br><small><em><strong>%2$s:</strong> %3$s <a href="//wordpress.org/plugins/force-regenerate-thumbnails" target="_blank">%4$s</a>.</em></small>',
                            esc_html__( 'Choose the orientation of the gallery thumbnails.', 'et_builder' ),
                            esc_html__( 'Note', 'et_builder' ),
                            esc_html__( 'If this option appears to have no effect, you might need to', 'et_builder' ),
                            esc_html__( 'regenerate your thumbnails', 'et_builder')
                        ),
                        'depends_show_if'    => 'off',
                        'computed_affects'   => array(
                            '__gallery',
                        ),
                        'tab_slug'           => 'advanced',
                        'toggle_slug'        => 'layout',
                    ),
                    'show_title_and_caption' => array(
                        'label'              => esc_html__( 'Show Title and Caption', 'et_builder' ),
                        'type'               => 'yes_no_button',
                        'option_category'    => 'configuration',
                        'options'            => array(
                            'on'  => esc_html__( 'Yes', 'et_builder' ),
                            'off' => esc_html__( 'No', 'et_builder' ),
                        ),
                        'description'        => esc_html__( 'Whether or not to show the title and caption for images (if available).', 'et_builder' ),
                        'depends_show_if'    => 'off',
                        'toggle_slug'        => 'elements',
                    ),
                    'show_pagination' => array(
                        'label'             => esc_html__( 'Show Pagination', 'et_builder' ),
                        'type'              => 'yes_no_button',
                        'option_category'   => 'configuration',
                        'options'           => array(
                            'on'  => esc_html__( 'Yes', 'et_builder' ),
                            'off' => esc_html__( 'No', 'et_builder' ),
                        ),
                        'toggle_slug'        => 'elements',
                        'description'        => esc_html__( 'Enable or disable pagination for this feed.', 'et_builder' ),
                    ),
                    'background_layout' => array(
                        'label'             => esc_html__( 'Text Color', 'et_builder' ),
                        'type'              => 'select',
                        'option_category'   => 'color_option',
                        'options'           => array(
                            'light'  => esc_html__( 'Dark', 'et_builder' ),
                            'dark' => esc_html__( 'Light', 'et_builder' ),
                        ),
                        'tab_slug'          => 'advanced',
                        'toggle_slug'       => 'text',
                        'description'       => esc_html__( 'Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.', 'et_builder' ),
                    ),
                    'auto' => array(
                        'label'           => esc_html__( 'Automatic Animation', 'et_builder' ),
                        'type'            => 'yes_no_button',
                        'option_category' => 'configuration',
                        'options'         => array(
                            'off' => esc_html__( 'Off', 'et_builder' ),
                            'on'  => esc_html__( 'On', 'et_builder' ),
                        ),
                        'affects' => array(
                            'auto_speed',
                        ),
                        'depends_show_if'   => 'on',
                        'depends_to'        => array(
                            'fullwidth',
                        ),
                        'tab_slug'          => 'custom_css',
                        'toggle_slug'       => 'animation',
                        'description'       => esc_html__( 'If you would like the slider to slide automatically, without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.', 'et_builder' ),
                    ),
                    'auto_speed' => array(
                        'label'             => esc_html__( 'Automatic Animation Speed (in ms)', 'et_builder' ),
                        'type'              => 'text',
                        'option_category'   => 'configuration',
                        'depends_default'   => true,
                        'tab_slug'          => 'custom_css',
                        'toggle_slug'       => 'animation',
                        'description'       => esc_html__( "Here you can designate how fast the slider fades between each slide, if 'Automatic Animation' option is enabled above. The higher the number the longer the pause between each rotation.", 'et_builder' ),
                    ),
                    'zoom_icon_color' => array(
                        'label'             => esc_html__( 'Zoom Icon Color', 'et_builder' ),
                        'type'              => 'color-alpha',
                        'custom_color'      => true,
                        'depends_show_if'   => 'off',
                        'tab_slug'          => 'advanced',
                        'toggle_slug'       => 'overlay',
                    ),
                    'hover_overlay_color' => array(
                        'label'             => esc_html__( 'Hover Overlay Color', 'et_builder' ),
                        'type'              => 'color-alpha',
                        'custom_color'      => true,
                        'depends_show_if'   => 'off',
                        'tab_slug'          => 'advanced',
                        'toggle_slug'       => 'overlay',
                    ),
                    'hover_icon' => array(
                        'label'               => esc_html__( 'Hover Icon Picker', 'et_builder' ),
                        'type'                => 'text',
                        'option_category'     => 'configuration',
                        'class'               => array( 'et-pb-font-icon' ),
                        'renderer'            => 'et_pb_get_font_icon_list',
                        'renderer_with_field' => true,
                        'tab_slug'            => 'advanced',
                        'toggle_slug'         => 'overlay',
                    ),
                    'disabled_on' => array(
                        'label'           => esc_html__( 'Disable on', 'et_builder' ),
                        'type'            => 'multiple_checkboxes',
                        'options'         => array(
                            'phone'   => esc_html__( 'Phone', 'et_builder' ),
                            'tablet'  => esc_html__( 'Tablet', 'et_builder' ),
                            'desktop' => esc_html__( 'Desktop', 'et_builder' ),
                        ),
                        'additional_att'  => 'disable_on',
                        'option_category' => 'configuration',
                        'description'     => esc_html__( 'This will disable the module on selected devices', 'et_builder' ),
                        'tab_slug'        => 'custom_css',
                        'toggle_slug'     => 'visibility',
                    ),
                    'admin_label' => array(
                        'label'       => esc_html__( 'Admin Label', 'et_builder' ),
                        'type'        => 'text',
                        'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ),
                        'toggle_slug' => 'admin_label',
                    ),
                    'module_id' => array(
                        'label'           => esc_html__( 'CSS ID', 'et_builder' ),
                        'type'            => 'text',
                        'option_category' => 'configuration',
                        'tab_slug'        => 'custom_css',
                        'toggle_slug'     => 'classes',
                        'option_class'    => 'et_pb_custom_css_regular',
                    ),
                    'module_class' => array(
                        'label'           => esc_html__( 'CSS Class', 'et_builder' ),
                        'type'            => 'text',
                        'option_category' => 'configuration',
                        'tab_slug'        => 'custom_css',
                        'toggle_slug'     => 'classes',
                        'option_class'    => 'et_pb_custom_css_regular',
                    ),
                    '__gallery' => array(
                        'type' => 'computed',
                        'computed_callback' => array( 'ET_Builder_Module_Gallery', 'get_gallery' ),
                        'computed_depends_on' => array(
                            'gallery_ids',
                            'gallery_orderby',
                            'fullwidth',
                            'orientation',
                        ),
                    ),
                );

                return $fields;
            }

            /**
             * Get attachment data for gallery module
             *
             * @param array $args {
             *     Gallery Options
             *
             *     @type array  $gallery_ids     Attachment Ids of images to be included in gallery.
             *     @type string $gallery_orderby `orderby` arg for query. Optional.
             *     @type string $fullwidth       on|off to determine grid / slider layout
             *     @type string $orientation     Orientation of thumbnails (landscape|portrait).
             * }
             * @param array $conditional_tags
             * @param array $current_page
             *
             * @return array Attachments data
             */
            static function get_gallery( $args = array(), $conditional_tags = array(), $current_page = array() ) {
                $attachments = array();

                $defaults = array(
                    'gallery_ids'     => array(),
                    'gallery_orderby' => '',
                    'fullwidth'       => 'off',
                    'orientation'     => 'landscape',
                );

                $args = wp_parse_args( $args, $defaults );

                $attachments_args = array(
                    'include'        => $args['gallery_ids'],
                    'post_status'    => 'inherit',
                    'post_type'      => 'attachment',
                    'post_mime_type' => 'image',
                    'order'          => 'ASC',
                    'orderby'        => 'post_name',
                );

                if ( 'rand' === $args['gallery_orderby'] ) {
                    $attachments_args['orderby'] = 'rand';
                }

                if ( 'on' === $args['fullwidth'] ) {
                    $width  = 1080;
                    $height = 9999;
                } else {
                    $width  =  400;
                    $height = ( 'landscape' === $args['orientation'] ) ? 284 : 516;
                }

                $width  = (int) apply_filters( 'et_pb_gallery_image_width', $width );
                $height = (int) apply_filters( 'et_pb_gallery_image_height', $height );

                $_attachments = get_posts( $attachments_args );

                foreach ( $_attachments as $key => $val ) {
                    $attachments[$key] = $_attachments[$key];
                    $attachments[$key]->image_src_full  = wp_get_attachment_image_src( $val->ID, 'full' );
                    $attachments[$key]->image_src_thumb = wp_get_attachment_image_src( $val->ID, array( $width, $height ) );
                }

                return $attachments;
            }

            function shortcode_callback( $atts, $content = null, $function_name ) {
                $module_id              = $this->shortcode_atts['module_id'];
                $module_class           = $this->shortcode_atts['module_class'];
                $gallery_ids            = $this->shortcode_atts['gallery_ids'];
                $fullwidth              = $this->shortcode_atts['fullwidth'];
                $show_title_and_caption = $this->shortcode_atts['show_title_and_caption'];
                $background_layout      = $this->shortcode_atts['background_layout'];
                $posts_number           = $this->shortcode_atts['posts_number'];
                $show_pagination        = $this->shortcode_atts['show_pagination'];
                $gallery_orderby        = $this->shortcode_atts['gallery_orderby'];
                $zoom_icon_color        = $this->shortcode_atts['zoom_icon_color'];
                $hover_overlay_color    = $this->shortcode_atts['hover_overlay_color'];
                $hover_icon             = $this->shortcode_atts['hover_icon'];
                $auto                   = $this->shortcode_atts['auto'];
                $auto_speed             = $this->shortcode_atts['auto_speed'];
                $orientation            = $this->shortcode_atts['orientation'];

                $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );

                if ( '' !== $zoom_icon_color ) {
                    ET_Builder_Element::set_style( $function_name, array(
                        'selector'    => '%%order_class%% .et_overlay:before',
                        'declaration' => sprintf(
                            'color: %1$s !important;',
                            esc_html( $zoom_icon_color )
                        ),
                    ) );
                }

                if ( '' !== $hover_overlay_color ) {
                    ET_Builder_Element::set_style( $function_name, array(
                        'selector'    => '%%order_class%% .et_overlay',
                        'declaration' => sprintf(
                            'background-color: %1$s;
                            border-color: %1$s;',
                            esc_html( $hover_overlay_color )
                        ),
                    ) );
                }

                // Get gallery item data
                $attachments = self::get_gallery( array(
                    'gallery_ids'     => $gallery_ids,
                    'gallery_orderby' => $gallery_orderby,
                    'fullwidth'       => $fullwidth,
                    'orientation'     => $orientation,
                ) );

                if ( empty( $attachments ) ) {
                    return '';
                }

                wp_enqueue_script( 'hashchange' );

                $fullwidth_class = 'on' === $fullwidth ?  ' et_pb_slider et_pb_gallery_fullwidth' : ' et_pb_gallery_grid';
                $background_class = " et_pb_bg_layout_{$background_layout}";

                $module_class .= 'on' === $auto && 'on' === $fullwidth ? ' et_slider_auto et_slider_speed_' . esc_attr( $auto_speed ) : '';

                $posts_number = 0 === intval( $posts_number ) ? 4 : intval( $posts_number );

                $output = sprintf(
                    '<div%1$s class="et_pb_module et_pb_gallery%2$s%3$s%4$s clearfix">
                        <div class="et_pb_gallery_items et_post_gallery" data-per_page="%5$d">',
                    ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
                    ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( ltrim( $module_class ) ) ) : '' ),
                    esc_attr( $fullwidth_class ),
                    esc_attr( $background_class ),
                    esc_attr( $posts_number )
                );

                foreach ( $attachments as $id => $attachment ) {
                    $data_icon = '' !== $hover_icon
                        ? sprintf(
                            ' data-icon="%1$s"',
                            esc_attr( et_pb_process_font_icon( $hover_icon ) )
                        )
                        : '';

                    $image_output = sprintf(
                        '<a href="%1$s" title="%2$s">
                            <img src="%3$s" alt="%2$s" />
                            <span class="et_overlay%4$s"%5$s></span>
                        </a>',
                        esc_url( $attachment->image_src_full[0] ),
                        esc_attr( $attachment->post_title ),
                        esc_url( $attachment->image_src_thumb[0] ),
                        ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                        $data_icon
                    );

                    $output .= sprintf(
                        '<div class="et_pb_gallery_item%2$s%1$s">',
                        esc_attr( $background_class ),
                        ( 'on' !== $fullwidth ? ' et_pb_grid_item' : '' )
                    );
                    $output .= "
                        <div class='et_pb_gallery_image {$orientation}'>
                            $image_output
                        </div>";

                    if ( 'on' !== $fullwidth && 'on' === $show_title_and_caption ) {
                        if ( trim($attachment->post_title) ) {
                            $output .= "
                                <h3 class='et_pb_gallery_title'>
                                " . wptexturize($attachment->post_title) . "
                                </h3>";
                        }
                        if ( trim($attachment->post_excerpt) ) {
                        $output .= "
                                <p class='et_pb_gallery_caption'>
                                " . wptexturize($attachment->post_excerpt) . "
                                </p>";
                        }
                    }
                    $output .= "</div>";
                }

                $output .= "</div><!-- .et_pb_gallery_items -->";

                if ( 'on' !== $fullwidth && 'on' === $show_pagination ) {
                    $output .= "<div class='et_pb_gallery_pagination'></div>";
                }

                $output .= "</div><!-- .et_pb_gallery -->";

                return $output;
            }
        }

        $cgm = new CHILD_ET_Builder_Module_Gallery();
        remove_shortcode( 'et_pb_gallery' );
        add_shortcode( 'et_pb_gallery', array($cgm, '_shortcode_callback') );

    }

}
add_action('wp', 'divi_child_theme_setup', 9999);

I used code from Divi 3.0.51. have fun

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.