* @link https://www.elicus.com/
* @copyright 2024 Elicus Technologies Private Limited
* @version 1.4.1
*/
class EL_DynamicMasonryGallery extends ET_Builder_Module {
public $slug = 'el_dynamic_masonry_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__( 'Dynamic Masonry 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(
'title_caption_container' => array(
'title' => esc_html__( 'Title & Caption Container', 'divi-gallery-extended' ),
),
'image_text' => array(
'title' => esc_html__( 'Text', 'divi-gallery-extended' ),
'sub_toggles' => array(
'title_text' => array(
'name' => 'Title',
),
'caption_text' => array(
'name' => 'Caption',
),
),
'tabbed_subtoggles' => true,
),
'category' => array(
'title' => esc_html__( 'Category', 'divi-gallery-extended' ),
'sub_toggles' => array(
'normal' => array(
'name' => 'Normal',
),
'active' => array(
'name' => 'Active',
),
),
'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,
),
'overlay' => array(
'title' => esc_html__( 'Overlay', 'divi-gallery-extended' ),
),
'pagination' => array(
'title' => esc_html__( 'Pagination', 'divi-gallery-extended' ),
),
'load_more' => array(
'title' => esc_html__( 'Load More Button', 'divi-gallery-extended' ),
),
),
),
);
}
public function get_advanced_fields_config() {
return array(
'fonts' => array(
'title' => array(
'label' => esc_html__( 'Title', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '18px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1em',
'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,
),
'header_level' => array(
'default' => 'h4',
),
'text_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_item_title",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'image_text',
'sub_toggle' => 'title_text',
),
'caption' => array(
'label' => esc_html__( 'Caption', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '14px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1em',
'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_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_item_caption",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'image_text',
'sub_toggle' => 'caption_text',
),
'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%% .el_masonry_gallery_filter_categories li:not(.el_masonry_gallery_active_category)",
),
'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%% .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category",
),
'toggle_slug' => 'category',
'sub_toggle' => 'active',
'tab_slug' => 'advanced',
'depends_on' => array( 'enable_filterable_gallery' ),
'depends_show_if' => 'on',
),
'lightbox_title' => array(
'label' => esc_html__( 'Title', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '18px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1em',
'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_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "{$this->main_css_element}_lightbox .el_masonry_gallery_item_title",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox_text',
'sub_toggle' => 'title_text',
),
'lightbox_caption' => array(
'label' => esc_html__( 'Caption', 'divi-gallery-extended' ),
'font_size' => array(
'default' => '14px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1em',
'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_align' => array(
'default' => 'left',
),
'css' => array(
'main' => "{$this->main_css_element}_lightbox .el_masonry_gallery_item_caption",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'lightbox_text',
'sub_toggle' => 'caption_text',
),
'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} .el_masonry_gallery_pagination_wrapper"
),
'tab_slug' => 'advanced',
'toggle_slug' => 'pagination',
),
),
'max_width' => array(
'css' => array(
'main' => '%%order_class%%',
'module_alignment' => '%%order_class%%',
),
),
'button' => array(
'loadmore_button' => array(
'label' => esc_html__( 'Load More Button', 'divi-gallery-extended' ),
'css' => array(
'main' => "{$this->main_css_element} .el-dynamic-gallery-load-more",
'alignment' => "{$this->main_css_element} .el_masonry_gallery_pagination_wrapper",
'important' => 'all',
),
'margin_padding' => array(
'custom_margin' => array(
'default_on_front' => '20px||||false|false',
),
'css' => array(
'margin' => "{$this->main_css_element} .el_masonry_gallery_pagination_wrapper",
'padding' => "{$this->main_css_element} .el-dynamic-gallery-load-more",
'important' => 'all',
),
),
'border_width' => array(
'default' => '2px',
'css' => array(
'main' => "{$this->main_css_element} .el-dynamic-gallery-load-more",
),
),
'box_shadow' => array(
'css' => array(
'main' => "{$this->main_css_element} .el-dynamic-gallery-load-more",
),
),
'depends_on' => array( 'pagination_type' ),
'depends_show_if' => 'load_more',
'tab_slug' => 'advanced',
'toggle_slug' => 'load_more',
),
),
'borders' => array(
'image' => array(
'label_prefix' => esc_html__( 'Image', 'divi-gallery-extended' ),
'css' => array(
'main' => array(
'border_radii' => "{$this->main_css_element} .el_masonry_gallery_item img, {$this->main_css_element} .el_masonry_gallery_item .et_overlay",
'border_styles' => "{$this->main_css_element} .el_masonry_gallery_item img",
),
'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} .el_masonry_gallery_filter_categories li",
'border_styles' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li",
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'normal',
),
'active_category' => array(
'label_prefix' => esc_html__( 'Active Category', 'divi-gallery-extended' ),
'css' => array(
'main' => array(
'border_radii' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category",
'border_styles' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category",
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'active',
),
'default' => array(
'css' => array(
'main' => array(
'border_styles' => '%%order_class%%',
'border_radii' => '%%order_class%%',
),
),
),
),
'box_shadow' => array(
'image' => array(
'label' => esc_html__( 'Image Box Shadow', 'divi-gallery-extended' ),
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_item img",
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'box_shadow',
),
'category' => array(
'label' => esc_html__( 'Category Box Shadow', 'divi-gallery-extended' ),
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'normal',
),
'active_category' => array(
'label' => esc_html__( 'Active Category Box Shadow', 'divi-gallery-extended' ),
'css' => array(
'main' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category",
),
'tab_slug' => 'advanced',
'toggle_slug' => 'category',
'sub_toggle' => 'active',
),
'default' => array(
'css' => array(
'main' => $this->main_css_element,
'important' => 'all',
),
),
),
'gallery_item_margin_padding' => array(
'title_caption_container' => array(
'margin_padding' => array(
'css' => array(
'use_margin' => false,
'padding' => '%%order_class%% .el_masonry_gallery_item .el_masonry_gallery_title_caption_wrapper',
'important' => 'all',
),
),
),
'overlay_zoom_link_icons' => array(
'margin_padding' => array(
'css' => array(
'use_margin' => false,
'padding' => '%%order_class%% .dge-overlay-with-icons .dge-overlay-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() {
$accent_color = et_get_option( 'accent_color', '#2ea3f2' );
return array_merge(
array(
'number_of_images' => array(
'label' => esc_html__( 'Number of Images', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => '20',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Choose how many images you would like to display. If pagination is enabled this will be treated as images per page.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
)
),
'offset_number' => array(
'label' => esc_html__( 'Offset Number', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => 0,
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Choose how many images you would like to skip. These images will not be shown in the gallery.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'gallery_order_by' => array(
'label' => esc_html__( 'Order by', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'date' => esc_html__( 'Date', 'divi-gallery-extended' ),
'modified' => esc_html__( 'Modified Date', 'divi-gallery-extended' ),
'title' => esc_html__( 'Title', 'divi-gallery-extended' ),
'name' => esc_html__( 'Slug', 'divi-gallery-extended' ),
'ID' => esc_html__( 'ID', 'divi-gallery-extended' ),
'rand' => esc_html__( 'Random', 'divi-gallery-extended' ),
'none' => esc_html__( 'None', 'divi-gallery-extended' ),
),
'default' => 'date',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can choose the order type of your images.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'gallery_order' => array(
'label' => esc_html__( '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' ),
),
'default' => 'DESC',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'show_if' => array(
'gallery_order_by' => array( 'date', 'modified', 'title', 'name', 'ID' ),
),
'description' => esc_html__( 'Here you can choose the order of your images.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data',
),
),
'include_categories' => array(
'label' => esc_html__( 'Select Categories', 'divi-gallery-extended' ),
'type' => 'categories',
'option_category' => 'basic_option',
'renderer_options' => array(
'use_terms' => true,
'term_name' => 'attachment-category',
'field_name' => 'el_include_attachment_categories',
),
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can choose which category images you would like to display. If you want to display all images, then leave it unchecked.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data'
)
),
'number_of_columns' => array(
'label' => esc_html__( 'Number Of Columns', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'1' => esc_html( '1' ),
'2' => esc_html( '2' ),
'3' => esc_html( '3' ),
'4' => esc_html( '4' ),
'5' => esc_html( '5' ),
'6' => esc_html( '6' ),
'7' => esc_html( '7' ),
'8' => esc_html( '8' ),
'9' => esc_html( '9' ),
'10' => esc_html( '10' ),
'11' => esc_html( '11' ),
'12' => esc_html( '12' ),
'13' => esc_html( '13' ),
'14' => esc_html( '14' ),
'15' => esc_html( '15' ),
),
'default' => '4',
'default_on_front' => '4',
'mobile_options' => true,
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can select the number of columns to display images.', 'divi-gallery-extended' ),
),
'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_unit' => 'px',
'fixed_range' => true,
'validate_unit' => true,
'mobile_options' => true,
'default' => '15px',
'default_on_front' => '15px',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Increase or decrease spacing between columns.', 'divi-gallery-extended' ),
),
'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' => 'medium',
'default_on_front' => 'medium',
'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',
),
),
'disable_lazy_loading' => array(
'label' => esc_html__( 'Disable Lazy Loading', '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',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Whether or not to lazy load images.', '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_data',
),
),
'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' ),
'computed_affects' => array(
'__gallery_data',
),
),
'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' ),
'computed_affects' => array(
'__gallery_data'
)
),
'active_category' => array(
'label' => esc_html__( 'Select Active Category', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => EL_DiviGalleryExtended::dge_get_taxonomies_options(),
'default' => 'all',
'default_on_front' => 'all',
'tab_slug' => 'general',
'show_if' => array(
'enable_filterable_gallery' => 'on',
),
'toggle_slug' => 'elements',
'description' => esc_html__( 'Here you can choose which category images you would like to display. If you want to display all images, then leave it unchecked.', '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' ),
),
'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' ),
'gallery' => esc_html__( 'Gallery Only', 'divi-gallery-extended' ),
'overlay' => esc_html__( 'Overlay', 'divi-gallery-extended' ),
'both' => esc_html__( 'Both Gallery and Lightbox', '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' ),
),
'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' ),
'gallery' => esc_html__( 'Gallery Only', 'divi-gallery-extended' ),
'overlay' => esc_html__( 'Overlay', 'divi-gallery-extended' ),
'both' => esc_html__( 'Both Gallery and Lightbox', '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' ),
),
'enable_lightbox' => array(
'label' => esc_html__( 'OnClick Trigger', 'divi-gallery-extended' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'None', 'divi-gallery-extended' ),
'on' => 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(
'enable_lightbox' => 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' ),
),
'isotope_transition_duration' => array(
'label' => esc_html__( 'Images Transition Duration', 'divi-gallery-extended' ),
'type' => 'range',
'option_category' => 'layout',
'range_settings' => array(
'min' => '0',
'max' => '1000',
'step' => '1',
),
'unitless' => true,
'fixed_range' => true,
'mobile_options' => true,
'default' => '400',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Increase or decrease tranisition time in milliseconds between images displacement.', 'divi-gallery-extended' ),
),
'no_gallery_text' => array(
'label' => esc_html__( 'Empty gallery text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => esc_html__( 'No Gallery Found!!', 'divi-gallery-extended' ),
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can set custom text for the message appears when there is no gallery found.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data'
)
),
'lightbox_effect' => array(
'label' => esc_html__( 'Lighbox 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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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_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 or not to show images in lightbox.', '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',
),
'show_if_not' => array(
'enable_lightbox' => 'zoom_n_link'
),
'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_pagination' => array(
'label' => esc_html__( 'Show 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__( 'Show Pagination or not.', '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' => 'number',
'default_on_front' => 'number',
'show_if' => array(
'show_pagination' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can select the display style of title and caption in lightbox.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data'
)
),
'load_more_text' => array(
'label' => esc_html__( 'Load More Button Text', 'divi-gallery-extended' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => 'Load More',
'show_if' => array(
'show_pagination' => 'on',
'pagination_type' => 'load_more',
),
'tab_slug' => 'general',
'toggle_slug' => 'pagination',
'description' => esc_html__( 'Here you can define Next Link text in numbered pagination.', 'divi-gallery-extended' ),
'computed_affects' => array(
'__gallery_data'
)
),
'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(
'show_pagination' => '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(
'show_pagination' => '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(
'show_pagination' => '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' ),
),
'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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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(
'enable_lightbox' => array( 'on', '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' ),
),
'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(
'enable_lightbox' => '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__( '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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(
'enable_lightbox' => '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' ),
),
'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' ),
),
'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(
'show_pagination' => '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(
'show_pagination' => '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(
'show_pagination' => '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(
'show_pagination' => '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' ),
),
'title_caption_container_custom_padding' => array(
'label' => esc_html__( 'Title & Caption Container Padding', 'divi-ajax-search' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'default' => '||||true|true',
'tab_slug' => 'advanced',
'toggle_slug' => 'title_caption_container',
'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' ),
),
'title_caption_container_bg' => array(
'label' => esc_html__( 'Title & Caption Container Background', 'divi-gallery-extended' ),
'type' => 'color-alpha',
'custom_color' => true,
'hover' => 'tabs',
'tab_slug' => 'advanced',
'toggle_slug' => 'title_caption_container',
'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_DynamicMasonryGallery', 'get_gallery' ),
'computed_depends_on' => array(
'number_of_images',
'offset_number',
'gallery_order_by',
'gallery_order',
'include_categories',
'active_category',
'image_size',
'no_gallery_text',
'enable_filterable_gallery',
'enable_lightbox',
'show_all_filter',
'all_images_text',
'enable_overlay',
'overlay_icon',
'show_pagination',
'pagination_type',
'load_more_text',
'title_level',
),
),
),
$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 get_gallery( $args = array(), $conditional_tags = array(), $current_page = array() ) {
$defaults = array(
'number_of_images' => '20',
'offset_number' => '0',
'gallery_order_by' => 'date',
'gallery_order' => 'DESC',
'include_categories' => '',
'active_category' => '',
'image_size' => 'medium',
'no_gallery_text' => 'No Gallery Found!!',
'enable_filterable_gallery' => 'off',
'show_all_filter' => 'on',
'all_images_text' => 'All',
'enable_lightbox' => 'off',
'enable_overlay' => 'off',
'overlay_icon' => '',
'show_pagination' => 'off',
'pagination_type' => 'number',
'load_more_text' => esc_html__( 'Load More', 'divi-gallery-extended' ),
'title_level' => 'h4',
);
$args = wp_parse_args( $args, $defaults );
foreach ( $defaults as $key => $default ) {
${$key} = esc_html( et_()->array_get( $args, $key, $default ) );
}
$zoom_icon_code = '||fa||900';
$link_icon_code = '||fa||900';
$processed_title_level = et_pb_process_header_level( $title_level, 'h4' );
$processed_title_level = esc_html( $processed_title_level );
$number_of_images = ( 0 === $number_of_images || '' === $number_of_images ) ? 20 : (int) $number_of_images;
$args = array(
'post_type' => 'attachment',
'posts_per_page' => $number_of_images,
'post_status' => 'any',
'orderby' => sanitize_text_field( $gallery_order_by ),
'order' => sanitize_text_field( $gallery_order ),
'offset' => intval( $offset_number ),
'post_mime_type' => 'image/jpeg,image/gif,image/jpg,image/png,image/webp',
);
if ( '' !== $include_categories ) {
$include_categories = array_map( 'intval', explode( ',', $include_categories ) );
if ( 'on' === $enable_filterable_gallery ) {
$check_category = ( ! empty( $active_category ) && 'all' !== $active_category ) ? array( intval( $active_category ) ) : $include_categories;
} else {
$check_category = $include_categories;
}
$args['tax_query'] = array( array(
'taxonomy' => 'attachment-category',
'field' => 'term_id',
'terms' => $check_category,
'operator' => 'IN',
) );
$terms = get_terms( array(
'taxonomy' => 'attachment-category',
'include' => $include_categories,
'hide_empty' => true,
) );
if ( $terms && ! is_wp_error( $terms ) && ! empty( $terms ) ) {
$include_categories = array();
foreach ( $terms as $term ) {
$include_categories[$term->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$term->name
);
}
}
} else {
if ( 'on' === $enable_filterable_gallery ) {
$check_category = ( ! empty( $active_category ) && 'all' !== $active_category ) ? array( intval( $active_category ) ) : '';
if ( $check_category ) {
$args['tax_query'] = array( array(
'taxonomy' => 'attachment-category',
'field' => 'term_id',
'terms' => $check_category,
'operator' => 'IN',
) );
}
}
}
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
$image_ids = wp_list_pluck( $query->posts, 'ID' );
if ( 'on' === $enable_overlay ) {
$overlay_output = ET_Builder_Module_Helper_Overlay::render(
array( 'icon' => $overlay_icon )
);
}
$allowed_tags = array(
'div' => array(
'class' => true,
'id' => true,
),
'p' => array(
'class' => true,
'id' => true,
),
'h1' => array(
'class' => true,
'id' => true,
),
'h2' => array(
'class' => true,
'id' => true,
),
'h3' => array(
'class' => true,
'id' => true,
),
'h4' => array(
'class' => true,
'id' => true,
),
'h5' => array(
'class' => true,
'id' => true,
),
'h6' => array(
'class' => true,
'id' => true,
),
'ul' => array(
'class' => true,
'id' => true,
),
'ol' => array(
'class' => true,
'id' => true,
),
'li' => array(
'class' => true,
'id' => true,
),
'a' => array(
'href' => true,
'title' => true,
'class' => true,
'id' => true,
'target' => true,
'rel' => true,
),
'abbr' => array(
'title' => true,
),
'acronym' => array(
'title' => true,
),
'b' => array(),
'blockquote' => array(
'cite' => true,
),
'cite' => array(),
'code' => array(),
'del' => array(
'datetime' => true,
),
'em' => array(),
'i' => array(),
'q' => array(
'cite' => true,
),
's' => array(),
'strike' => array(),
'strong' => array(),
'span' => array(
'class' => true,
'id' => true,
),
);
$gallery_items = '';
$gallery_item_class = 'el_masonry_gallery_item_page_1';
$attachment_categories = array();
foreach ( $image_ids as $image_id ) {
$image_link = get_post_meta( intval( $image_id ), 'dge_attachment_link', true );
$title = '';
if ( '' !== trim( wptexturize( get_the_title( $image_id ) ) ) ) {
$title = sprintf(
'<%1$s class="el_masonry_gallery_item_title">%2$s',
$processed_title_level,
esc_html( wptexturize( get_the_title( $image_id ) ) )
);
}
$caption = '';
if ( '' !== trim( wp_get_attachment_caption( $image_id ) ) ) {
$caption = sprintf(
'%2$s
',
$processed_title_level,
wp_kses( wp_get_attachment_caption( $image_id ), $allowed_tags )
);
}
$title_and_caption = '';
if ( '' !== $title || '' !== $caption ) {
$title_and_caption = sprintf(
'%1$s %2$s
',
et_core_intentionally_unescaped( $title, 'html' ),
et_core_intentionally_unescaped( $caption, 'html' )
);
}
$categories = get_the_terms( $image_id, 'attachment-category' );
$image_classes = array(
"el_dynamic_masonry_gallery_module__image",
"attachment-$image_size",
"size-$image_size",
"no-lazyload",
"skip-lazy",
);
$image_atts = array();
if ( $categories && ! is_wp_error( $categories ) && ! empty( $categories ) ) {
if ( 'on' !== $show_pagination ) {
foreach ( $categories as $category ) {
$attachment_categories[$category->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$category->name
);
}
}
$categories_ids = wp_list_pluck( $categories, 'term_id' );
$categories = wp_list_pluck( $categories, 'slug' );
$image_classes = array_merge(
$image_classes,
$categories
);
$image_atts['data-categories'] = implode( ',', $categories_ids );
}
$image_atts['class'] = implode( ' ', $image_classes );
if ( 'on' === $enable_overlay && 'zoom_n_link' === $enable_lightbox ) {
$link_icon = '';
if ( ! empty( $image_link ) ) {
$link_icon = sprintf(
'%2$s',
esc_url( $image_link ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) ),
'on' === $link_target ? ' target="_blank"' : ''
);
}
$overlay_output = sprintf(
'
%1$s
%2$s
',
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
$link_icon,
esc_url( wp_get_attachment_url( intval( $image_id ) ) )
);
}
$gallery_items .= sprintf(
'',
et_core_intentionally_unescaped( wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false, $image_atts ), 'html' ),
isset( $overlay_output ) ? $overlay_output : '',
et_core_intentionally_unescaped( $title_and_caption, 'html' ),
esc_attr( $gallery_item_class )
);
}
$filter = '';
if ( 'on' === $enable_filterable_gallery ) {
$all_images_text = '' === $all_images_text ?
esc_html__( 'All', 'divi-gallery-extended' ) :
sprintf(
esc_html__( '%s', 'divi-gallery-extended' ),
esc_html( $all_images_text )
);
$categories = '';
if ( 'on' === $show_all_filter ) {
$categories = sprintf(
'%1$s',
esc_html( $all_images_text ),
( empty($active_category) || 'all' === $active_category ) ? 'el_masonry_gallery_active_category' : ''
);
}
$terms = get_terms( array(
'orderby' => 'term_order',
'taxonomy' => 'attachment-category',
'hide_empty' => true,
) );
if ( $terms && ! is_wp_error( $terms ) && ! empty( $terms ) ) {
$all_categories = array();
foreach ( $terms as $term ) {
$all_categories[$term->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$term->name
);
}
if ( ! empty( $include_categories ) ) {
$attachment_categories = array_intersect( $include_categories, $all_categories );
} else {
$attachment_categories = $all_categories;
}
}
if ( ! empty ( $attachment_categories ) && 1 < count( $attachment_categories ) ) {
foreach ( $attachment_categories as $term_id => $name ) {
$categories .= sprintf(
'%2$s',
esc_attr( $term_id ),
esc_html( $name ),
( intval($active_category) === $term_id ) ? 'el_masonry_gallery_active_category' : ''
);
}
$filter = sprintf(
'',
$categories,
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) )
);
}
}
if ( 'on' === $show_pagination ) {
if ( -1 === $args['posts_per_page'] ) {
$total_pages = 1;
} else if ( '' !== $args['offset'] && ! empty( $args['offset'] ) ) {
$total_pages = intval( ceil( ( $query->found_posts - $args['offset'] ) / $args['posts_per_page'] ) );
} else {
$total_pages = intval( ceil( $query->found_posts / $args['posts_per_page'] ) );
}
if ( 'load_more' === $pagination_type ) {
$pagination = sprintf(
'',
$total_pages,
$query->found_posts,
esc_html( $load_more_text )
);
} else {
$pagination = sprintf(
'',
$total_pages,
esc_attr( $query->found_posts ),
isset( $args['show_prev_next'] ) ? $args['show_prev_next'] : 'on',
isset( $args['prev_text'] ) ? $args['prev_text'] : esc_html__( 'Prev', 'divi-gallery-extended' ),
isset( $args['next_text'] ) ? $args['next_text'] : esc_html__( 'Next', 'divi-gallery-extended' )
);
}
}
$output = sprintf(
'%1$s
%3$s',
$filter,
$gallery_items,
'on' === $show_pagination ? $pagination : ''
);
} else {
$output = sprintf( '%1$s
', esc_html( $no_gallery_text ) );
}
return $output;
}
public function render( $attrs, $content, $render_slug ) {
$multi_view = et_pb_multi_view_options( $this );
$number_of_images = $this->props['number_of_images'];
$offset_number = $this->props['offset_number'];
$gallery_order_by = $this->props['gallery_order_by'];
$gallery_order = $this->props['gallery_order'];
$include_categories = $this->props['include_categories'];
$image_size = $this->props['image_size'];
$disable_lazy_loading = $this->props['disable_lazy_loading'];
$enable_filterable_gallery = $this->props['enable_filterable_gallery'];
$show_all_filter = $this->props['show_all_filter'];
$all_images_text = $this->props['all_images_text'];
$enable_lightbox = $this->props['enable_lightbox'];
$link_target = $this->props['link_target'];
$lightbox_effect = $this->props['lightbox_effect'];
$enable_navigation = $this->props['enable_navigation'];
$enable_overlay = $this->props['enable_overlay'];
$show_title = $this->props['show_title'];
$title_area = $this->props['title_area'];
$show_caption = $this->props['show_caption'];
$caption_area = $this->props['caption_area'];
$number_of_columns = $this->props['number_of_columns'];
$column_spacing = $this->props['column_spacing'];
$overlay_icon = $this->props['overlay_icon'];
$overlay_icon_color = $this->props['overlay_icon_color'];
$overlay_color = $this->props['overlay_color'];
$meta_background_color = $this->props['meta_background_color'];
$lightbox_background_color = $this->props['lightbox_background_color'];
$lightbox_close_icon_color = $this->props['lightbox_close_icon_color'];
$lightbox_arrows_color = $this->props['lightbox_arrows_color'];
$show_pagination = $this->props['show_pagination'];
$active_category = $this->props['active_category'];
$title_level = $this->props['title_level'];
$processed_title_level = et_pb_process_header_level( $title_level, 'h4' );
$processed_title_level = esc_html( $processed_title_level );
$zoom_icon_code = '||fa||900';
$link_icon_code = '||fa||900';
$number_of_images = ( 0 === $number_of_images ) ? -1 : (int) $number_of_images;
$args = array(
'post_type' => 'attachment',
'posts_per_page' => $number_of_images,
'post_status' => 'any',
'orderby' => sanitize_text_field( $gallery_order_by ),
'order' => sanitize_text_field( $gallery_order ),
'offset' => absint( $offset_number ),
'post_mime_type' => 'image/jpeg,image/gif,image/jpg,image/png,image/webp',
);
if ( '' !== $include_categories ) {
$include_categories = array_map( 'intval', explode( ',', $include_categories ) );
if ( 'on' === $enable_filterable_gallery ) {
$check_category = ( ! empty( $active_category ) && 'all' !== $active_category ) ? array( intval( $active_category ) ) : $include_categories;
} else {
$check_category = $include_categories;
}
$args['tax_query'] = array( array(
'taxonomy' => 'attachment-category',
'field' => 'term_id',
'terms' => $check_category,
'operator' => 'IN',
) );
$terms = get_terms( array(
'taxonomy' => 'attachment-category',
'include' => $include_categories,
'hide_empty' => true,
) );
if ( $terms && ! is_wp_error( $terms ) && ! empty( $terms ) ) {
$include_categories = array();
foreach ( $terms as $term ) {
$include_categories[$term->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$term->name
);
}
}
} else {
if ( 'on' === $enable_filterable_gallery ) {
$check_category = ( ! empty( $active_category ) && 'all' !== $active_category ) ? array( intval( $active_category ) ) : '';
if ( $check_category ) {
$args['tax_query'] = array( array(
'taxonomy' => 'attachment-category',
'field' => 'term_id',
'terms' => $check_category,
'operator' => 'IN',
) );
}
}
}
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
$image_ids = wp_list_pluck( $query->posts, 'ID' );
wp_enqueue_script( 'elicus-isotope-script' );
wp_enqueue_script( 'elicus-images-loaded-script' );
if ( 'on' === $enable_lightbox || 'zoom_n_link' === $enable_lightbox ) {
wp_enqueue_script('magnific-popup');
wp_enqueue_style('magnific-popup');
}
if ( 'on' === $enable_overlay ) {
$overlay_output = ET_Builder_Module_Helper_Overlay::render(
array( 'icon' => $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%% .et_overlay:before',
'processor' => array(
'ET_Builder_Module_Helper_Style_Processor',
'process_extended_icon',
),
) );
}
}
$gallery_items = '';
$gallery_item_class = 'el_masonry_gallery_item_page_1';
$attachment_categories = array();
$allowed_tags = array(
'div' => array(
'class' => true,
'id' => true,
),
'p' => array(
'class' => true,
'id' => true,
),
'h1' => array(
'class' => true,
'id' => true,
),
'h2' => array(
'class' => true,
'id' => true,
),
'h3' => array(
'class' => true,
'id' => true,
),
'h4' => array(
'class' => true,
'id' => true,
),
'h5' => array(
'class' => true,
'id' => true,
),
'h6' => array(
'class' => true,
'id' => true,
),
'ul' => array(
'class' => true,
'id' => true,
),
'ol' => array(
'class' => true,
'id' => true,
),
'li' => array(
'class' => true,
'id' => true,
),
'a' => array(
'href' => true,
'title' => true,
'class' => true,
'id' => true,
'target' => true,
'rel' => true,
),
'abbr' => array(
'title' => true,
),
'acronym' => array(
'title' => true,
),
'b' => array(),
'blockquote' => array(
'cite' => true,
),
'cite' => array(),
'code' => array(),
'del' => array(
'datetime' => true,
),
'em' => array(),
'i' => array(),
'q' => array(
'cite' => true,
),
's' => array(),
'strike' => array(),
'strong' => array(),
'span' => array(
'class' => true,
'id' => true,
),
);
foreach ( $image_ids as $image_id ) {
$image_link = get_post_meta( intval( $image_id ), 'dge_attachment_link', true );
$title = '';
if ( 'on' === $show_title && '' !== trim( wptexturize( get_the_title( $image_id ) ) ) ) {
$title_text = wp_kses( get_the_title( $image_id ), $allowed_tags );
if ( 'link' === $enable_lightbox && 'overlay' === $title_area ) {
if ( '' !== $image_link ) {
$abs_link = sprintf(
'',
esc_url( $image_link ),
'on' === $link_target ? ' target="_blank"' : ''
);
$title_text .= $abs_link;
}
}
$title = $multi_view->render_element( array(
'tag' => $processed_title_level,
'content' => $title_text,
'attrs' => array( 'class' => 'el_masonry_gallery_item_title' ),
) );
}
$caption = '';
if ( 'on' === $show_caption && '' !== trim( wp_get_attachment_caption( $image_id ) ) ) {
$caption_text = wp_kses( wp_get_attachment_caption( $image_id ), $allowed_tags );
if ( 'link' === $enable_lightbox && 'overlay' === $caption_area ) {
if ( '' !== $image_link ) {
$abs_link = sprintf(
'',
esc_url( $image_link ),
'on' === $link_target ? ' target="_blank"' : ''
);
$caption_text .= $abs_link;
}
}
$caption = $multi_view->render_element( array(
'tag' => 'div',
'content' => $caption_text,
'attrs' => array( 'class' => 'el_masonry_gallery_item_caption', ),
) );
}
$title_and_caption = '';
if ( '' !== $title || '' !== $caption ) {
$title_and_caption = sprintf(
'%1$s %2$s
',
et_core_intentionally_unescaped( $title, 'html' ),
et_core_intentionally_unescaped( $caption, 'html' )
);
}
$categories = get_the_terms( $image_id, 'attachment-category' );
$image_classes = array(
"el_dynamic_masonry_gallery_module__image",
"attachment-$image_size",
"size-$image_size",
);
if ( 'on' === $disable_lazy_loading ) {
array_push( $image_classes, 'no-lazyload', 'skip-lazy' );
}
$image_atts = array();
if ( $categories && ! is_wp_error( $categories ) && ! empty( $categories ) ) {
if ( 'on' !== $show_pagination ) {
foreach ( $categories as $category ) {
$attachment_categories[$category->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$category->name
);
}
}
$categories_ids = wp_list_pluck( $categories, 'term_id' );
$categories = wp_list_pluck( $categories, 'slug' );
$image_classes = array_merge(
$image_classes,
$categories
);
$image_atts['data-categories'] = implode( ',', $categories_ids );
}
$image_atts['class'] = implode( ' ', $image_classes );
if ( 'on' === $enable_overlay && 'zoom_n_link' === $enable_lightbox ) {
$link_icon = '';
if ( ! empty( $image_link ) ) {
$link_icon = sprintf(
'%2$s',
esc_url( $image_link ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) ),
'on' === $link_target ? ' target="_blank"' : ''
);
}
$overlay_output = sprintf(
'
%1$s
%2$s
',
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
$link_icon,
esc_url( wp_get_attachment_url( intval( $image_id ) ) )
);
}
if ( 'on' === $enable_lightbox ) {
$gallery_items .= sprintf(
'',
et_core_intentionally_unescaped( wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false, $image_atts ), 'html' ),
isset( $overlay_output ) ? $overlay_output : '',
et_core_intentionally_unescaped( $title_and_caption, 'html' ),
esc_url( wp_get_attachment_url( intval( $image_id ) ) ),
esc_attr( $gallery_item_class )
);
} elseif ( 'link' === $enable_lightbox ) {
if ( '' !== $image_link ) {
$image = sprintf(
'%3$s',
esc_url( $image_link ),
'on' === $link_target ? ' target="_blank"' : '',
wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false, $image_atts )
);
} else {
$image = wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false, $image_atts );
}
$gallery_items .= sprintf(
'',
$image,
isset( $overlay_output ) ? $overlay_output : '',
et_core_intentionally_unescaped( $title_and_caption, 'html' ),
esc_attr( $gallery_item_class )
);
} else {
$gallery_items .= sprintf(
'',
wp_get_attachment_image( intval( $image_id ), sanitize_text_field( $image_size ), false, $image_atts ),
isset( $overlay_output ) ? $overlay_output : '',
et_core_intentionally_unescaped( $title_and_caption, 'html' ),
esc_attr( $gallery_item_class )
);
}
}
$filter = '';
if ( 'on' === $enable_filterable_gallery ) {
$all_images_text = '' === $all_images_text ?
esc_html__( 'All', 'divi-gallery-extended' ) :
sprintf(
esc_html__( '%s', 'divi-gallery-extended' ),
esc_html( $all_images_text )
);
$categories = '';
if ( 'on' === $show_all_filter ) {
$categories = sprintf(
'%1$s',
esc_html( $all_images_text ),
( empty($active_category) || 'all' === $active_category ) ? 'el_masonry_gallery_active_category' : ''
);
}
$terms = get_terms( array(
'orderby' => 'term_order',
'taxonomy' => 'attachment-category',
'hide_empty' => true,
) );
if ( $terms && ! is_wp_error( $terms ) && ! empty( $terms ) ) {
$all_categories = array();
foreach ( $terms as $term ) {
$all_categories[$term->term_id] = sprintf(
esc_html__( '%1$s', 'divi-gallery-extended' ),
$term->name
);
}
if ( ! empty( $include_categories ) ) {
$attachment_categories = array_intersect( $include_categories, $all_categories );
} else {
$attachment_categories = $all_categories;
}
}
if ( ! empty ( $attachment_categories ) && 1 < count( $attachment_categories ) ) {
foreach ( $attachment_categories as $term_id => $name ) {
$categories .= sprintf(
'%2$s',
esc_attr( $term_id ),
esc_html( $name ),
( intval($active_category) === $term_id ) ? 'el_masonry_gallery_active_category' : ''
);
}
$data_props = array(
'number_of_images',
'offset_number',
'gallery_order_by',
'gallery_order',
'include_categories',
'image_size',
'enable_lightbox',
'link_target',
'enable_overlay',
'show_title',
'show_caption',
'title_area',
'caption_area',
'title_level',
);
$data_atts = $this->props_to_html_data_attrs( $data_props );
$filter = sprintf(
'',
$categories,
$data_atts,
esc_attr( et_pb_process_font_icon( $overlay_icon ) ),
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) )
);
}
}
if ( 'on' === $show_pagination ) {
wp_enqueue_script( 'twbs-pagination-script' );
$data_props = array(
'number_of_images',
'offset_number',
'gallery_order_by',
'gallery_order',
'include_categories',
'image_size',
'enable_lightbox',
'link_target',
'enable_overlay',
'overlay_icon',
'show_title',
'show_caption',
'title_area',
'caption_area',
'title_level',
);
if ( -1 === $args['posts_per_page'] ) {
$total_pages = 1;
} elseif ( '' !== $args['offset'] && ! empty( $args['offset'] ) ) {
$total_pages = intval( ceil( ( $query->found_posts - $args['offset'] ) / $args['posts_per_page'] ) );
} else {
$total_pages = intval( ceil( $query->found_posts / $args['posts_per_page'] ) );
}
$pagination_type = $this->props['pagination_type'];
if ( 'load_more' === $pagination_type ) {
$data_atts = $this->props_to_html_data_attrs( $data_props );
$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-dynamic-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,
) );
$pagination = sprintf(
'',
$total_pages,
esc_attr( et_pb_process_font_icon( $overlay_icon ) ),
$data_atts,
et_core_intentionally_unescaped( $load_more_button, 'html' ),
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) )
);
} else {
if ( 'on' === $this->props['show_prev_next'] ) {
array_push( $data_props, 'show_prev_next', 'prev_text', 'next_text' );
}
$data_atts = $this->props_to_html_data_attrs( $data_props );
$pagination = sprintf(
'',
$total_pages,
$data_atts,
esc_attr( et_pb_process_font_icon( $overlay_icon ) ),
esc_attr( et_pb_process_font_icon( $zoom_icon_code ) ),
esc_attr( et_pb_process_font_icon( $link_icon_code ) )
);
}
}
$data_props = array(
'enable_lightbox',
'lightbox_effect',
'enable_navigation',
'isotope_transition_duration',
);
if ( 'none' !== $this->props['lightbox_effect'] ) {
array_push( $data_props, 'lightbox_transition_duration' );
}
$data_atts = $this->props_to_html_data_attrs( $data_props );
$output = sprintf(
'%1$s
%3$s',
$filter,
$gallery_items,
'on' === $show_pagination ? $pagination : '',
$data_atts
);
if ( in_array( $enable_lightbox, array( 'on', 'link' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item img',
'declaration' => 'cursor: pointer;',
) );
}
$number_of_columns = et_pb_responsive_options()->get_property_values( $this->props, 'number_of_columns' );
$column_spacing = et_pb_responsive_options()->get_property_values( $this->props, 'column_spacing' );
$number_of_columns['tablet'] = '' !== $number_of_columns['tablet'] ? $number_of_columns['tablet'] : $number_of_columns['desktop'];
$number_of_columns['phone'] = '' !== $number_of_columns['phone'] ? $number_of_columns['phone'] : $number_of_columns['tablet'];
$column_spacing['tablet'] = '' !== $column_spacing['tablet'] ? $column_spacing['tablet'] : $column_spacing['desktop'];
$column_spacing['phone'] = '' !== $column_spacing['phone'] ? $column_spacing['phone'] : $column_spacing['tablet'];
$breakpoints = array( 'desktop', 'tablet', 'phone' );
$width = array();
foreach ( $breakpoints as $breakpoint ) {
if ( 1 === absint( $number_of_columns[$breakpoint] ) ) {
$width[$breakpoint] = '100%';
} else {
$divided_width = 100 / absint( $number_of_columns[$breakpoint] );
if ( 0.0 !== floatval( $column_spacing[$breakpoint] ) ) {
$gutter = floatval( ( floatval( $column_spacing[$breakpoint] ) * ( absint( $number_of_columns[$breakpoint] ) - 1 ) ) / absint( $number_of_columns[$breakpoint] ) );
$width[$breakpoint] = 'calc(' . $divided_width . '% - ' . $gutter . 'px)';
} else {
$width[$breakpoint] = $divided_width . '%';
}
}
}
et_pb_responsive_options()->generate_responsive_css( $width, '%%order_class%% .el_masonry_gallery_item', 'width', $render_slug, '', 'range' );
et_pb_responsive_options()->generate_responsive_css( $column_spacing, '%%order_class%% .el_masonry_gallery_item', array( 'margin-bottom' ), $render_slug, '', 'range' );
et_pb_responsive_options()->generate_responsive_css( $column_spacing, '%%order_class%% .el_masonry_gallery_item_gutter', 'width', $render_slug, '', 'range' );
if ( ! in_array( $title_area, array( 'gallery', 'overlay', 'both' ), true ) && ! in_array( $caption_area, array( 'gallery', 'overlay', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_title_caption_wrapper',
'declaration' => 'display: none;',
) );
} else {
if ( ! in_array( $title_area, array( 'gallery', 'overlay', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item_title',
'declaration' => 'display: none;',
) );
}
if ( ! in_array( $caption_area, array( 'gallery', 'overlay', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item_caption',
'declaration' => 'display: none;',
) );
}
}
if ( ! in_array( $title_area, array( 'lightbox', 'both' ), true ) && ! in_array( $caption_area, array( 'lightbox', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-bottom-bar',
'declaration' => 'display: none;',
) );
} else {
if ( ! in_array( $title_area, array( 'lightbox', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .el_masonry_gallery_item_title',
'declaration' => 'display: none;',
) );
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .el_masonry_gallery_item_title + .el_masonry_gallery_item_caption',
'declaration' => 'padding: 10px;',
) );
}
if ( ! in_array( $caption_area, array( 'lightbox', 'both' ), true ) ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .el_masonry_gallery_item_caption',
'declaration' => 'display: none;',
) );
}
}
$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 ( 'overlay' === $title_area || 'overlay' === $caption_area ) {
if ( 'on' === $enable_overlay && '' === $overlay_icon ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item .et_overlay:before',
'declaration' => 'content: "" !important;',
) );
}
}
// Show title or caption, then use container styling.
if ( 'on' === $show_title || 'on' === $show_caption ) {
$this->generate_styles( array(
'base_attr_name' => 'title_caption_container_bg',
'selector' => '%%order_class%% .el_masonry_gallery_item .el_masonry_gallery_title_caption_wrapper',
'hover_selector' => '%%order_class%% .el_masonry_gallery_item .el_masonry_gallery_title_caption_wrapper:hover',
'css_property' => 'background-color',
'render_slug' => $render_slug,
'type' => 'color',
) );
}
if ( 'overlay' === $title_area && 'overlay' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_title_caption_wrapper',
'declaration' => 'position: absolute; top: 70%; left: 50%; z-index: 99; width: 100%; padding: 10px; visibility: hidden; opacity: 0; transform: translate(-50%, -50%); transition: all 300ms ease;',
) );
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item:hover .el_masonry_gallery_title_caption_wrapper',
'declaration' => 'top: 50%; visibility: visible; opacity: 1;',
) );
} elseif ( 'overlay' === $title_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item_title',
'declaration' => 'position: absolute; top: 70%; left: 50%; z-index: 99; width: 100%; padding: 10px; visibility: hidden; opacity: 0; transform: translate(-50%, -50%); transition: all 300ms ease;',
) );
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item:hover .el_masonry_gallery_item_title',
'declaration' => 'top: 50%; visibility: visible; opacity: 1;',
) );
} elseif ( 'overlay' === $caption_area ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item_caption',
'declaration' => 'position: absolute; top: 70%; left: 50%; z-index: 99; width: 100%; padding: 10px; visibility: hidden; opacity: 0; transform: translate(-50%, -50%); transition: all 300ms ease;',
) );
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item:hover .el_masonry_gallery_item_caption',
'declaration' => 'top: 50%; visibility: visible; opacity: 1;',
) );
}
if ( 'on' === $enable_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_masonry_gallery_item .et_overlay:before', 'font-size', $render_slug, '', 'range' );
if ( '' !== $overlay_icon_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item .et_overlay:before',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $overlay_icon_color ) )
) );
}
if ( '' !== $overlay_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .el_masonry_gallery_item .et_overlay',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $overlay_color ) )
) );
}
if ( '' !== $meta_background_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .el_masonry_gallery_item_title, %%order_class%%_lightbox .el_masonry_gallery_item_caption',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $meta_background_color ) )
) );
}
if ( 'zoom_n_link' === $enable_lightbox ) {
// 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_masonry_gallery_item .dge-overlay-with-icons .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_masonry_gallery_item .dge-overlay-with-icons .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_masonry_gallery_item .dge-overlay-with-icons .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_masonry_gallery_item .dge-overlay-with-icons .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_masonry_gallery_item .dge-overlay-with-icons .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_masonry_gallery_item .dge-overlay-with-icons .dge-overlay-link',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $this->props['link_icon_color'] ) )
) );
}
}
}
if ( 'on' === $enable_lightbox || 'zoom_n_link' === $enable_lightbox ) {
if ( '' !== $lightbox_background_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox.mfp-bg',
'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $lightbox_background_color ) )
) );
}
if ( '' !== $lightbox_close_icon_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-close',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $lightbox_close_icon_color ) )
) );
}
if ( '' !== $lightbox_arrows_color ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%%_lightbox .mfp-arrow:after',
'declaration' => sprintf( 'color: %1$s;', esc_attr( $lightbox_arrows_color ) )
) );
}
$lightbox_transition_duration = $this->props['lightbox_transition_duration'];
if ( 'none' !== $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( $lightbox_transition_duration ) )
) );
}
}
if ( 'on' === $show_pagination ) {
$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',
) );
}
$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} .el_masonry_gallery_filter_categories li",
'hover' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li:hover:not(.el_masonry_gallery_active_category):not(.el_masonry_gallery_disabled)",
),
'active_category_bg' => array(
'normal' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category",
'hover' => "{$this->main_css_element} .el_masonry_gallery_filter_categories li.el_masonry_gallery_active_category:hover:not(.el_masonry_gallery_disabled)",
)
),
);
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' );
}
return '';
}
public function el_builder_processed_range_value( $result, $range, $range_string ) {
if ( false !== strpos( $result, '0calc' ) ) {
return $range;
}
return $result;
}
/* *****
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_DynamicMasonryGallery();