File Editor
Directories:
.. (Back)
field
helpers
settings
type
woocommerce
Files:
Accordion.php
AccordionItem.php
Audio.php
BarCounters.php
BarCountersItem.php
Blog.php
Blurb.php
Button.php
CircleCounter.php
Code.php
Comments.php
ContactForm.php
ContactFormItem.php
CountdownTimer.php
Cta.php
Divider.php
FilterablePortfolio.php
FullwidthCode.php
FullwidthHeader.php
FullwidthImage.php
FullwidthMap.php
FullwidthMenu.php
FullwidthPortfolio.php
FullwidthPostContent.php
FullwidthPostSlider.php
FullwidthPostTitle.php
FullwidthSlider.php
Gallery.php
Icon.php
Image.php
Login.php
Map.php
MapItem.php
Menu.php
NumberCounter.php
Portfolio.php
PostContent.php
PostSlider.php
PostTitle.php
PostsNavigation.php
PricingTables.php
PricingTablesItem.php
Search.php
Sidebar.php
Signup.php
SignupItem.php
Slider.php
SliderItem.php
SocialMediaFollow.php
SocialMediaFollowItem.php
Tabs.php
TabsItem.php
TeamMember.php
Testimonial.php
Text.php
Toggle.php
Video.php
VideoSlider.php
VideoSliderItem.php
Create New File
Create
Edit File: Gallery.php
<?php class ET_Builder_Module_Gallery extends ET_Builder_Module { function init() { $this->name = esc_html__( 'Gallery', 'et_builder' ); $this->plural = esc_html__( 'Galleries', 'et_builder' ); $this->slug = 'et_pb_gallery'; $this->vb_support = 'on'; $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => esc_html__( 'Images', 'et_builder' ), 'elements' => et_builder_i18n( 'Elements' ), ), ), 'advanced' => array( 'toggles' => array( 'layout' => et_builder_i18n( 'Layout' ), 'overlay' => et_builder_i18n( 'Overlay' ), 'image' => array( 'title' => et_builder_i18n( 'Image' ), ), 'text' => array( 'title' => et_builder_i18n( 'Text' ), 'priority' => 49, ), ), ), 'custom_css' => array( 'toggles' => array( 'animation' => array( 'title' => esc_html__( 'Animation', 'et_builder' ), 'priority' => 90, ), ), ), ); $this->main_css_element = '%%order_class%%.et_pb_gallery'; $this->advanced_fields = array( 'fonts' => array( 'title' => array( 'label' => et_builder_i18n( 'Title' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_gallery_title", 'hover' => "{$this->main_css_element} .et_pb_gallery_title:hover", ), 'header_level' => array( 'default' => 'h3', ), ), 'caption' => array( 'label' => esc_html__( 'Caption', 'et_builder' ), 'use_all_caps' => true, 'css' => array( 'main' => "{$this->main_css_element} .mfp-title, {$this->main_css_element} .et_pb_gallery_caption", 'hover' => "{$this->main_css_element} .mfp-title:hover, {$this->main_css_element} .et_pb_gallery_caption:hover", ), 'line_height' => array( 'range_settings' => array( 'min' => '1', 'max' => '100', 'step' => '1', ), ), 'depends_show_if' => 'off', ), 'pagination' => array( 'label' => esc_html__( 'Pagination', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_gallery_pagination a", 'hover' => "{$this->main_css_element} .et_pb_gallery_pagination a:hover", 'text_align' => "{$this->main_css_element} .et_pb_gallery_pagination ul", ), 'text_align' => array( 'options' => et_builder_get_text_orientation_options( array( 'justified' ), array() ), ), ), ), 'borders' => array( 'default' => array( 'css' => array( 'main' => array( 'border_radii' => "{$this->main_css_element} .et_pb_gallery_item", 'border_styles' => "{$this->main_css_element} .et_pb_gallery_item", ), ), ), 'image' => array( 'css' => array( 'main' => array( 'border_radii' => "{$this->main_css_element} .et_pb_gallery_image", 'border_styles' => "{$this->main_css_element} .et_pb_gallery_image", ), ), 'label_prefix' => et_builder_i18n( 'Image' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'depends_on' => array( 'fullwidth' ), 'depends_show_if' => 'off', ), ), 'box_shadow' => array( 'default' => array( 'show_if' => array( 'fullwidth' => 'on', ), ), 'image' => array( 'label' => esc_html__( 'Image Box Shadow', 'et_builder' ), 'option_category' => 'layout', 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'show_if' => array( 'fullwidth' => 'off', ), 'css' => array( 'main' => '%%order_class%% .et_pb_gallery_image', 'overlay' => 'inset', ), 'default_on_fronts' => array( 'color' => '', 'position' => '', ), ), ), 'margin_padding' => array( 'css' => array( 'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling ), ), 'max_width' => array( 'css' => array( 'module_alignment' => '%%order_class%%.et_pb_gallery.et_pb_module', ), ), 'text' => array( 'use_background_layout' => true, 'css' => array( 'main' => implode( ', ', array( "{$this->main_css_element} .et_pb_gallery_title", "{$this->main_css_element} .mfp-title", "{$this->main_css_element} .et_pb_gallery_caption", "{$this->main_css_element} .et_pb_gallery_pagination a", ) ), 'text_shadow' => "{$this->main_css_element}.et_pb_gallery_grid", ), 'options' => array( 'background_layout' => array( 'default' => 'light', 'hover' => 'tabs', ), ), ), 'filters' => array( 'css' => array( 'main' => '%%order_class%%', ), 'child_filters_target' => array( 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), ), 'image' => array( 'css' => array( 'main' => '%%order_class%% .et_pb_gallery_image img', ), ), 'scroll_effects' => array( 'grid_support' => 'yes', ), 'button' => false, ); $this->custom_css_fields = array( 'gallery_item' => array( 'label' => esc_html__( 'Gallery Item', 'et_builder' ), 'selector' => '.et_pb_gallery_item', ), 'overlay' => array( 'label' => et_builder_i18n( 'Overlay' ), 'selector' => '.et_overlay', ), 'overlay_icon' => array( 'label' => esc_html__( 'Overlay Icon', 'et_builder' ), 'selector' => '.et_overlay:before', ), 'gallery_item_title' => array( 'label' => esc_html__( 'Gallery Item Title', 'et_builder' ), 'selector' => '.et_pb_gallery_title', ), 'gallery_item_caption' => array( 'label' => esc_html__( 'Gallery Item Caption', 'et_builder' ), 'selector' => '.et_pb_gallery_caption', ), 'gallery_pagination' => array( 'label' => esc_html__( 'Gallery Pagination', 'et_builder' ), 'selector' => '.et_pb_gallery_pagination', ), 'gallery_pagination_active' => array( 'label' => esc_html__( 'Pagination Active Page', 'et_builder' ), 'selector' => '.et_pb_gallery_pagination a.active', ), ); $this->help_videos = array( array( 'id' => 'BRjX-pNHk-s', 'name' => esc_html__( 'An introduction to the Gallery module', 'et_builder' ), ), ); } function get_fields() { $fields = array( 'gallery_ids' => array( 'label' => esc_html__( 'Images', 'et_builder' ), 'description' => esc_html__( 'Choose the images that you would like to appear in the image gallery.', 'et_builder' ), 'type' => 'upload-gallery', 'computed_affects' => array( '__gallery', ), 'option_category' => 'basic_option', 'toggle_slug' => 'main_content', ), 'gallery_orderby' => array( 'label' => esc_html__( 'Image Order', 'et_builder' ), 'description' => esc_html__( 'Select an ordering method for the gallery. This controls which gallery items appear first in the list.', 'et_builder' ), 'type' => $this->is_loading_bb_data() ? 'hidden' : 'select', 'options' => array( '' => et_builder_i18n( 'Default' ), 'rand' => esc_html__( 'Random', 'et_builder' ), ), 'default' => 'off', 'class' => array( 'et-pb-gallery-ids-field' ), 'computed_affects' => array( '__gallery', ), 'toggle_slug' => 'main_content', ), 'gallery_captions' => array( 'type' => 'hidden', 'class' => array( 'et-pb-gallery-captions-field' ), 'computed_affects' => array( '__gallery', ), ), 'fullwidth' => array( 'label' => et_builder_i18n( 'Layout' ), 'type' => 'select', 'option_category' => 'layout', 'options' => array( 'off' => esc_html__( 'Grid', 'et_builder' ), 'on' => esc_html__( 'Slider', 'et_builder' ), ), 'default_on_front' => 'off', 'description' => esc_html__( 'Toggle between the various gallery layout types.', 'et_builder' ), 'affects' => array( 'zoom_icon_color', 'caption_font', 'caption_text_color', 'caption_line_height', 'caption_font_size', 'caption_all_caps', 'caption_letter_spacing', 'hover_icon', 'hover_overlay_color', 'auto', 'posts_number', 'show_title_and_caption', 'show_pagination', 'orientation', 'border_radii_image', 'border_styles_image', ), 'computed_affects' => array( '__gallery', ), 'tab_slug' => 'advanced', 'toggle_slug' => 'layout', ), 'posts_number' => array( 'default' => 4, 'label' => esc_html__( 'Image Count', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => esc_html__( 'Define the number of images that should be displayed per page.', 'et_builder' ), 'depends_show_if' => 'off', 'toggle_slug' => 'main_content', ), 'orientation' => array( 'label' => esc_html__( 'Thumbnail Orientation', 'et_builder' ), 'type' => 'select', 'options_category' => 'configuration', 'options' => array( 'landscape' => esc_html__( 'Landscape', 'et_builder' ), 'portrait' => esc_html__( 'Portrait', 'et_builder' ), ), 'default_on_front' => 'landscape', 'description' => sprintf( '%1$s<br><small><em><strong>%2$s:</strong> %3$s <a href="//wordpress.org/plugins/force-regenerate-thumbnails" target="_blank">%4$s</a>.</em></small>', esc_html__( 'Choose the orientation of the gallery thumbnails.', 'et_builder' ), esc_html__( 'Note', 'et_builder' ), esc_html__( 'If this option appears to have no effect, you might need to', 'et_builder' ), esc_html__( 'regenerate your thumbnails', 'et_builder' ) ), 'depends_show_if' => 'off', 'computed_affects' => array( '__gallery', ), 'tab_slug' => 'advanced', 'toggle_slug' => 'layout', ), 'show_title_and_caption' => array( 'label' => esc_html__( 'Show Title and Caption', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => et_builder_i18n( 'Yes' ), 'off' => et_builder_i18n( 'No' ), ), 'default_on_front' => 'on', 'description' => esc_html__( 'Whether or not to show the title and caption for images (if available).', 'et_builder' ), 'depends_show_if' => 'off', 'toggle_slug' => 'elements', 'mobile_options' => true, 'hover' => 'tabs', ), 'show_pagination' => array( 'label' => esc_html__( 'Show Pagination', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => et_builder_i18n( 'Yes' ), 'off' => et_builder_i18n( 'No' ), ), 'default_on_front' => 'on', 'description' => esc_html__( 'Enable or disable pagination for this feed.', 'et_builder' ), 'depends_show_if' => 'off', 'toggle_slug' => 'elements', 'computed_affects' => array( '__gallery', ), 'mobile_options' => true, 'hover' => 'tabs', ), 'zoom_icon_color' => array( 'label' => esc_html__( 'Overlay Icon Color', 'et_builder' ), 'description' => esc_html__( 'Here you can define a custom color for the zoom icon.', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'depends_show_if' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'overlay', 'mobile_options' => true, 'sticky' => true, ), 'hover_overlay_color' => array( 'label' => esc_html__( 'Overlay Background Color', 'et_builder' ), 'description' => esc_html__( 'Here you can define a custom color for the overlay', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'depends_show_if' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'overlay', 'mobile_options' => true, 'sticky' => true, ), 'hover_icon' => array( 'label' => esc_html__( 'Overlay Icon', 'et_builder' ), 'description' => esc_html__( 'Here you can define a custom icon for the overlay', 'et_builder' ), 'type' => 'select_icon', 'option_category' => 'configuration', 'class' => array( 'et-pb-font-icon' ), 'depends_show_if' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'overlay', 'mobile_options' => true, 'sticky' => true, ), '__gallery' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Gallery', 'get_gallery' ), 'computed_depends_on' => array( 'gallery_ids', 'gallery_orderby', 'gallery_captions', 'fullwidth', 'orientation', 'show_pagination', ), ), ); return $fields; } /** * Get attachment data for gallery module * * @param array $args { * Gallery Options * * @type array $gallery_ids Attachment Ids of images to be included in gallery. * @type string $gallery_orderby `orderby` arg for query. Optional. * @type string $fullwidth on|off to determine grid / slider layout * @type string $orientation Orientation of thumbnails (landscape|portrait). * } * @param array $conditional_tags * @param array $current_page * * @return array Attachments data */ static function get_gallery( $args = array(), $conditional_tags = array(), $current_page = array() ) { $attachments = array(); $defaults = array( 'gallery_ids' => array(), 'gallery_orderby' => '', 'gallery_captions' => array(), 'fullwidth' => 'off', 'orientation' => 'landscape', ); $args = wp_parse_args( $args, $defaults ); $attachments_args = array( 'include' => $args['gallery_ids'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'post__in', ); // Woo Gallery module shouldn't display placeholder image when no Gallery image is // available. // @see https://github.com/elegantthemes/submodule-builder/pull/6706#issuecomment-542275647 if ( isset( $args['attachment_id'] ) ) { $attachments_args['attachment_id'] = $args['attachment_id']; } if ( 'rand' === $args['gallery_orderby'] ) { $attachments_args['orderby'] = 'rand'; } if ( 'on' === $args['fullwidth'] ) { $width = 1080; $height = 9999; } else { $width = 400; $height = ( 'landscape' === $args['orientation'] ) ? 284 : 516; } $width = (int) apply_filters( 'et_pb_gallery_image_width', $width ); $height = (int) apply_filters( 'et_pb_gallery_image_height', $height ); $_attachments = get_posts( $attachments_args ); foreach ( $_attachments as $key => $val ) { $attachments[ $key ] = $_attachments[ $key ]; $attachments[ $key ]->image_alt_text = get_post_meta( $val->ID, '_wp_attachment_image_alt', true ); $attachments[ $key ]->image_src_full = wp_get_attachment_image_src( $val->ID, 'full' ); $attachments[ $key ]->image_src_thumb = wp_get_attachment_image_src( $val->ID, array( $width, $height ) ); } return $attachments; } /** * Wrapper for ET_Builder_Module_Gallery::get_gallery() which is intended to be extended by * module which uses gallery module renderer so relevant argument for other module can be added * * @since 3.29 * @see ET_Builder_Module_Gallery::get_gallery() * @param array $args { * Gallery Options * * @type array $gallery_ids Attachment Ids of images to be included in gallery. * @type string $gallery_orderby `orderby` arg for query. Optional. * @type string $fullwidth on|off to determine grid / slider layout * @type string $orientation Orientation of thumbnails (landscape|portrait). * } * * @return array */ public function get_attachments( $args = array() ) { return self::get_gallery( $args ); } public function get_pagination_alignment() { $text_orientation = isset( $this->props['pagination_text_align'] ) ? $this->props['pagination_text_align'] : ''; return et_pb_get_alignment( $text_orientation ); } /** * Renders the module output. * * @param array $attrs List of attributes. * @param string $content Content being processed. * @param string $render_slug Slug of module that is used for rendering output. * * @return string */ public function render( $attrs, $content, $render_slug ) { $sticky = et_pb_sticky_options(); $multi_view = et_pb_multi_view_options( $this ); $gallery_ids = $this->props['gallery_ids']; $fullwidth = $this->props['fullwidth']; $show_title_and_caption = $this->props['show_title_and_caption']; $posts_number = $this->props['posts_number']; $show_pagination = $this->props['show_pagination']; $gallery_orderby = $this->props['gallery_orderby']; $auto = $this->props['auto']; $auto_speed = $this->props['auto_speed']; $orientation = $this->props['orientation']; $pagination_text_align = $this->get_pagination_alignment(); $header_level = $this->props['title_level']; $hover_icon = $this->props['hover_icon']; $hover_icon_values = et_pb_responsive_options()->get_property_values( $this->props, 'hover_icon' ); $hover_icon_tablet = isset( $hover_icon_values['tablet'] ) ? $hover_icon_values['tablet'] : ''; $hover_icon_phone = isset( $hover_icon_values['phone'] ) ? $hover_icon_values['phone'] : ''; $hover_icon_sticky = $sticky->get_value( 'hover_icon', $this->props ); // Zoom Icon Color. $this->generate_styles( array( 'hover' => false, 'base_attr_name' => 'zoom_icon_color', 'selector' => '%%order_class%% .et_overlay:before', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => true, 'type' => 'color', ) ); // Hover Overlay Color. $this->generate_styles( array( 'hover' => false, 'base_attr_name' => 'hover_overlay_color', 'selector' => '%%order_class%% .et_overlay', 'css_property' => array( 'background-color', 'border-color' ), 'render_slug' => $render_slug, 'type' => 'color', ) ); // Get gallery item data $attachments = $this->get_attachments( array( 'gallery_ids' => $gallery_ids, 'gallery_orderby' => $gallery_orderby, 'fullwidth' => $fullwidth, 'orientation' => $orientation, ) ); if ( empty( $attachments ) ) { return ''; } $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); $posts_number = 0 === intval( $posts_number ) ? 4 : intval( $posts_number ); // Module classnames $this->add_classname( array( $this->get_text_orientation_classname(), ) ); // Background layout class names. $background_layout_class_names = et_pb_background_layout_options()->get_background_layout_class( $this->props ); $this->add_classname( $background_layout_class_names ); if ( 'on' === $fullwidth ) { $this->add_classname( array( 'et_pb_slider', 'et_pb_gallery_fullwidth', ) ); } else { $this->add_classname( 'et_pb_gallery_grid' ); } if ( 'on' === $auto && 'on' === $fullwidth ) { $this->add_classname( array( 'et_slider_auto', "et_slider_speed_{$auto_speed}", 'clearfix', ) ); } // Background layout data attributes. $data_background_layout = et_pb_background_layout_options()->get_background_layout_attrs( $this->props ); $output = sprintf( '<div%1$s class="%2$s"%4$s>%5$s%6$s%7$s%8$s <div class="et_pb_gallery_items et_post_gallery clearfix" data-per_page="%3$d">', $this->module_id(), $this->module_classname( $render_slug ), esc_attr( $posts_number ), et_core_esc_previously( $data_background_layout ), $parallax_image_background, $video_background, et_core_esc_previously( $this->background_pattern() ), // #7 et_core_esc_previously( $this->background_mask() ) // #8 ); // Images: Add CSS Filters and Mix Blend Mode rules (if set) if ( array_key_exists( 'image', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['image'] ) ) { $generate_css_filters_item = $this->generate_css_filters( $render_slug, 'child_', self::$data_utils->array_get( $this->advanced_fields['image']['css'], 'main', '%%order_class%%' ) ); } // Overlay output. $overlay_output = 'on' === $fullwidth ? '' : ET_Builder_Module_Helper_Overlay::render( array( 'icon' => $hover_icon, 'icon_tablet' => $hover_icon_tablet, 'icon_phone' => $hover_icon_phone, 'icon_sticky' => $hover_icon_sticky, ) ); if ( 'on' !== $fullwidth ) { // Overlay Icon Styles. $this->generate_styles( array( 'hover' => false, 'utility_arg' => 'icon_font_family', 'render_slug' => $render_slug, 'base_attr_name' => 'hover_icon', 'important' => true, 'selector' => '%%order_class%% .et_overlay:before', 'processor' => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon', ), ) ); } $images_count = 0; foreach ( $attachments as $id => $attachment ) { $image_attrs = array( 'alt' => $attachment->image_alt_text, ); if ( 'on' !== $fullwidth ) { $image_attrs['srcset'] = $attachment->image_src_full[0] . ' 479w, ' . $attachment->image_src_thumb[0] . ' 480w'; $image_attrs['sizes'] = '(max-width:479px) 479px, 100vw'; } $image_attachment_class = et_pb_media_options()->get_image_attachment_class( $this->props, '', $attachment->ID ); if ( ! empty( $image_attachment_class ) ) { $image_attrs['class'] = esc_attr( $image_attachment_class ); } $image_output = sprintf( '<a href="%1$s" title="%2$s"> %3$s %4$s </a>', esc_url( $attachment->image_src_full[0] ), esc_attr( $attachment->post_title ), $this->render_image( $attachment->image_src_thumb[0], $image_attrs, false ), et_core_esc_previously( $overlay_output ) ); $gallery_order = self::_get_index( array( self::INDEX_MODULE_ORDER, $render_slug ) ); $item_class = sprintf( ' et_pb_gallery_item_%1$s_%2$s', $gallery_order, $images_count ); $output .= sprintf( '<div class="et_pb_gallery_item%2$s%1$s%3$s%4$s">', esc_attr( ' ' . implode( ' ', $background_layout_class_names ) ), ( 'on' !== $fullwidth ? ' et_pb_grid_item' : '' ), $generate_css_filters_item, $item_class ); $images_count++; $output .= " <div class='et_pb_gallery_image {$orientation}'> $image_output </div>"; if ( 'on' !== $fullwidth && $multi_view->has_value( 'show_title_and_caption', 'on' ) ) { if ( trim( $attachment->post_title ) ) { $output .= $multi_view->render_element( array( 'tag' => et_pb_process_header_level( $header_level, 'h3' ), 'content' => wptexturize( $attachment->post_title ), 'attrs' => array( 'class' => 'et_pb_gallery_title', ), 'visibility' => array( 'show_title_and_caption' => 'on', ), ) ); } if ( trim( $attachment->post_excerpt ) ) { $output .= $multi_view->render_element( array( 'tag' => 'p', 'content' => wptexturize( $attachment->post_excerpt ), 'attrs' => array( 'class' => 'et_pb_gallery_caption', ), 'visibility' => array( 'show_title_and_caption' => 'on', ), ) ); } } $output .= '</div>'; } $output .= '</div>'; if ( 'on' !== $fullwidth && $multi_view->has_value( 'show_pagination', 'on' ) ) { $pagination_classes = array( 'et_pb_gallery_pagination' ); if ( 'justify' === $pagination_text_align ) { $pagination_classes[] = 'et_pb_gallery_pagination_justify'; } $output .= $multi_view->render_element( array( 'tag' => 'div', 'attrs' => array( 'class' => implode( ' ', $pagination_classes ), ), 'visibility' => array( 'show_pagination' => 'on', ), ) ); } $output .= '</div>'; return $output; } } if ( et_builder_should_load_all_module_data() ) { new ET_Builder_Module_Gallery(); }
Save Changes
Rename File
Rename