name = esc_html__( 'Fullwidth Portfolio', 'et_builder' ); $this->plural = esc_html__( 'Fullwidth Portfolios', 'et_builder' ); $this->slug = 'et_pb_fullwidth_portfolio'; $this->vb_support = 'on'; $this->fullwidth = true; // need to use global settings from the slider module $this->global_settings_slug = 'et_pb_portfolio'; $this->main_css_element = '%%order_class%%'; $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => et_builder_i18n( 'Content' ), 'elements' => et_builder_i18n( 'Elements' ), ), ), 'advanced' => array( 'toggles' => array( 'layout' => et_builder_i18n( 'Layout' ), 'overlay' => et_builder_i18n( 'Overlay' ), 'rotation' => esc_html__( 'Rotation', 'et_builder' ), 'text' => array( 'title' => et_builder_i18n( 'Text' ), 'priority' => 49, ), 'image' => et_builder_i18n( 'Image' ), ), ), 'custom_css' => array( 'toggles' => array( 'animation' => array( 'title' => esc_html__( 'Animation', 'et_builder' ), 'priority' => 90, ), ), ), ); $this->advanced_fields = array( 'fonts' => array( 'portfolio_header' => array( 'label' => et_builder_i18n( 'Title' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_portfolio_title", 'important' => 'all', ), 'header_level' => array( 'default' => 'h2', ), 'font_size' => array( 'default' => '26px', ), 'line_height' => array( 'default' => '1em', ), ), 'title' => array( 'label' => esc_html__( 'Portfolio Item Title', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} h3, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h2.et_pb_module_header, {$this->main_css_element} h4.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header", 'important' => 'all', ), 'header_level' => array( 'default' => 'h3', ), ), 'caption' => array( 'label' => esc_html__( 'Meta', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .post-meta, {$this->main_css_element} .post-meta a", 'text_align' => "{$this->main_css_element} .et_pb_portfolio_image p.post-meta", ), ), ), 'background' => array( 'settings' => array( 'color' => 'alpha', ), ), 'borders' => array( 'default' => array( 'css' => array( 'main' => array( 'border_radii' => "{$this->main_css_element}", 'border_styles' => "{$this->main_css_element}", ), ), ), 'image' => array( 'css' => array( 'main' => array( 'border_radii' => "{$this->main_css_element} .et_pb_portfolio_image", 'border_styles' => "{$this->main_css_element} .et_pb_portfolio_image", ), ), 'label_prefix' => et_builder_i18n( 'Image' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), ), 'box_shadow' => array( 'default' => array(), 'image' => array( 'label' => esc_html__( 'Image Box Shadow', 'et_builder' ), 'option_category' => 'layout', 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'css' => array( 'main' => '%%order_class%% .et_pb_portfolio_image', 'overlay' => 'inset', ), 'default_on_fronts' => array( 'color' => '', 'position' => '', ), ), ), 'text' => array( 'use_background_layout' => true, 'css' => array( 'text_orientation' => '%%order_class%% h2, %%order_class%% .et_pb_portfolio_image h3, %%order_class%% .et_pb_portfolio_image p, %%order_class%% .et_pb_portfolio_title, %%order_class%% .et_pb_portfolio_image .et_pb_module_header', ), 'options' => array( 'text_orientation' => array( 'default_on_front' => 'center', ), 'background_layout' => array( 'default_on_front' => '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_portfolio_image', ), ), 'scroll_effects' => array( 'grid_support' => 'yes', ), 'button' => false, 'position_fields' => array( 'default' => 'relative', ), ); $this->custom_css_fields = array( 'portfolio_title' => array( 'label' => esc_html__( 'Portfolio Title', 'et_builder' ), 'selector' => '> h2', ), 'portfolio_item' => array( 'label' => esc_html__( 'Portfolio Item', 'et_builder' ), 'selector' => '.et_pb_portfolio_item', ), 'portfolio_overlay' => array( 'label' => esc_html__( 'Item Overlay', 'et_builder' ), 'selector' => 'span.et_overlay', ), 'portfolio_item_title' => array( 'label' => esc_html__( 'Item Title', 'et_builder' ), 'selector' => '.meta h3', ), 'portfolio_meta' => array( 'label' => esc_html__( 'Meta', 'et_builder' ), 'selector' => '.meta p', ), 'portfolio_arrows' => array( 'label' => esc_html__( 'Navigation Arrows', 'et_builder' ), 'selector' => '.et-pb-slider-arrows a', ), ); $this->help_videos = array( array( 'id' => 'Mug6LhcJQ5M', 'name' => esc_html__( 'An introduction to the Fullwidth Portfolio module', 'et_builder' ), ), ); } function get_fields() { $fields = array( 'title' => array( 'label' => esc_html__( 'Portfolio Title', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Title displayed above the portfolio.', 'et_builder' ), 'toggle_slug' => 'main_content', 'dynamic_content' => 'text', 'mobile_options' => true, 'hover' => 'tabs', ), 'fullwidth' => array( 'label' => et_builder_i18n( 'Layout' ), 'type' => 'select', 'option_category' => 'layout', 'options' => array( 'on' => esc_html__( 'Carousel', 'et_builder' ), 'off' => esc_html__( 'Grid', 'et_builder' ), ), 'default_on_front' => 'on', 'affects' => array( 'auto', ), 'tab_slug' => 'advanced', 'toggle_slug' => 'layout', 'description' => esc_html__( 'Choose your desired portfolio layout style.', 'et_builder' ), ), 'include_categories' => array( 'label' => esc_html__( 'Included Categories', 'et_builder' ), 'type' => 'categories', 'meta_categories' => array( 'all' => esc_html__( 'All Categories', 'et_builder' ), 'current' => esc_html__( 'Current Category', 'et_builder' ), ), 'option_category' => 'basic_option', 'description' => esc_html__( 'Select the categories that you would like to include in the feed.', 'et_builder' ), 'computed_affects' => array( '__projects', ), 'taxonomy_name' => 'project_category', 'toggle_slug' => 'main_content', ), 'posts_number' => array( 'label' => esc_html__( 'Post Count', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => esc_html__( 'Control how many projects are displayed. Leave blank or use 0 to not limit the amount.', 'et_builder' ), 'computed_affects' => array( '__projects', ), 'toggle_slug' => 'main_content', ), 'show_title' => array( 'label' => esc_html__( 'Show Title', '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', 'toggle_slug' => 'elements', 'description' => esc_html__( 'Turn project titles on or off.', 'et_builder' ), 'mobile_options' => true, 'hover' => 'tabs', ), 'show_date' => array( 'label' => esc_html__( 'Show Date', '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', 'toggle_slug' => 'elements', 'description' => esc_html__( 'Turn the date display on or off.', 'et_builder' ), '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, '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__( 'Pick a color to use for the icon that appears when hovering over a portfolio item.', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'overlay', 'mobile_options' => true, 'sticky' => true, ), 'hover_icon' => array( 'label' => esc_html__( 'Overlay Icon', 'et_builder' ), 'description' => esc_html__( 'Select an icon to appear when hovering over a portfolio item.', 'et_builder' ), 'type' => 'select_icon', 'option_category' => 'configuration', 'class' => array( 'et-pb-font-icon' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'overlay', 'mobile_options' => true, 'sticky' => true, ), '__projects' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Fullwidth_Portfolio', 'get_portfolio_item' ), 'computed_depends_on' => array( 'posts_number', 'include_categories', ), ), ); return $fields; } /** * Get portfolio objects for portfolio module * * @param array arguments that affect et_pb_portfolio query * @param array passed conditional tag for update process * @param array passed current page params * @return array portfolio item data */ static function get_portfolio_item( $args = array(), $conditional_tags = array(), $current_page = array() ) { global $post; $defaults = array( 'posts_number' => '', 'include_categories' => '', ); $args = wp_parse_args( $args, $defaults ); $query_args = array( 'post_type' => 'project', 'post_status' => array( 'publish', 'private' ), 'perm' => 'readable', ); if ( is_numeric( $args['posts_number'] ) && $args['posts_number'] > 0 ) { $query_args['posts_per_page'] = $args['posts_number']; } else { $query_args['nopaging'] = true; } $include_categories = self::filter_include_categories( $args['include_categories'], 0, 'project_category' ); if ( ! empty( $include_categories ) ) { $query_args['tax_query'] = array( array( 'taxonomy' => 'project_category', 'field' => 'id', 'terms' => $include_categories, 'operator' => 'IN', ), ); } // Get portfolio query $query = new WP_Query( $query_args ); // Format portfolio output, add supplementary data $width = (int) apply_filters( 'et_pb_portfolio_image_width', 510 ); $height = (int) apply_filters( 'et_pb_portfolio_image_height', 382 ); if ( $query->post_count > 0 ) { $post_index = 0; while ( $query->have_posts() ) { $query->the_post(); ET_Post_Stack::replace( $post ); // Get thumbnail $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), array( $width, $height ) ); if ( isset( $thumbnail[2] ) && isset( $thumbnail[1] ) ) { $orientation = ( $thumbnail[2] > $thumbnail[1] ) ? 'portrait' : 'landscape'; } else { $orientation = false; } // Append value to query post $query->posts[ $post_index ]->post_permalink = get_permalink(); $query->posts[ $post_index ]->post_thumbnail = isset( $thumbnail[0] ) ? $thumbnail[0] : false; $query->posts[ $post_index ]->post_thumbnail_orientation = $orientation; $query->posts[ $post_index ]->post_date_readable = get_the_date(); $query->posts[ $post_index ]->post_class_name = get_post_class( 'et_pb_portfolio_item et_pb_grid_item ' ); $post_index++; ET_Post_Stack::pop(); } ET_Post_Stack::reset(); } elseif ( self::is_processing_computed_prop() ) { // This is for the VB $posts = '
'; $posts .= self::get_no_results_template(); $posts .= '
'; $query = array( 'posts' => $posts ); } return $query; } /** * 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 ) { global $post; $sticky = et_pb_sticky_options(); $multi_view = et_pb_multi_view_options( $this ); $title = $multi_view->render_element( array( 'tag' => et_pb_process_header_level( $this->props['portfolio_header_level'], 'h2' ), 'content' => '{{title}}', 'attrs' => array( 'class' => 'et_pb_portfolio_title', ), ) ); $fullwidth = $this->props['fullwidth']; $include_categories = $this->props['include_categories']; $posts_number = $this->props['posts_number']; $show_title = $this->props['show_title']; $show_date = $this->props['show_date']; $auto = $this->props['auto']; $auto_speed = $this->props['auto_speed']; $hover_icon = $this->props['hover_icon']; $header_level = $this->props['title_level']; $zoom_and_hover_selector = '.et_pb_fullwidth_portfolio%%order_class%% .et_pb_portfolio_image'; // Zoom Icon color. $this->generate_styles( array( 'hover' => false, 'base_attr_name' => 'zoom_icon_color', 'selector' => "{$zoom_and_hover_selector} .et_overlay:before", 'css_property' => 'color', 'render_slug' => $render_slug, 'type' => 'color', 'important' => true, ) ); // Hover Overlay color. $this->generate_styles( array( 'hover' => false, 'base_attr_name' => 'hover_overlay_color', 'selector' => "{$zoom_and_hover_selector} .et_overlay", 'css_property' => array( 'background-color', 'border-color' ), 'render_slug' => $render_slug, 'type' => 'color', ) ); // Overlay. $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 ); $overlay = 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, ) ); // 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' => "{$zoom_and_hover_selector} .et_overlay:before", 'processor' => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon', ), ) ); $projects = self::get_portfolio_item( array( 'posts_number' => $posts_number, 'include_categories' => $include_categories, ) ); $portfolio_order = self::_get_index( array( self::INDEX_MODULE_ORDER, $render_slug ) ); $items_count = 0; ob_start(); if ( $projects->post_count > 0 ) { while ( $projects->have_posts() ) { $projects->the_post(); ET_Post_Stack::replace( $post ); $item_class = sprintf( 'et_pb_fullwidth_portfolio_item_%1$s_%2$s', $portfolio_order, $items_count ); $items_count++; ?>
> $thumb_width ) ? 'portrait' : 'landscape'; if ( '' !== $thumb_src ) : ?>
get_the_title(), ); $full_src = get_the_post_thumbnail_url(); if ( $full_src ) { $image_attrs['srcset'] = $full_src . ' 479w, ' . $thumb_src . ' 480w'; $image_attrs['sizes'] = '(max-width:479px) 479px, 100vw'; } $image_attachment_class = et_pb_media_options()->get_image_attachment_class( $this->props, '', get_post_thumbnail_id() ); if ( ! empty( $image_attachment_class ) ) { $image_attrs['class'] = esc_attr( $image_attachment_class ); } $this->render_image( $thumb_src, $image_attrs ); ?>
'; $posts .= self::get_no_results_template(); $posts .= ''; } $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); // Images: Add CSS Filters and Mix Blend Mode rules (if set) if ( isset( $this->advanced_fields['image']['css'] ) ) { $this->add_classname( $this->generate_css_filters( $render_slug, 'child_', self::$data_utils->array_get( $this->advanced_fields['image']['css'], 'main', '%%order_class%%' ) ) ); } // Background layout data attributes. $data_background_layout = et_pb_background_layout_options()->get_background_layout_attrs( $this->props ); // 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 ); // Module classnames if ( 'on' === $fullwidth ) { $this->add_classname( 'et_pb_fullwidth_portfolio_carousel' ); } else { $this->add_classname( array( 'et_pb_fullwidth_portfolio_grid', 'clearfix', ) ); } $output = sprintf( ' %8$s %7$s %6$s %10$s %11$s
%2$s
', $this->module_classname( $render_slug ), $posts, $this->module_id(), ( '' !== $auto && in_array( $auto, array( 'on', 'off' ) ) ? esc_attr( $auto ) : 'off' ), ( '' !== $auto_speed && is_numeric( $auto_speed ) ? esc_attr( $auto_speed ) : '7000' ), // #5 $title, $video_background, $parallax_image_background, et_core_esc_previously( $data_background_layout ), et_core_esc_previously( $this->background_pattern() ), // #10 et_core_esc_previously( $this->background_mask() ) // #11 ); return $output; } /** * Filter multi view value. * * @since 3.27.1 * * @see ET_Builder_Module_Helper_MultiViewOptions::filter_value * * @param mixed $raw_value Props raw value. * @param array $args { * Context data. * * @type string $context Context param: content, attrs, visibility, classes. * @type string $name Module options props name. * @type string $mode Current data mode: desktop, hover, tablet, phone. * @type string $attr_key Attribute key for attrs context data. Example: src, class, etc. * @type string $attr_sub_key Attribute sub key that availabe when passing attrs value as array such as styes. Example: padding-top, margin-botton, etc. * } * @param ET_Builder_Module_Helper_MultiViewOptions $multi_view Multiview object instance. * * @return mixed */ public function multi_view_filter_value( $raw_value, $args, $multi_view ) { $name = isset( $args['name'] ) ? $args['name'] : ''; $mode = isset( $args['mode'] ) ? $args['mode'] : ''; $fields_need_escape = array( 'title', ); if ( $raw_value && in_array( $name, $fields_need_escape, true ) ) { return $this->_esc_attr( $multi_view->get_name_by_mode( $name, $mode ), 'none', $raw_value ); } return $raw_value; } } if ( et_builder_should_load_all_module_data() ) { new ET_Builder_Module_Fullwidth_Portfolio(); }