Moving Gallery module to child theme - kary4/divituts GitHub Wiki
If you want to add some custom features to your Gallery module and you don't want to lose the changes when you update/reinstall then you need to use child theme. Firstly you need to redefine the Gallery module in child theme and then you can add any changes to the Gallery module. Here are the steps you need to follow to move Gallery module to child theme
- Create a new folder inside your child theme, called custom-modules.
- In custom-modules, please create a new file called cfwpm.php and paste this code inside:
<?php
class Custom_ET_Builder_Module_Gallery extends ET_Builder_Module {
function init() {
$this->name = __( 'Gallery', 'et_builder' );
$this->slug = 'et_pb_gallery';
$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',
);
$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' ),
);
$this->main_css_element = '%%order_class%%.et_pb_gallery';
$this->advanced_options = array(
'fonts' => array(
'caption' => array(
'label' => __( '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',
),
),
),
'title' => array(
'label' => __( 'Title', 'et_builder' ),
'css' => array(
'main' => "{$this->main_css_element} .et_pb_gallery_title",
),
),
),
'border' => array(
'css' => array(
'main' => "{$this->main_css_element} .et_pb_gallery_item",
),
),
);
$this->custom_css_options = array(
'gallery_item' => array(
'label' => __( 'Gallery Item', 'et_builder' ),
'selector' => '.et_pb_gallery_item',
),
'overlay' => array(
'label' => __( 'Overlay', 'et_builder' ),
'selector' => '.et_overlay',
),
'overlay_icon' => array(
'label' => __( 'Overlay Icon', 'et_builder' ),
'selector' => '.et_overlay:before',
),
'gallery_item_title' => array(
'label' => __( 'Gallery Item Title', 'et_builder' ),
'selector' => '.et_pb_gallery_title',
),
);
}
function get_fields() {
$fields = array(
'src' => array(
'label' => __( 'Gallery Images', 'et_builder' ),
'renderer' => 'et_builder_get_gallery_settings',
'option_category' => 'basic_option',
),
'gallery_ids' => array(
'type' => 'hidden',
'class' => array( 'et-pb-gallery-ids-field' ),
),
'gallery_orderby' => array(
'label' => __( 'Gallery Images', 'et_builder' ),
'type' => 'hidden',
'class' => array( 'et-pb-gallery-ids-field' ),
),
'fullwidth' => array(
'label' => __( 'Layout', 'et_builder' ),
'type' => 'select',
'option_category' => 'layout',
'options' => array(
'on' => __( 'Slider', 'et_builder' ),
'off' => __( 'Grid', 'et_builder' ),
),
'description' => __( 'Toggle between the various blog layout types.', 'et_builder' ),
'affects' => array(
'#et_pb_zoom_icon_color',
'#et_pb_caption_font',
'#et_pb_caption_font_color',
'#et_pb_caption_font_size',
'#et_pb_hover_overlay_color',
'#et_pb_auto',
'#et_pb_posts_number',
'#et_pb_show_title_and_caption',
),
),
'posts_number' => array(
'label' => __( 'Images Number', 'et_builder' ),
'type' => 'text',
'option_category' => 'configuration',
'description' => __( 'Define the number of images that should be displayed per page.', 'et_builder' ),
'depends_show_if' => 'off',
),
'show_title_and_caption' => array(
'label' => __( 'Show Title and Caption', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => __( 'Yes', 'et_builder' ),
'off' => __( 'No', 'et_builder' ),
),
'depends_show_if' => 'on',
'description' => __( 'Here you can choose whether to show the images title and caption, if the image has them.', 'et_builder' ),
),
'show_pagination' => array(
'label' => __( 'Show Pagination', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => __( 'Yes', 'et_builder' ),
'off' => __( 'No', 'et_builder' ),
),
'description' => __( 'Enable or disable pagination for this feed.', 'et_builder' ),
),
'background_layout' => array(
'label' => __( 'Text Color', 'et_builder' ),
'type' => 'select',
'option_category' => 'color_option',
'options' => array(
'light' => __( 'Dark', 'et_builder' ),
'dark' => __( 'Light', 'et_builder' ),
),
'description' => __( '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' => __( 'Automatic Animation', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'off' => __( 'Off', 'et_builder' ),
'on' => __( 'On', 'et_builder' ),
),
'affects' => array(
'#et_pb_auto_speed',
),
'depends_show_if' => 'on',
'description' => __( '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' => __( 'Automatic Animation Speed (in ms)', 'et_builder' ),
'type' => 'text',
'option_category' => 'configuration',
'depends_default' => true,
'description' => __( "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' ),
),
'admin_label' => array(
'label' => __( 'Admin Label', 'et_builder' ),
'type' => 'text',
'description' => __( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ),
),
'module_id' => array(
'label' => __( 'CSS ID', 'et_builder' ),
'type' => 'text',
'option_category' => 'configuration',
'description' => __( 'Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.', 'et_builder' ),
),
'module_class' => array(
'label' => __( 'CSS Class', 'et_builder' ),
'type' => 'text',
'option_category' => 'configuration',
'description' => __( 'Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.', 'et_builder' ),
),
'zoom_icon_color' => array(
'label' => __( 'Zoom Icon Color', 'et_builder' ),
'type' => 'color',
'custom_color' => true,
'depends_show_if' => 'off',
'tab_slug' => 'advanced',
),
'hover_overlay_color' => array(
'label' => __( 'Hover Overlay Color', 'et_builder' ),
'type' => 'color-alpha',
'custom_color' => true,
'depends_show_if' => 'off',
'tab_slug' => 'advanced',
),
'hover_icon' => array(
'label' => __( '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',
),
);
return $fields;
}
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'];
$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 )
),
) );
}
$attachments = array();
if ( ! empty( $gallery_ids ) ) {
$attachments_args = array(
'include' => $gallery_ids,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'post__in',
);
if ( 'rand' === $gallery_orderby ) {
$attachments_args['orderby'] = 'rand';
}
$_attachments = get_posts( $attachments_args );
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
}
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 ) : '';
$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 )
);
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$width = 'on' === $fullwidth ? 1080 : 400;
$width = (int) apply_filters( 'et_pb_gallery_image_width', $width );
$height = 'on' === $fullwidth ? 9999 : 284;
$height = (int) apply_filters( 'et_pb_gallery_image_height', $height );
list($full_src, $full_width, $full_height) = wp_get_attachment_image_src( $id, 'full' );
list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( $id, array( $width, $height ) );
$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_attr( $full_src ),
esc_attr( $attachment->post_title ),
esc_attr( $thumb_src ),
( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
$data_icon
);
$orientation = ( $thumb_height > $thumb_width ) ? 'portrait' : 'landscape';
$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;
}
}
- Next in the functions.php of your child theme, add this code:
function divi_child_theme_setup() {
if ( ! class_exists('ET_Builder_Module') ) {
return;
}
get_template_part( 'custom-modules/cfwpm' );
$cfwpm = new Custom_ET_Builder_Module_Gallery();
remove_shortcode( 'et_pb_gallery' );
add_shortcode( 'et_pb_gallery', array($cfwpm, '_shortcode_callback') );
}
add_action( 'wp', 'divi_child_theme_setup', 9999 );
Now you can modify the code in the cfwpm.php file the way you like. For ex. if you want to modify the default thumbs size then modify this part of the code
$width = 'on' === $fullwidth ? 1080 : 400;
$width = (int) apply_filters( 'et_pb_gallery_image_width', $width );
$height = 'on' === $fullwidth ? 9999 : 284;
modify the values 400 and 284 to what you need