* @link https://www.elicus.com/
* @copyright 2024 Elicus Technologies Private Limited
* @version 1.4.2
*/
class EL_JustifiedGallery extends ET_Builder_Module {
public $slug = 'el_justified_gallery';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => 'https://diviextended.com/product/divi-gallery-extended/',
'author' => 'Elicus',
'author_uri' => 'https://elicus.com/',
);
public function init() {
$this->name = esc_html__( 'Justified Gallery', 'divi-gallery-extended' );
$this->main_css_element = '%%order_class%%';
add_filter( 'et_builder_processed_range_value', array( $this, 'el_builder_processed_range_value' ), 10, 3 );
add_filter( 'et_required_module_assets', array( $this, 'el_required_module_assets' ), 10 );
add_filter( 'et_dynamic_assets_modules_atf', array( $this, 'el_required_module_assets' ), 20 );
add_filter( 'et_late_global_assets_list', array( $this, 'el_dge_late_assets' ), 10, 3 );
}
public function el_required_module_assets( $modules ) {
array_push( $modules, 'et_pb_image' );
return $modules;
}
public function el_dge_late_assets( $assets_list, $assets_args, $dynamic_assets ) {
if ( function_exists( 'et_get_dynamic_assets_path' ) && function_exists( 'et_is_cpt' ) ) {
$cpt_suffix = et_is_cpt() ? '_cpt' : '';
$assets_list['et_icons_all'] = array(
'css' => $assets_args['assets_prefix'] . "/css/icons_all.css",
);
$assets_list['et_overlay'] = array(
'css' => $assets_args['assets_prefix'] . "/css/overlay{$cpt_suffix}.css",
);
$assets_list['et_icons_fa'] = array(
'css' => $assets_args['assets_prefix'] . "/css/icons_fa_all.css",
);
}
return $assets_list;
}
public function get_settings_modal_toggles() {
return array(
'general' => array(
'toggles' => array(
'main_content' => array(
'title' => esc_html__( 'Configuration', 'divi-gallery-extended' ),
),
'elements' => array(
'title' => esc_html__( 'Elements', 'divi-gallery-extended' ),
),
'lightbox' => array(
'title' => esc_html__( 'Lightbox', 'divi-gallery-extended' ),
),
'pagination' => array(
'title' => esc_html__( 'Pagination', 'divi-gallery-extended' ),
),
),
),
'advanced' => array(
'toggles' => array(
'category' => array(
'title' => esc_html__( 'Category', 'divi-gallery-extended' ),
'sub_toggles' => array(
'normal' => array( 'name' => 'Normal' ),
'active' => array( 'name' => 'Active' ),
),
'tabbed_subtoggles' => true,
),
'overlay' => array(
'title' => esc_html__( 'Overlay', 'divi-gallery-extended' ),
),
'overlay_text' => array(
'title' => esc_html__( 'Overlay Text', 'divi-gallery-extended' ),
'sub_toggles' => array(
'title_text' => array( 'name' => 'Title' ),
'caption_text' => array( 'name' => 'Caption' ),
),
'tabbed_subtoggles' => true,
),
'lightbox' => array(
'title' => esc_html__( 'Lightbox', 'divi-gallery-extended' ),
),
'lightbox_text' => array(
'title' => esc_html__( 'Lightbox Text', 'divi-gallery-extended' ),
'sub_toggles' => array(
'title_text' => array( 'name' => 'Title' ),
'caption_text' => array( 'name' => 'Caption' ),
),
'tabbed_subtoggles' => true,
),
'load_more' => array(
'title' => esc_html__( 'Load More Button', 'divi-gallery-extended' ),
),
'pagination' => array(
'title' => esc_html__( 'Pagination', 'divi-gallery-extended' ),
),
),
),
);
}
public function get_advanced_fields_config() {
return array(
'fonts' => array(
'category' => array(
'label' => esc_html__( 'Category', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#fff',
),
'hide_text_align' => true,
'css' => array(
'main' => "%%order_class%% .dge-justified-gallery-filter li:not(.active) a",
),
'toggle_slug' => 'category',
'sub_toggle' => 'normal',
'tab_slug' => 'advanced',
'depends_on' => array( 'enable_filterable_gallery' ),
'depends_show_if' => 'on',
),
'active_category' => array(
'label' => esc_html__( 'Active Category', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#000',
),
'hide_text_align' => true,
'css' => array(
'main' => "%%order_class%% .dge-justified-gallery-filter li.active a",
),
'toggle_slug' => 'category',
'sub_toggle' => 'active',
'tab_slug' => 'advanced',
'depends_on' => array( 'enable_filterable_gallery' ),
'depends_show_if' => 'on',
),
'overlay_title_text' => array(
'label' => esc_html__( 'Overlay Title', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#000',
),
'text_align' => array(
'default' => 'center',
),
'css' => array(
'main' => "%%order_class%% .el-justified-gallery-item figcaption .el-item-title",
),
'toggle_slug' => 'overlay_text',
'sub_toggle' => 'title_text',
'tab_slug' => 'advanced',
'depends_on' => array( 'enable_overlay' ),
'depends_show_if' => 'on',
),
'overlay_caption_text' => array(
'label' => esc_html__( 'Overlay Caption', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#000',
),
'text_align' => array(
'default' => 'center',
),
'css' => array(
'main' => "%%order_class%% .el-justified-gallery-item figcaption .el-item-caption",
),
'toggle_slug' => 'overlay_text',
'sub_toggle' => 'caption_text',
'tab_slug' => 'advanced',
'depends_on' => array( 'enable_overlay' ),
'depends_show_if' => 'on',
),
'lightbox_title_text' => array(
'label' => esc_html__( 'Lightbox Title', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#fff',
),
'text_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "%%order_class%%_lightbox .mfp-title .el-item-title"
),
'toggle_slug' => 'lightbox_text',
'sub_toggle' => 'title_text',
'tab_slug' => 'advanced',
'depends_on' => array( 'click_trigger' ),
'depends_show_if' => 'lightbox',
),
'lightbox_caption_text' => array(
'label' => esc_html__( 'Lightbox Caption', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'text_color' => array(
'default' => '#fff',
),
'text_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "%%order_class%%_lightbox .mfp-title .el-item-caption",
),
'toggle_slug' => 'lightbox_text',
'sub_toggle' => 'caption_text',
'tab_slug' => 'advanced',
'depends_on' => array( 'click_trigger' ),
'depends_show_if' => 'lightbox',
),
'pagination_link' => array(
'label' => esc_html__( 'Pagination Link', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '0px',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'hide_text_color' => true,
'hide_text_shadow' => true,
'hide_text_align' => true,
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_pagination li a",
'text_align' => "{$this->main_css_element} .et_pb_button_wrapper"
),
'depends_on' => array( 'pagination_type' ),
'depends_show_if' => 'number',
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
),
),
'button' => array(
'loadmore_button' => array(
'label' => esc_html__( 'Load More Button', 'all-in-one-carousel-for-divi' ),
'css' => array(
'main' => "{$this->main_css_element} .el-justified-gallery-wrap .el-justified-gallery-load-more",
'alignment' => "{$this->main_css_element} .el-justified-gallery-wrap .et_pb_button_wrapper",
'important' => 'all',
),
'margin_padding' => array(
'custom_margin' => array(
'default_on_front' => '20px||||false|false',
),
'css' => array(
'margin' => "{$this->main_css_element} .el-justified-gallery-wrap .et_pb_button_wrapper",
'padding' => "{$this->main_css_element} .el-justified-gallery-wrap .el-justified-gallery-load-more",
'important' => 'all',
),
),
'border_width' => array(
'default' => '2px',
),
'box_shadow' => false,
'depends_on' => array( 'show_button' ),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'load_more',
),
),
'borders' => array(
'image' => array(
'label_prefix' => esc_html__( 'Image Item', 'divi-gallery-extended' ),
'css' => array(
'main' => array(
'border_radii' => "{$this->main_css_element} .el-justified-gallery-item figure, {$this->main_css_element} .el-justified-gallery-item figcaption",
'border_styles' => "{$this->main_css_element} .el-justified-gallery-item figure",
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'border',
),
'category' => array(
'label_prefix' => esc_html__( 'Category', 'divi-gallery-extended' ),
'css' => array(
'main' => array(
'border_radii' => "{$this->main_css_element} .dge-justified-gallery-filter li a",
'border_styles' => "{$this->main_css_element} .dge-justified-gallery-filter li a",
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'normal',
'depends_on' => array( 'enable_filterable_gallery' ),
'depends_show_if' => 'on',
),
'active_category' => array(
'label_prefix' => esc_html__( 'Active Category', 'divi-gallery-extended' ),
'css' => array(
'main' => array(
'border_radii' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a",
'border_styles' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a",
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'active',
'depends_on' => array( 'enable_filterable_gallery' ),
'depends_show_if' => 'on',
),
'default' => array(
'css' => array(
'main' => array(
'border_styles' => '%%order_class%%',
'border_radii' => '%%order_class%%',
),
),
),
),
'gallery_item_margin_padding' => array(
'overlay_zoom_link_icons' => array(
'margin_padding' => array(
'css' => array(
'use_margin' => false,
'padding' => '%%order_class%% .dge-overlay-icon-wrap .et-pb-icon',
'important' => 'all',
),
),
),
),
'margin_padding' => array(
'css' => array(
'main' => '%%order_class%%',
'important' => 'all',
),
),
'background' => array(
'use_background_video' => false,
'options' => array(
'parallax' => array( 'type' => 'skip' ),
),
),
'text' => false,
'filters' => false,
);
}
public function get_fields() {
return array_merge(
array(
'image_ids' => array(
'label' => esc_html__( 'Images', 'divi-gallery-extended' ),
'type' => 'upload-gallery',
'option_category' => 'basic_option',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Choose the images that you would like to appear in the image gallery.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
'__gallery_metadata',
'__gallery_filter',
),
),
'image_size' => array(
'label' => esc_html__( 'Image Size', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'thumbnail' => esc_html__( 'Thumbnail', 'divi-gallery-extended' ),
'medium' => esc_html__( 'Medium', 'divi-gallery-extended' ),
'large' => esc_html__( 'Large', 'divi-gallery-extended' ),
'full' => esc_html__( 'Full', 'divi-gallery-extended' ),
),
'default' => 'large',
'default_on_front' => 'large',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can select the size of images in gallery.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'column_spacing' => array(
'label' => esc_html__( 'Column Spacing', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => false,
'default' => '10',
'default_on_front' => '10',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Increase or decrease spacing between columns.', 'divi-gallery-extended' ),
),
'row_height' => array(
'label' => esc_html__( 'Row Height', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '50',
'max' => '500',
'step' => '5',
),
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => false,
'default' => '200',
'default_on_front' => '200',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Increase or decrease row height, based on that image size will also be expanded.', 'divi-gallery-extended' ),
),
'lastrow_align' => array(
'label' => esc_html__( 'Last Row Align', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'justify' => esc_html__( 'Justify', 'divi-gallery-extended' ),
'center' => esc_html__( 'Center', 'divi-gallery-extended' ),
'right' => esc_html__( 'Right', 'divi-gallery-extended' ),
'nojustify' => esc_html__( 'No Justify', 'divi-gallery-extended' ),
),
'default' => 'justify',
'default_on_front' => 'justify',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can select last row alignment for gallery.', 'divi-gallery-extended' ),
),
'click_trigger' => array(
'label' => esc_html__( 'Click Trigger', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'None', 'divi-gallery-extended' ),
'lightbox' => esc_html__( 'Lightbox', 'divi-gallery-extended' ),
'link' => esc_html__( 'Link', 'divi-gallery-extended' ),
'zoom_n_link' => esc_html__( 'Lightbox & Link on Overlay', 'divi-gallery-extended' ),
),
'default' => 'off',
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Choose an action to perform on clicking of an image.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'link_target' => array(
'label' => esc_html__( 'Link Target', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'In The Same Window', 'divi-gallery-extended' ),
'on' => esc_html__( 'In The New Tab', 'divi-gallery-extended' ),
),
'show_if' => array(
'click_trigger' => array( 'link', 'zoom_n_link' ),
),
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'divi-gallery-extended' ),
),
'enable_filterable_gallery' => array(
'label' => esc_html__( 'Enable Filterable Gallery', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'default' => 'off',
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Whether or not to show the filterable gallery. For filterable gallery, you must assign a category to the image. You can assign it either in the attachment page aur while selecting images.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_filter',
),
),
'show_all_filter' => array(
'label' => esc_html__( 'Show All Images filter', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'default' => 'on',
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Whether or not to show the all images filter.', 'divi-gallery-extended' ),
),
'all_images_text' => array(
'label' => esc_html__( 'All Images Text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => esc_html__( 'All', 'divi-gallery-extended' ),
'show_if' => array(
'enable_filterable_gallery' => 'on',
'show_all_filter' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can define the All images text you would like to display.', 'divi-gallery-extended' ),
),
'terms_orderby' => array(
'label' => esc_html__( 'Filterable Category Order By', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'none' => esc_html__( 'None', 'divi-gallery-extended' ),
'term_order' => esc_html__( 'Term Order', 'divi-gallery-extended' ),
'date' => esc_html__( 'Date', 'divi-gallery-extended' ),
'name' => esc_html__( 'Name/Title', 'divi-gallery-extended' ),
),
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'default' => 'none',
'default_on_front' => 'none',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose the filterable category to show order by.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_filter'
),
),
'terms_order' => array(
'label' => esc_html__( 'Filterable Category Order', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'DESC' => esc_html__( 'DESC', 'divi-gallery-extended' ),
'ASC' => esc_html__( 'ASC', 'divi-gallery-extended' ),
),
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'show_if_not' => array(
'terms_orderby' => array( 'none', 'term_order' ),
),
'default' => 'DESC',
'default_on_front' => 'DESC',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose the filterable category to show order.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_filter',
),
),
'enable_overlay' => array(
'label' => esc_html__( 'Enable Image Overlay on Hover', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'default' => 'off',
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Whether show or not to show overlay on the images.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'overlay_icon' => array(
'label' => esc_html__( 'Overlay Icon', 'divi-gallery-extended' ),
'type' => 'select_icon',
'option_category' => 'configuration',
'class' => array( 'et-pb-font-icon' ),
'show_if' => array(
'enable_overlay' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can define a custom icon for the overlay', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'show_title' => array(
'label' => esc_html__( 'Show Title', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'default' => 'off',
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Whether or not to show the title for images (if available).', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'title_area' => array(
'label' => esc_html__( 'Show Title in', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'lightbox' => esc_html__( 'Lightbox Only', 'divi-gallery-extended' ),
'overlay' => esc_html__( 'Overlay Only', 'divi-gallery-extended' ),
'both' => esc_html__( 'Both', 'divi-gallery-extended' ),
),
'default' => 'lightbox',
'default_on_front' => 'lightbox',
'show_if' => array(
'show_title' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can select the area where you want to display title.', 'divi-gallery-extended' ),
),
'show_caption' => array(
'label' => esc_html__( 'Show Caption', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'default' => 'off',
'default_on_front' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Whether or not to show the caption for images (if available).', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'caption_area' => array(
'label' => esc_html__( 'Show Caption in', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'lightbox' => esc_html__( 'Lightbox Only', 'divi-gallery-extended' ),
'overlay' => esc_html__( 'Overlay Only', 'divi-gallery-extended' ),
'both' => esc_html__( 'Both', 'divi-gallery-extended' ),
),
'default' => 'lightbox',
'default_on_front' => 'lightbox',
'show_if' => array(
'show_caption' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can select the area where you want to display caption.', 'divi-gallery-extended' ),
),
'lightbox_effect' => array(
'label' => esc_html__( 'Lightbox Effect', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'none' => esc_html__( 'None', 'divi-gallery-extended' ),
'zoom' => esc_html__( 'Zoom', 'divi-gallery-extended' ),
'fade' => esc_html__( 'Fade', 'divi-gallery-extended' ),
),
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'default_on_front' => 'none',
'tab_slug' => 'general',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can choose opening effect of lightbox.', 'divi-gallery-extended' ),
),
'lightbox_transition_duration' => array(
'label' => esc_html__( 'Transition Duration', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '100',
'max' => '2000',
'step' => '100',
),
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
'lightbox_effect' => array( 'zoom', 'fade' ),
),
'unitless' => true,
'default_on_front' => '300',
'tab_slug' => 'general',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can select the transition duration in miliseconds.', 'divi-gallery-extended' ),
),
'enable_navigation' => array(
'label' => esc_html__( 'Enable Navigation', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
),
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'default' => 'on',
'default_on_front' => 'on',
'tab_slug' => 'general',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Whether or not to enable navigation in lightbox.', 'divi-gallery-extended' ),
),
'lightbox_title_and_caption_style' => array(
'label' => esc_html__( 'Title & Caption Style', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'image_overlay' => esc_html__( 'Image Overlay', 'divi-gallery-extended' ),
'below_image' => esc_html__( 'Below Image', 'divi-gallery-extended' ),
),
'default' => 'image_overlay',
'default_on_front' => 'image_overlay',
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'tab_slug' => 'general',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can select the display style of title and caption in lightbox.', 'divi-gallery-extended' ),
),
'enable_load_more' => array(
'label' => esc_html__( 'Enable Pagination', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
),
'default' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Enable pagination for the gallery.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'images_per_page' => array(
'label' => esc_html__( 'Images per Page', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => '8',
'show_if' => array(
'enable_load_more' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Choose how many images you would like to display per page.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'pagination_type' => array(
'label' => esc_html__( 'Pagination Type', 'divi-gallery-extended' ),
'type' => 'select',
'options' => array(
'number' => esc_html__( 'Number Pagination', 'divi-gallery-extended' ),
'load_more' => esc_html__( 'Load More Button', 'divi-gallery-extended' ),
),
'default' => 'load_more',
'show_if' => array(
'enable_load_more' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Enable pagination for the gallery.', 'divi-gallery-extended' ),
),
'load_more_text' => array(
'label' => esc_html__( 'Load More Text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => esc_html__( 'Load More', 'divi-gallery-extended' ),
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'load_more',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Show load more button or not.', 'divi-gallery-extended' ),
),
'show_prev_next' => array(
'label' => esc_html__( 'Show Previous Next Links', 'divi-gallery-extended' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'No', 'divi-gallery-extended' ),
'on' => esc_html__( 'Yes', 'divi-gallery-extended' ),
),
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'number',
),
'default' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Show Previous Next Links or not.', 'divi-gallery-extended' ),
),
'next_text' => array(
'label' => esc_html__( 'Next Link Text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => 'Next',
'show_if' => array(
'enable_load_more' => 'on',
'show_prev_next' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define Next Link text in numbered pagination.', 'divi-gallery-extended' ),
),
'prev_text' => array(
'label' => esc_html__( 'Prev Link Text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => 'Prev',
'show_if' => array(
'enable_load_more' => 'on',
'show_prev_next' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define Previous Link text in numbered pagination.', 'divi-gallery-extended' ),
),
'category_bg_color' => array(
'label' => esc_html__( 'Category Background', 'divi-gallery-extended' ),
'type' => 'background-field',
'base_name' => 'category_bg',
'context' => 'category_bg_color',
'option_category' => 'button',
'custom_color' => true,
'background_fields' => $this->generate_background_options( 'category_bg', 'button', 'advanced', 'category', 'category_bg_color' ),
'hover' => 'tabs',
'default' => '#000',
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'normal',
'description' => esc_html__( 'Here you can adjust the background style of the category by customizing the background color, gradient, and image.', 'divi-gallery-extended' ),
),
'active_category_bg_color' => array(
'label' => esc_html__( 'Active Category Background', 'divi-gallery-extended' ),
'type' => 'background-field',
'base_name' => 'active_category_bg',
'context' => 'active_category_bg_color',
'option_category' => 'button',
'custom_color' => true,
'background_fields' => $this->generate_background_options( 'active_category_bg', 'button', 'advanced', 'category', 'active_category_bg_color' ),
'hover' => 'tabs',
'default' => 'transparent',
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'active',
'description' => esc_html__( 'Here you can adjust the background style of the active category by customizing the background color, gradient, and image.', 'divi-gallery-extended' ),
),
'overlay_zoom_link_icons_custom_padding' => array(
'label' => esc_html__( 'Search Icon Padding', 'divi-ajax-search' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'default' => '5px|5px|5px|5px|true|true',
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'divi-ajax-search' ),
),
'overlay_icon_size' => array(
'label' => esc_html__( 'Overlay Icon Size', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'fixed_unit' => 'px',
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => true,
'default' => '32px',
'default_on_front' => '32px',
'show_if' => array(
'enable_overlay' => 'on',
),
'show_if_not' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Increase or decrease icon font size.', 'divi-gallery-extended' ),
),
'overlay_icon_color' => array(
'label' => esc_html__( 'Overlay Icon Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'enable_overlay' => 'on',
),
'show_if_not' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom color for the icon.', 'divi-gallery-extended' ),
),
'overlay_color' => array(
'label' => esc_html__( 'Overlay Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'enable_overlay' => 'on',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom color for the overlay', 'divi-gallery-extended' ),
),
'zoom_icon_size' => array(
'label' => esc_html__( 'Zoom Icon Size', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'fixed_unit' => 'px',
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => true,
'default' => '16px',
'default_on_front' => '16px',
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Increase or decrease overlay zoom icon font size.', 'divi-gallery-extended' ),
),
'zoom_icon_bg' => array(
'label' => esc_html__( 'Zoom Icon Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom background color for the zoom/lightbox icon', 'divi-gallery-extended' ),
),
'zoom_icon_color' => array(
'label' => esc_html__( 'Zoom Icon Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom color for the zoom/lightbox icon', 'divi-gallery-extended' ),
),
'link_icon_size' => array(
'label' => esc_html__( 'Link Icon Size', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'fixed_unit' => 'px',
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => true,
'default' => '16px',
'default_on_front' => '16px',
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Increase or decrease overlay link icon font size.', 'divi-gallery-extended' ),
),
'link_icon_bg' => array(
'label' => esc_html__( 'Link Icon Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom background color for the link icon', 'divi-gallery-extended' ),
),
'link_icon_color' => array(
'label' => esc_html__( 'Link Icon Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'click_trigger' => 'zoom_n_link',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'description' => esc_html__( 'Here you can define a custom color for the link icon', 'divi-gallery-extended' ),
),
'meta_background_color' => array(
'label' => esc_html__( 'Title & Caption Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => 'rgba(0,0,0,0.6)',
'default_on_front' => 'rgba(0,0,0,0.6)',
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can define a custom overlay color for the title and caption.', 'divi-gallery-extended' ),
),
'lightbox_background_color' => array(
'label' => esc_html__( 'Lightbox Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => 'rgba(0,0,0,0.8)',
'default_on_front' => 'rgba(0,0,0,0.8)',
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can define a custom background color for the lightbox.', 'divi-gallery-extended' ),
),
'lightbox_close_icon_color' => array(
'label' => esc_html__( 'Close Icon Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => '#fff',
'default_on_front' => '#fff',
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can define a custom color for the close icon.', 'divi-gallery-extended' ),
),
'lightbox_arrows_color' => array(
'label' => esc_html__( 'Arrows Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => '#fff',
'default_on_front' => '#fff',
'show_if' => array(
'click_trigger' => array( 'lightbox', 'zoom_n_link' ),
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox',
'description' => esc_html__( 'Here you can define a custom color for the arrows.', 'divi-gallery-extended' ),
),
'pagination_link_background_color' => array(
'label' => esc_html__( 'Pagination Link Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => 'transparent',
'hover' => 'tabs',
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define a custom background color for the pagination link.', 'divi-gallery-extended' ),
),
'pagination_link_color' => array(
'label' => esc_html__( 'Pagination Link Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'hover' => 'tabs',
'default' => '#000',
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define a custom color for the pagination link.', 'divi-gallery-extended' ),
),
'active_pagination_link_background_color' => array(
'label' => esc_html__( 'Active Pagination Link Background Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => '#000',
'hover' => 'tabs',
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define a custom background color for the active pagination link.', 'divi-gallery-extended' ),
),
'active_pagination_link_color' => array(
'label' => esc_html__( 'Active Pagination Link Color', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => '#fff',
'hover' => 'tabs',
'show_if' => array(
'enable_load_more' => 'on',
'pagination_type' => 'number',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define a custom color for the active pagination link.', 'divi-gallery-extended' ),
),
'__gallery_data' => array(
'type' => 'computed',
'computed_callback' => array( 'EL_JustifiedGallery', 'computed_gallery_data' ),
'computed_depends_on' => array(
'image_ids',
'image_size',
'enable_load_more',
'images_per_page',
'enable_overlay',
'overlay_icon',
'show_title',
'show_caption',
'click_trigger',
),
),
'__gallery_filter' => array(
'type' => 'computed',
'computed_callback' => array( 'EL_JustifiedGallery', 'computed_gallery_filter' ),
'computed_depends_on' => array(
'image_ids',
'enable_filterable_gallery',
'terms_orderby',
'terms_order',
),
),
),
$this->generate_background_options( 'category_bg', 'skip', 'advanced', 'category', 'category_bg_color' ),
$this->generate_background_options( 'active_category_bg', 'skip', 'advanced', 'category', 'active_category_bg_color' )
);
}
public static function computed_gallery_data( $args = array(), $conditional_tags = array(), $current_page = array() ) {
$defaults = array(
'image_ids' => '',
'image_size' => 'large',
'enable_load_more' => 'off',
'images_per_page' => 8,
'enable_overlay' => 'off',
'overlay_icon' => '',
'show_title' => 'off',
'show_caption' => 'off',
'click_trigger' => 'off',
);
$args = wp_parse_args( $args, $defaults );
// Get image ids.
$all_image_ids = $args['image_ids'];
if ( ! is_array( $all_image_ids ) ) {
$all_image_ids = explode( ',', $all_image_ids );
}
$image_size = !empty( $args['image_size'] ) ? $args['image_size'] : 'large';
$enable_load_more = !empty( $args['enable_load_more'] ) ? $args['enable_load_more'] : 'off';
$images_per_page = !empty( $args['images_per_page'] ) ? $args['images_per_page'] : 8;
$image_ids = $all_image_ids;
// if ( 'on' === $enable_load_more && 0 < $images_per_page ) {
// All image ids.
// $image_ids = array_slice( $all_image_ids, 0, $images_per_page, true );
// }
$attachments = array();
$click_trigger = ! empty( $args['click_trigger'] ) ? $args['click_trigger'] : 'off';
$show_overlay = ! empty( $args['enable_overlay'] ) ? $args['enable_overlay'] : 'off';
$show_title = ! empty( $args['show_title'] ) ? $args['show_title'] : 'off';
$show_caption = ! empty( $args['show_caption'] ) ? $args['show_caption'] : 'off';
$item_icon = '';
if ( ! empty($args['overlay_icon']) ) {
$item_icon = sprintf(
'%1$s',
et_pb_extended_process_font_icon( $args['overlay_icon'] )
);
}
foreach( $image_ids as $img_index => $image_id ) {
$categories = get_the_terms( $image_id, 'attachment-category' );
$cat_classes = array();
if ( ! is_wp_error( $categories ) && ! empty( $categories ) ) {
foreach ( $categories as $category ) {
$cat_classes[] = $category->slug;
}
}
// Hide if pagination.
if ( 'on' === $enable_load_more && 0 < $images_per_page && ($img_index + 1) > $images_per_page ) {
$cat_classes[] = 'dge-hidden-item';
}
// Get the title and check.
$title = '';
if ( 'on' === $show_title ) {
$title = sprintf( '%1$s
', esc_html( wptexturize( get_the_title( $image_id ) ) ) );
}
$caption = '';
if ( 'on' === $show_caption ) {
$caption = sprintf( '%1$s
', et_core_intentionally_unescaped( wp_get_attachment_caption( $image_id ), 'html' ) );
}
$image_link = get_post_meta( intval( $image_id ), 'dge_attachment_link', true );
// Icons.
$overlay_icon_wrap = '';
if ( 'on' === $show_overlay && 'zoom_n_link' === $click_trigger ) {
// Overlay link icon.
$overlay_link_icon = '';
if ( ! empty( $image_link ) ) {
$overlay_link_icon = sprintf(
'%2$s',
esc_url( $image_link ),
esc_attr( et_pb_process_font_icon( "||fa||900" ) ),
'on' === $link_target ? ' target="_blank"' : ''
);
}
$overlay_icon_wrap = sprintf(
'',
esc_attr( et_pb_process_font_icon( "||fa||900" ) ),
esc_url( wp_get_attachment_url( intval( $image_id ) ) ),
$overlay_link_icon
);
}
$caption_html = '';
if ( 'on' === $show_overlay ) {
$caption_html = sprintf(
'%1$s %2$s %3$s
%4$s',
$item_icon,
$title,
$caption,
$overlay_icon_wrap
);
}
$gallery_item = sprintf(
'%1$s %2$s',
wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false ),
et_core_intentionally_unescaped( $caption_html, 'html' )
);
$this_attachment = array(
'item' => $gallery_item,
'cats' => implode( ' ', $cat_classes ),
);
array_push( $attachments, $this_attachment );
}
return $attachments;
}
public static function computed_gallery_filter( $args = array(), $conditional_tags = array(), $current_page = array() ) {
$defaults = array(
'image_ids' => '',
'enable_filterable_gallery' => 'off',
'terms_orderby' => 'none',
'terms_order' => 'DESC'
);
$args = wp_parse_args( $args, $defaults );
// Check if filter is off.
if ( 'on' !== $args['enable_filterable_gallery'] ) {
return array();
}
// Get image ids.
$all_image_ids = $args['image_ids'];
if ( ! is_array( $all_image_ids ) ) {
$all_image_ids = explode( ',', $all_image_ids );
}
$filter_cats = array();
// Get the terms, also get it on perticular order.
$categories_args = array(
'taxonomy' => 'attachment-category',
'object_ids' => $all_image_ids,
'hide_empty' => true,
);
if ( ! empty( $args['terms_orderby'] ) && 'none' !== $args['terms_orderby'] ) {
$categories_args['orderby'] = $args['terms_orderby'];
$categories_args['order'] = $args['terms_order'];
}
$categories = get_terms( $categories_args );
if ( ! is_wp_error( $categories ) && ! empty( $categories ) ) {
foreach ( $categories as $category ) {
$filter_cats[] = array(
'slug' => $category->slug,
'name' => $category->name,
);
}
}
return $filter_cats;
}
public function render( $attrs, $content, $render_slug ) {
// Get image ids.
$all_image_ids = $this->props['image_ids'];
// If no image ids.
if ( empty( $all_image_ids ) ) {
return '';
}
// Load CSS and JS files.
wp_enqueue_script( 'elicus-images-loaded-script' );
wp_enqueue_script( 'justified-gallery' );
wp_enqueue_style( 'justified-gallery' );
$click_trigger = ! empty( $this->props['click_trigger'] ) ? $this->props['click_trigger'] : 'off';
if ( 'lightbox' === $click_trigger || 'zoom_n_link' === $click_trigger ) {
wp_enqueue_script('magnific-popup');
wp_enqueue_style('magnific-popup');
}
if ( ! is_array( $all_image_ids ) ) {
$all_image_ids = explode( ',', $all_image_ids );
}
// Get the other props.
$image_size = !empty( $this->props['image_size'] ) ? $this->props['image_size'] : 'large';
$enable_load_more = !empty( $this->props['enable_load_more'] ) ? $this->props['enable_load_more'] : 'off';
$images_per_page = !empty( $this->props['images_per_page'] ) ? $this->props['images_per_page'] : 8;
$image_ids = $all_image_ids;
// if ( 'on' === $enable_load_more && 0 < $images_per_page ) {
// // All image ids.
// $image_ids = array_slice( $all_image_ids, 0, $images_per_page, true );
// }
// Get images of gallery.
$gallery_items = '';
$show_overlay = ! empty( $this->props['enable_overlay'] ) ? $this->props['enable_overlay'] : 'off';
$item_icon = '';
if ( 'on' === $show_overlay && ! empty($this->props['overlay_icon']) ) {
$item_icon = sprintf(
'%1$s',
et_pb_extended_process_font_icon( $this->props['overlay_icon'] )
);
if ( class_exists( 'ET_Builder_Module_Helper_Style_Processor' ) && method_exists( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ) ) {
$this->generate_styles( array(
'utility_arg' => 'icon_font_family',
'render_slug' => $render_slug,
'base_attr_name' => 'overlay_icon',
'important' => true,
'selector' => '%%order_class%% figcaption .et_pb_icon_wrap .et-pb-icon',
'processor' => array(
'ET_Builder_Module_Helper_Style_Processor',
'process_extended_icon',
),
) );
}
}
$pagination_type = ! empty( $this->props['pagination_type'] ) ? $this->props['pagination_type'] : 'load_more';
$show_title = ! empty( $this->props['show_title'] ) ? $this->props['show_title'] : 'off';
$title_area = ! empty( $this->props['title_area'] ) ? $this->props['title_area'] : 'lightbox';
$show_caption = ! empty( $this->props['show_caption'] ) ? $this->props['show_caption'] : 'off';
$caption_area = ! empty( $this->props['caption_area'] ) ? $this->props['caption_area'] : 'lightbox';
$link_target = $this->props['link_target'];
foreach ( $image_ids as $img_index => $image_id ) {
$cat_classes = array();
$categories = get_the_terms( $image_id, 'attachment-category' );
if ( ! is_wp_error( $categories ) && ! empty( $categories ) ) {
foreach ( $categories as $category ) {
// $filter_cats[ $category->slug ] = $category->name;
$cat_classes[] = $category->slug;
}
}
// Hide if pagination.
if ( 'on' === $enable_load_more && 0 < $images_per_page && ($img_index + 1) > $images_per_page ) {
$cat_classes[] = 'dge-hidden-item';
}
// Get the title and check.
$title = '';
if ( 'on' === $show_title ) {
$title = sprintf( '%1$s
', esc_html( wptexturize( get_the_title( $image_id ) ) ) );
}
$caption = '';
if ( 'on' === $show_caption ) {
$caption = sprintf( '%1$s
', et_core_intentionally_unescaped( wp_get_attachment_caption( $image_id ), 'html' ) );
}
$image_link = get_post_meta( intval( $image_id ), 'dge_attachment_link', true );
// Icons.
$overlay_icon_wrap = '';
if ( 'on' === $show_overlay && 'zoom_n_link' === $click_trigger ) {
// Overlay link icon.
$overlay_link_icon = '';
if ( ! empty( $image_link ) ) {
$overlay_link_icon = sprintf(
'%2$s',
esc_url( $image_link ),
esc_attr( et_pb_process_font_icon( "||fa||900" ) ),
'on' === $link_target ? ' target="_blank"' : ''
);
}
$overlay_icon_wrap = sprintf(
'',
esc_attr( et_pb_process_font_icon( "||fa||900" ) ),
esc_url( wp_get_attachment_url( intval( $image_id ) ) ),
$overlay_link_icon
);
}
$caption_html = '';
if ( 'on' === $show_overlay || 'lightbox' === $click_trigger ) {
$caption_html = sprintf(
'%1$s %2$s %3$s
%4$s',
$item_icon,
$title,
$caption,
$overlay_icon_wrap
);
}
$this_image_item = '';
if ( 'lightbox' === $click_trigger ) {
$this_image_item .= sprintf(
'%2$s %3$s
',
esc_attr( implode( ' ', $cat_classes ) ),
et_core_intentionally_unescaped( wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false ), 'html' ),
et_core_intentionally_unescaped( $caption_html, 'html' ),
esc_url( wp_get_attachment_url( intval( $image_id ) ) )
);
} elseif ( 'link' === $click_trigger ) {
if ( ! empty( $image_link ) ) {
$this_image_item .= sprintf(
'',
esc_attr( implode( ' ', $cat_classes ) ),
et_core_intentionally_unescaped( wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false ), 'html' ),
et_core_intentionally_unescaped( $caption_html, 'html' ),
esc_url( $image_link ),
'on' === $link_target ? ' target="_blank"' : ''
);
}
}
if ( empty ( $this_image_item ) ) {
$this_image_item .= sprintf(
'%2$s %3$s
',
esc_attr( implode( ' ', $cat_classes ) ),
et_core_intentionally_unescaped( wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false ), 'html' ),
et_core_intentionally_unescaped( $caption_html, 'html' )
);
}
$gallery_items .= et_core_intentionally_unescaped( $this_image_item, 'html' );
}
$filter_cats = array();
$gallery_filter = '';
$enable_filter = !empty( $this->props['enable_filterable_gallery'] ) ? $this->props['enable_filterable_gallery'] : 'off';
if ( 'on' === $enable_filter ) {
// Get the terms, also get it on perticular order.
$categories_args = array(
'taxonomy' => 'attachment-category',
'object_ids' => $all_image_ids,
'hide_empty' => true,
);
if ( ! empty( $this->props['terms_orderby'] ) && 'none' !== $this->props['terms_orderby'] ) {
$categories_args['orderby'] = $this->props['terms_orderby'];
$categories_args['order'] = $this->props['terms_order'];
}
$categories = get_terms( $categories_args );
if ( ! is_wp_error( $categories ) && ! empty( $categories ) ) {
foreach ( $categories as $category ) {
$filter_cats[ $category->slug ] = $category->name;
}
}
if ( '1' < count( $filter_cats ) ) {
$active_class = 'active';
if ( ! empty( $this->props['show_all_filter'] ) && 'on' === $this->props['show_all_filter'] ) {
$gallery_filter .= sprintf(
'%1$s',
! empty( $this->props['all_images_text'] ) ? $this->props['all_images_text'] : esc_html__( 'All', 'divi-gallery-extended' ),
esc_attr( $active_class )
);
$active_class = '';
}
foreach ( $filter_cats as $filter_cat_slug => $filter_cat ) {
$gallery_filter .= sprintf(
'%2$s',
esc_attr( $filter_cat_slug ),
esc_html( $filter_cat ) ,
esc_attr( $active_class )
);
$active_class = '';
}
if ( !empty( $gallery_filter ) ) {
$gallery_filter = sprintf(
'',
$gallery_filter
);
}
}
}
$multi_view = et_pb_multi_view_options( $this );
$load_more_button = '';
if ( 'on' === $enable_load_more && 0 < $images_per_page ) {
$button_atts = array(
'images_per_page' => $images_per_page,
// 'images' => implode( ',', $all_image_ids ),
'page' => 2,
'total_images' => count( $all_image_ids )
);
if ( 'number' === $pagination_type ) {
wp_enqueue_script( 'twbs-pagination-script' );
// Add pagination options.
if ( 'on' === $this->props['show_prev_next'] ) {
$button_atts['show_prev_next'] = $this->props['show_prev_next'];
$button_atts['prev_text'] = $this->props['prev_text'];
$button_atts['next_text'] = $this->props['next_text'];
}
$load_more_button = sprintf(
'',
_wp_specialchars( wp_json_encode( $button_atts ), ENT_QUOTES, 'UTF-8', true )
);
} else {
// Load more button.
$load_more_button = $this->render_button( array(
'button_text' => !empty( $this->props['load_more_text'] ) ? esc_html( $this->props['load_more_text'] ) : esc_html__( 'Load More', 'divi-gallery-extended' ),
'button_text_escaped' => true,
'button_url' => '#loadmore',
'button_classname' => array( 'el-justified-gallery-load-more' ),
'button_custom' => isset( $this->props['custom_loadmore_button'] ) ? esc_attr( $this->props['custom_loadmore_button'] ) : 'off',
'custom_icon' => isset( $this->props['loadmore_button_icon'] ) ? $this->props['loadmore_button_icon'] : '',
'custom_icon_tablet' => isset( $this->props['loadmore_button_icon_tablet'] ) ? $this->props['loadmore_button_icon_tablet'] : '',
'custom_icon_phone' => isset( $this->props['loadmore_button_icon_phone'] ) ? $this->props['loadmore_button_icon_phone'] : '',
'button_rel' => isset( $this->props['loadmore_button_rel'] ) ? esc_attr( $this->props['loadmore_button_rel'] ) : '',
'has_wrapper' => false,
) );
$load_more_button = sprintf(
'
%1$s
',
et_core_intentionally_unescaped( $load_more_button, 'html' ),
_wp_specialchars( wp_json_encode( $button_atts ), ENT_QUOTES, 'UTF-8', true )
);
}
}
// Check data icon.
if ( ! empty( $this->props['loadmore_button_icon'] ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-load-more::after',
'declaration' => 'content: attr(data-icon) !important;'
) );
}
// hide overlay if there is a lighbox.
if ( 'off' === $show_overlay && 'lightbox' === $click_trigger ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .el-justified-gallery-item-overlay',
'declaration' => 'display: none !important;'
) );
} else {
// overlay on, but title & caption not to show on overlay.
if ( 'lightbox' === $title_area && 'lightbox' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item-overlay .el-item-content',
'declaration' => 'display: none !important;'
) );
} else {
if ( 'lightbox' === $title_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item-overlay .el-item-title',
'declaration' => 'display: none !important;'
) );
}
if ( 'lightbox' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item-overlay .el-item-caption',
'declaration' => 'display: none !important;'
) );
}
}
}
// hide/show on lightbox for title/caption.
if ( 'lightbox' === $click_trigger || 'zoom_n_link' === $click_trigger ) {
if ( 'overlay' === $title_area && 'overlay' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-title',
'declaration' => 'display: none !important;'
) );
} else {
if ( 'overlay' === $title_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-title .el-item-title',
'declaration' => 'display: none !important;'
) );
}
if ( 'overlay' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-title .el-item-caption',
'declaration' => 'display: none !important;'
) );
}
}
}
if ( in_array( $click_trigger, array( 'lightbox', 'zoom_n_link', 'link' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item img',
'declaration' => 'cursor: pointer;',
) );
}
// Overlay styles.
if ( 'on' === $show_overlay ) {
$overlay_icon_size = et_pb_responsive_options()->get_property_values( $this->props, 'overlay_icon_size' );
et_pb_responsive_options()->generate_responsive_css( $overlay_icon_size, '%%order_class%% .el-justified-gallery-item .et_pb_icon_wrap .et-pb-icon', 'font-size', $render_slug, '', 'range' );
if ( '' !== $this->props['overlay_color'] ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .el-justified-gallery-item-overlay',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['overlay_color'] ) )
) );
}
if ( '' !== $this->props['overlay_icon_color'] ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .et_pb_icon_wrap .et-pb-icon',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['overlay_icon_color'] ) )
) );
}
if ( 'zoom_n_link' === $click_trigger ) {
// Zoom icon font size.
$zoom_icon_size = et_pb_responsive_options()->get_property_values( $this->props, 'zoom_icon_size' );
et_pb_responsive_options()->generate_responsive_css( $zoom_icon_size, '%%order_class%% .el-justified-gallery-item .dge-overlay-lightbox', 'font-size', $render_slug, '', 'range' );
if ( ! empty($this->props['zoom_icon_bg']) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .dge-overlay-lightbox',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['zoom_icon_bg'] ) )
) );
}
if ( ! empty($this->props['zoom_icon_color']) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .dge-overlay-lightbox',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['zoom_icon_color'] ) )
) );
}
// Link icon font size.
$link_icon_size = et_pb_responsive_options()->get_property_values( $this->props, 'link_icon_size' );
et_pb_responsive_options()->generate_responsive_css( $link_icon_size, '%%order_class%% .el-justified-gallery-item .dge-overlay-link', 'font-size', $render_slug, '', 'range' );
if ( ! empty($this->props['link_icon_bg']) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .dge-overlay-link',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['link_icon_bg'] ) )
) );
}
if ( ! empty($this->props['link_icon_color']) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el-justified-gallery-item .dge-overlay-link',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['link_icon_color'] ) )
) );
}
}
}
if ( 'lightbox' === $click_trigger || 'zoom_n_link' === $click_trigger ) {
if ( ! empty( $this->props['meta_background_color'] ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-bottom-bar',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['meta_background_color'] ) )
) );
}
if ( ! empty( $this->props['lightbox_background_color'] ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox.mfp-bg',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['lightbox_background_color'] ) )
) );
}
if ( ! empty( $this->props['lightbox_close_icon_color'] ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-close',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['lightbox_close_icon_color'] ) )
) );
}
if ( ! empty( $this->props['lightbox_arrows_color'] ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-arrow:after',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['lightbox_arrows_color'] ) )
) );
}
if ( 'none' !== $this->props['lightbox_effect'] ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-container, %%order_class%%_lightbox.mfp-bg, %%order_class%%_lightbox.mfp-wrap .mfp-content',
'declaration' => sprintf( 'transition-duration: %1$sms;', absint( $this->props['lightbox_transition_duration'] ) )
) );
}
$lightbox_title_and_caption_style = $this->props['lightbox_title_and_caption_style'];
if ( 'below_image' === $lightbox_title_and_caption_style ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-bottom-bar, %%order_class%%_lightbox.mfp-img-mobile .mfp-bottom-bar',
'declaration' => 'bottom: auto; top: 100%;',
) );
}
}
if ( 'on' === $enable_load_more && 'number' === $pagination_type ) {
$this->generate_styles( array(
'base_attr_name' => 'pagination_link_background_color',
'selector' => '%%order_class%% .el_masonry_gallery_pagination li a',
'hover_selector' => '%%order_class%% .el_masonry_gallery_pagination li a:hover',
'css_property' => 'background-color',
'render_slug' => $render_slug,
'type' => 'color',
) );
$this->generate_styles( array(
'base_attr_name' => 'pagination_link_color',
'selector' => '%%order_class%% .el_masonry_gallery_pagination li a',
'hover_selector' => '%%order_class%% .el_masonry_gallery_pagination li a:hover',
'css_property' => 'color',
'render_slug' => $render_slug,
'type' => 'color',
) );
$this->generate_styles( array(
'base_attr_name' => 'active_pagination_link_background_color',
'selector' => '%%order_class%% .el_masonry_gallery_pagination li.active a',
'hover_selector' => '%%order_class%% .el_masonry_gallery_pagination li.active a:hover',
'css_property' => 'background-color',
'render_slug' => $render_slug,
'type' => 'color',
) );
$this->generate_styles( array(
'base_attr_name' => 'active_pagination_link_color',
'selector' => '%%order_class%% .el_masonry_gallery_pagination li.active a',
'hover_selector' => '%%order_class%% .el_masonry_gallery_pagination li.active a:hover',
'css_property' => 'color',
'render_slug' => $render_slug,
'type' => 'color',
) );
}
// Wrap settings to use on js.
$wrap_settings = array(
'column_spacing' => $this->props['column_spacing'],
'row_height' => $this->props['row_height'],
'lastrow_align' => $this->props['lastrow_align'],
'show_title' => $show_title,
'show_caption' => $show_caption,
'click_trigger' => $click_trigger,
'show_overlay' => $show_overlay,
'item_icon' => $this->props['overlay_icon'],
);
if ( 'lightbox' === $click_trigger || 'zoom_n_link' === $click_trigger ) {
$wrap_settings['lightbox_effect'] = $this->props['lightbox_effect'];
$wrap_settings['enable_navigation'] = $this->props['enable_navigation'];
$wrap_settings['lightbox_transition_duration'] = $this->props['lightbox_transition_duration'];
}
$output = sprintf(
'',
$gallery_items,
$gallery_filter,
$load_more_button,
_wp_specialchars( wp_json_encode( $wrap_settings ), ENT_QUOTES, 'UTF-8', true )
);
// $options = array(
// 'normal' => array(
// 'category_bg' => "{$this->main_css_element} .dge-justified-gallery-filter li a",
// 'active_category_bg' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a",
// ),
// 'hover' => array(
// 'category_bg' => "{$this->main_css_element} .dge-justified-gallery-filter li:not(.active) a:hover",
// 'active_category_bg' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a:hover",
// ),
// );
// $this->process_custom_background( $render_slug, $options );
$args = array(
'render_slug' => $render_slug,
'props' => $this->props,
'fields' => $this->fields_unprocessed,
'module' => $this,
'backgrounds' => array(
'category_bg' => array(
'normal' => "{$this->main_css_element} .dge-justified-gallery-filter li a",
'hover' => "{$this->main_css_element} .dge-justified-gallery-filter li:not(.active) a:hover",
),
'active_category_bg' => array(
'normal' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a",
'hover' => "{$this->main_css_element} .dge-justified-gallery-filter li.active a:hover",
)
),
);
DiviGalleryExtendedHelper::process_background( $args );
$fields = array( 'gallery_item_margin_padding' );
DiviGalleryExtendedHelper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );
return et_core_intentionally_unescaped( $output, 'html' );
}
public function el_builder_processed_range_value( $result, $range, $range_string ) {
if ( false !== strpos( $result, '0calc' ) ) {
return $range;
}
return $result;
}
/* *****
// Moved to healper file.
public function process_custom_background( $function_name, $options ) {
$normal_fields = $options['normal'];
foreach ( $normal_fields as $option_name => $element ) {
$css_element = $element;
$css_element_processed = $element;
if ( is_array( $element ) ) {
$css_element_processed = implode( ', ', $element );
}
// Place to store processed background. It will be compared with the smaller device
// background processed value to avoid rendering the same styles.
$processed_background_color = '';
$processed_background_image = '';
$processed_background_blend = '';
// Store background images status because the process is extensive.
$background_image_status = array(
'desktop' => false,
'tablet' => false,
'phone' => false,
);
// Background Options Styling.
foreach ( et_pb_responsive_options()->get_modes() as $device ) {
$background_base_name = $option_name;
$background_prefix = "{$option_name}_";
$background_style = '';
$is_desktop = 'desktop' === $device;
$suffix = ! $is_desktop ? "_{$device}" : '';
$background_color_style = '';
$background_image_style = '';
$background_images = array();
$has_background_color_gradient = false;
$has_background_image = false;
$has_background_gradient_and_image = false;
$is_background_color_gradient_disabled = false;
$is_background_image_disabled = false;
$background_color_gradient_overlays_image = 'off';
// Ensure responsive is active.
if ( ! $is_desktop && ! et_pb_responsive_options()->is_responsive_enabled( $this->props, "{$option_name}_color" ) ) {
continue;
}
// A. Background Gradient.
$use_background_color_gradient = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}use_color_gradient", $device, $background_base_name, $this->fields_unprocessed );
if ( 'on' === $use_background_color_gradient ) {
$background_color_gradient_overlays_image = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_overlays_image{$suffix}", '', true );
$gradient_properties = array(
'type' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_type{$suffix}", '', true ),
'direction' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_direction{$suffix}", '', true ),
'radial_direction' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_direction_radial{$suffix}", '', true ),
'color_start' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_start{$suffix}", '', true ),
'color_end' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_end{$suffix}", '', true ),
'start_position' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_start_position{$suffix}", '', true ),
'end_position' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_end_position{$suffix}", '', true ),
);
// Save background gradient into background images list.
$background_images[] = $this->get_gradient( $gradient_properties );
// Flag to inform BG Color if current module has Gradient.
$has_background_color_gradient = true;
} else if ( 'off' === $use_background_color_gradient ) {
$is_background_color_gradient_disabled = true;
}
// B. Background Image.
$background_image = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}image", $device, $background_base_name, $this->fields_unprocessed );
$parallax = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}parallax{$suffix}", 'off' );
// BG image and parallax status.
$is_background_image_active = '' !== $background_image && 'on' !== $parallax;
$background_image_status[ $device ] = $is_background_image_active;
if ( $is_background_image_active ) {
// Flag to inform BG Color if current module has Image.
$has_background_image = true;
// Check previous BG image status. Needed to get the correct value.
$is_prev_background_image_active = true;
if ( ! $is_desktop ) {
$is_prev_background_image_active = 'tablet' === $device ? $background_image_status['desktop'] : $background_image_status['tablet'];
}
// Size.
$background_size_default = ET_Builder_Element::$_->array_get( $this->fields_unprocessed, "{$background_prefix}size.default", '' );
$background_size = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}size{$suffix}", $background_size_default, ! $is_prev_background_image_active );
if ( '' !== $background_size ) {
$background_style .= sprintf(
'background-size: %1$s; ',
esc_html( $background_size )
);
}
// Position.
$background_position_default = ET_Builder_Element::$_->array_get( $this->fields_unprocessed, "{$background_prefix}position.default", '' );
$background_position = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}position{$suffix}", $background_position_default, ! $is_prev_background_image_active );
if ( '' !== $background_position ) {
$background_style .= sprintf(
'background-position: %1$s; ',
esc_html( str_replace( '_', ' ', $background_position ) )
);
}
// Repeat.
$background_repeat_default = ET_Builder_Element::$_->array_get( $this->fields_unprocessed, "{$background_prefix}repeat.default", '' );
$background_repeat = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}repeat{$suffix}", $background_repeat_default, ! $is_prev_background_image_active );
if ( '' !== $background_repeat ) {
$background_style .= sprintf(
'background-repeat: %1$s; ',
esc_html( $background_repeat )
);
}
// Blend.
$background_blend_default = ET_Builder_Element::$_->array_get( $this->fields_unprocessed, "{$background_prefix}blend.default", '' );
$background_blend = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}blend{$suffix}", $background_blend_default, ! $is_prev_background_image_active );
$background_blend_inherit = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}blend{$suffix}", '', true );
if ( '' !== $background_blend_inherit ) {
// Don't print the same image blend style.
if ( '' !== $background_blend ) {
$background_style .= sprintf(
'background-blend-mode: %1$s; ',
esc_html( $background_blend )
);
}
// Reset - If background has image and gradient, force background-color: initial.
if ( $has_background_color_gradient && $has_background_image && $background_blend_inherit !== $background_blend_default ) {
$has_background_gradient_and_image = true;
$background_color_style = 'initial';
$background_style .= 'background-color: initial; ';
}
$processed_background_blend = $background_blend;
}
// Only append background image when the image is exist.
$background_images[] = sprintf( 'url(%1$s)', esc_html( $background_image ) );
} else if ( '' === $background_image ) {
// Reset - If background image is disabled, ensure we reset prev background blend mode.
if ( '' !== $processed_background_blend ) {
$background_style .= 'background-blend-mode: normal; ';
$processed_background_blend = '';
}
$is_background_image_disabled = true;
}
if ( ! empty( $background_images ) ) {
// The browsers stack the images in the opposite order to what you'd expect.
if ( 'on' !== $background_color_gradient_overlays_image ) {
$background_images = array_reverse( $background_images );
}
// Set background image styles only it's different compared to the larger device.
$background_image_style = join( ', ', $background_images );
if ( $processed_background_image !== $background_image_style ) {
$background_style .= sprintf(
'background-image: %1$s !important;',
esc_html( $background_image_style )
);
}
} else if ( ! $is_desktop && $is_background_color_gradient_disabled && $is_background_image_disabled ) {
// Reset - If background image and gradient are disabled, reset current background image.
$background_image_style = 'initial';
$background_style .= 'background-image: initial !important;';
}
// Save processed background images.
$processed_background_image = $background_image_style;
// C. Background Color.
if ( ! $has_background_gradient_and_image ) {
// Background color `initial` was added by default to reset button background
// color when user disable it on mobile preview mode. However, it should
// be applied only when the background color is really disabled because user
// may use theme customizer to setup global button background color. We also
// need to ensure user still able to disable background color on mobile.
$background_color_enable = ET_Builder_Element::$_->array_get( $this->props, "{$background_prefix}enable_color{$suffix}", '' );
$background_color_initial = 'off' === $background_color_enable && ! $is_desktop ? 'initial' : '';
$background_color = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}color", $device, $background_base_name, $this->fields_unprocessed );
$background_color = '' !== $background_color ? $background_color : $background_color_initial;
$background_color_style = $background_color;
if ( '' !== $background_color && $processed_background_color !== $background_color ) {
$background_style .= sprintf(
'background-color: %1$s; ',
esc_html( $background_color )
);
}
}
// Save processed background color.
$processed_background_color = $background_color_style;
// Print background gradient and image styles.
if ( '' !== $background_style ) {
$background_style_attrs = array(
'selector' => $css_element_processed,
'declaration' => rtrim( $background_style ),
'priority' => $this->_style_priority,
);
// Add media query attribute to background style attrs.
if ( 'desktop' !== $device ) {
$current_media_query = 'tablet' === $device ? 'max_width_980' : 'max_width_767';
$background_style_attrs['media_query'] = ET_Builder_Element::get_media_query( $current_media_query );
}
ET_Builder_Element::set_style( $function_name, $background_style_attrs );
}
}
}
if ( isset( $options['hover'] ) ) {
$hover_fields = $options['hover'];
} else {
$hover_fields = $options['normal'];
foreach ( $hover_fields as &$value ) {
$value = $value . ':hover';
}
}
foreach ( $hover_fields as $option_name => $element ) {
$css_element = $element;
$css_element_processed = $element;
if ( is_array( $element ) ) {
$css_element_processed = implode( ', ', $element );
}
// Background Hover.
if ( et_builder_is_hover_enabled( "{$option_name}_color", $this->props ) ) {
$background_base_name = $option_name;
$background_prefix = "{$option_name}_";
$background_images_hover = array();
$background_hover_style = '';
$has_background_color_gradient_hover = false;
$has_background_image_hover = false;
$has_background_gradient_and_image_hover = false;
$is_background_color_gradient_hover_disabled = false;
$is_background_image_hover_disabled = false;
$background_color_gradient_overlays_image_desktop = et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_overlays_image", 'off', true );
$gradient_properties_desktop = array(
'type' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_type", '', true ),
'direction' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_direction", '', true ),
'radial_direction' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_direction_radial", '', true ),
'color_start' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_start", '', true ),
'color_end' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_end", '', true ),
'start_position' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_start_position", '', true ),
'end_position' => et_pb_responsive_options()->get_any_value( $this->props, "{$background_prefix}color_gradient_end_position", '', true ),
);
$background_color_gradient_overlays_image_hover = 'off';
// Background Gradient Hover.
// This part is little bit different compared to other hover implementation. In
// this case, hover is enabled on the background field, not on the each of those
// fields. So, built in function get_value() doesn't work in this case.
// Temporarily, we need to fetch the the value from get_raw_value().
$use_background_color_gradient_hover = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}use_color_gradient", 'hover', $background_base_name, $this->fields_unprocessed );
if ( 'on' === $use_background_color_gradient_hover ) {
// Desktop value as default.
$background_color_gradient_type_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'type', '' );
$background_color_gradient_direction_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'direction', '' );
$background_color_gradient_radial_direction_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'radial_direction', '' );
$background_color_gradient_color_start_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'color_start', '' );
$background_color_gradient_color_end_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'color_end', '' );
$background_color_gradient_start_position_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'start_position', '' );
$background_color_gradient_end_position_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'end_position', '' );
// Hover value.
$background_color_gradient_type_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_type", $this->props, $background_color_gradient_type_desktop );
$background_color_gradient_direction_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_direction", $this->props, $background_color_gradient_direction_desktop );
$background_color_gradient_direction_radial_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_direction_radial", $this->props, $background_color_gradient_radial_direction_desktop );
$background_color_gradient_start_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_start", $this->props, $background_color_gradient_color_start_desktop );
$background_color_gradient_end_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_end", $this->props, $background_color_gradient_color_end_desktop );
$background_color_gradient_start_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_start_position", $this->props, $background_color_gradient_start_position_desktop );
$background_color_gradient_end_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_end_position", $this->props, $background_color_gradient_end_position_desktop );
$background_color_gradient_overlays_image_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_overlays_image", $this->props, $background_color_gradient_overlays_image_desktop );
$has_background_color_gradient_hover = true;
$gradient_values_hover = array(
'type' => '' !== $background_color_gradient_type_hover ? $background_color_gradient_type_hover : $background_color_gradient_type_desktop,
'direction' => '' !== $background_color_gradient_direction_hover ? $background_color_gradient_direction_hover : $background_color_gradient_direction_desktop,
'radial_direction' => '' !== $background_color_gradient_direction_radial_hover ? $background_color_gradient_direction_radial_hover : $background_color_gradient_radial_direction_desktop,
'color_start' => '' !== $background_color_gradient_start_hover ? $background_color_gradient_start_hover : $background_color_gradient_color_start_desktop,
'color_end' => '' !== $background_color_gradient_end_hover ? $background_color_gradient_end_hover : $background_color_gradient_color_end_desktop,
'start_position' => '' !== $background_color_gradient_start_position_hover ? $background_color_gradient_start_position_hover : $background_color_gradient_start_position_desktop,
'end_position' => '' !== $background_color_gradient_end_position_hover ? $background_color_gradient_end_position_hover : $background_color_gradient_end_position_desktop,
);
$background_images_hover[] = $this->get_gradient( $gradient_values_hover );
} else if ( 'off' === $use_background_color_gradient_hover ) {
$is_background_color_gradient_hover_disabled = true;
}
// Background Image Hover.
// This part is little bit different compared to other hover implementation. In
// this case, hover is enabled on the background field, not on the each of those
// fields. So, built in function get_value() doesn't work in this case.
// Temporarily, we need to fetch the the value from get_raw_value().
$background_image_hover = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}image", 'hover', $background_base_name, $this->fields_unprocessed );
$parallax_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}parallax", $this->props );
if ( '' !== $background_image_hover && null !== $background_image_hover && 'on' !== $parallax_hover ) {
// Flag to inform BG Color if current module has Image.
$has_background_image_hover = true;
// Size.
$background_size_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}size", $this->props );
$background_size_desktop = ET_Builder_Element::$_->array_get( $this->props, "{$background_prefix}size", '' );
$is_same_background_size = $background_size_hover === $background_size_desktop;
if ( empty( $background_size_hover ) && ! empty( $background_size_desktop ) ) {
$background_size_hover = $background_size_desktop;
}
if ( ! empty( $background_size_hover ) && ! $is_same_background_size ) {
$background_hover_style .= sprintf(
'background-size: %1$s; ',
esc_html( $background_size_hover )
);
}
// Position.
$background_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}position", $this->props );
$background_position_desktop = ET_Builder_Element::$_->array_get( $this->props, "{$background_prefix}position", '' );
$is_same_background_position = $background_position_hover === $background_position_desktop;
if ( empty( $background_position_hover ) && ! empty( $background_position_desktop ) ) {
$background_position_hover = $background_position_desktop;
}
if ( ! empty( $background_position_hover ) && ! $is_same_background_position ) {
$background_hover_style .= sprintf(
'background-position: %1$s; ',
esc_html( str_replace( '_', ' ', $background_position_hover ) )
);
}
// Repeat.
$background_repeat_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}repeat", $this->props );
$background_repeat_desktop = ET_Builder_Element::$_->array_get( $this->props, "{$background_prefix}repeat", '' );
$is_same_background_repeat = $background_repeat_hover === $background_repeat_desktop;
if ( empty( $background_repeat_hover ) && ! empty( $background_repeat_desktop ) ) {
$background_repeat_hover = $background_repeat_desktop;
}
if ( ! empty( $background_repeat_hover ) && ! $is_same_background_repeat ) {
$background_hover_style .= sprintf(
'background-repeat: %1$s; ',
esc_html( $background_repeat_hover )
);
}
// Blend.
$background_blend_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}blend", $this->props );
$background_blend_default = ET_Builder_Element::$_->array_get( $this->fields_unprocessed, "{$background_prefix}blend.default", '' );
$background_blend_desktop = ET_Builder_Element::$_->array_get( $this->props, "{$background_prefix}blend", '' );
$is_same_background_blend = $background_blend_hover === $background_blend_desktop;
if ( empty( $background_blend_hover ) && ! empty( $background_blend_desktop ) ) {
$background_blend_hover = $background_blend_desktop;
}
if ( ! empty( $background_blend_hover ) ) {
if ( ! $is_same_background_blend ) {
$background_hover_style .= sprintf(
'background-blend-mode: %1$s; ',
esc_html( $background_blend_hover )
);
}
// Force background-color: initial;
if ( $has_background_color_gradient_hover && $has_background_image_hover && $background_blend_hover !== $background_blend_default ) {
$has_background_gradient_and_image_hover = true;
$background_hover_style .= 'background-color: initial !important;';
}
}
// Only append background image when the image exists.
$background_images_hover[] = sprintf( 'url(%1$s)', esc_html( $background_image_hover ) );
} else if ( '' === $background_image_hover ) {
$is_background_image_hover_disabled = true;
}
if ( ! empty( $background_images_hover ) ) {
// The browsers stack the images in the opposite order to what you'd expect.
if ( 'on' !== $background_color_gradient_overlays_image_hover ) {
$background_images_hover = array_reverse( $background_images_hover );
}
$background_hover_style .= sprintf(
'background-image: %1$s !important;',
esc_html( join( ', ', $background_images_hover ) )
);
} else if ( $is_background_color_gradient_hover_disabled && $is_background_image_hover_disabled ) {
$background_hover_style .= 'background-image: initial !important;';
}
// Background Color Hover.
if ( ! $has_background_gradient_and_image_hover ) {
$background_color_hover = et_pb_responsive_options()->get_inheritance_background_value( $this->props, "{$background_prefix}color", 'hover', $background_base_name, $this->fields_unprocessed );
$background_color_hover = '' !== $background_color_hover ? $background_color_hover : 'transparent';
if ( '' !== $background_color_hover ) {
$background_hover_style .= sprintf(
'background-color: %1$s !important; ',
esc_html( $background_color_hover )
);
}
}
// Print background hover gradient and image styles.
if ( '' !== $background_hover_style ) {
$background_hover_style_attrs = array(
'selector' => $css_element_processed,
'declaration' => rtrim( $background_hover_style ),
'priority' => $this->_style_priority,
);
ET_Builder_Element::set_style( $function_name, $background_hover_style_attrs );
}
}
}
}
***** */
}
new EL_JustifiedGallery();