: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
class ET_Builder_Module_Fullwidth_Portfolio extends ET_Builder_Module_Type_PostBased {
$this->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';
// 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(
'main_content' => et_builder_i18n( 'Content' ),
'elements' => et_builder_i18n( 'Elements' ),
'layout' => et_builder_i18n( 'Layout' ),
'overlay' => et_builder_i18n( 'Overlay' ),
'rotation' => esc_html__( 'Rotation', 'et_builder' ),
'title' => et_builder_i18n( 'Text' ),
'image' => et_builder_i18n( 'Image' ),
'title' => esc_html__( 'Animation', 'et_builder' ),
$this->advanced_fields = array(
'portfolio_header' => array(
'label' => et_builder_i18n( 'Title' ),
'main' => "{$this->main_css_element} .et_pb_portfolio_title",
'label' => esc_html__( 'Portfolio Item Title', 'et_builder' ),
'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",
'label' => esc_html__( 'Meta', 'et_builder' ),
'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",
'border_radii' => "{$this->main_css_element}",
'border_styles' => "{$this->main_css_element}",
'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',
'label' => esc_html__( 'Image Box Shadow', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'main' => '%%order_class%% .et_pb_portfolio_image',
'default_on_fronts' => array(
'use_background_layout' => true,
'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',
'text_orientation' => array(
'default_on_front' => 'center',
'background_layout' => array(
'default_on_front' => 'light',
'main' => '%%order_class%%',
'child_filters_target' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'main' => '%%order_class%% .et_pb_portfolio_image',
'scroll_effects' => array(
'position_fields' => array(
$this->custom_css_fields = array(
'portfolio_title' => array(
'label' => esc_html__( 'Portfolio Title', 'et_builder' ),
'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' ),
'portfolio_arrows' => array(
'label' => esc_html__( 'Navigation Arrows', 'et_builder' ),
'selector' => '.et-pb-slider-arrows a',
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Fullwidth Portfolio module', 'et_builder' ),
'label' => esc_html__( 'Portfolio Title', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Title displayed above the portfolio.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => et_builder_i18n( 'Layout' ),
'option_category' => 'layout',
'on' => esc_html__( 'Carousel', 'et_builder' ),
'off' => esc_html__( 'Grid', 'et_builder' ),
'default_on_front' => 'on',
'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' ),
'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(
'taxonomy_name' => 'project_category',
'toggle_slug' => 'main_content',
'label' => esc_html__( 'Post Count', 'et_builder' ),
'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(
'toggle_slug' => 'main_content',
'label' => esc_html__( 'Show Title', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'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,
'label' => esc_html__( 'Show Date', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'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,
'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' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'mobile_options' => 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' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'mobile_options' => true,
'label' => esc_html__( 'Overlay Icon', 'et_builder' ),
'description' => esc_html__( 'Select an icon to appear when hovering over a portfolio item.', 'et_builder' ),
'option_category' => 'configuration',
'class' => array( 'et-pb-font-icon' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'computed_callback' => array( 'ET_Builder_Module_Fullwidth_Portfolio', 'get_portfolio_item' ),
'computed_depends_on' => array(
* 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() ) {
'include_categories' => '',
$args = wp_parse_args( $args, $defaults );
'post_type' => 'project',
'post_status' => array( 'publish', 'private' ),
if ( is_numeric( $args['posts_number'] ) && $args['posts_number'] > 0 ) {
$query_args['posts_per_page'] = $args['posts_number'];
$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(
'taxonomy' => 'project_category',
'terms' => $include_categories,
$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 ) {
while ( $query->have_posts() ) {
ET_Post_Stack::replace( $post );
$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';
// 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 ' );
} else if ( self::is_processing_computed_prop() ) {
$posts = '<div class="et_pb_row et_pb_no_results">';
$posts .= self::get_no_results_template();
$query = array( 'posts' => $posts );
function render( $attrs, $content = null, $render_slug ) {
$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}}',
'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_icon_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'zoom_icon_color' );
$hover_overlay_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'hover_overlay_color' );
$zoom_and_hover_selector = '.et_pb_fullwidth_portfolio%%order_class%% .et_pb_portfolio_image';
et_pb_responsive_options()->generate_responsive_css( $zoom_icon_color_values, "{$zoom_and_hover_selector} .et_overlay:before", 'color', $render_slug, ' !important;', 'color' );
et_pb_responsive_options()->generate_responsive_css( $hover_overlay_color_values, "{$zoom_and_hover_selector} .et_overlay", array( 'background-color', 'border-color' ), $render_slug, '', 'color' );
$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 ) );
if( $projects->post_count > 0 ) {
while ( $projects->have_posts() ) {
ET_Post_Stack::replace( $post );
$item_class = sprintf( 'et_pb_fullwidth_portfolio_item_%1$s_%2$s', $portfolio_order, $items_count );
<div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item et_pb_grid_item ' . $item_class ); ?>>
$width = (int) apply_filters( 'et_pb_portfolio_image_width', $width );
$height = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), array( $width, $height ) );
$orientation = ( $thumb_height > $thumb_width ) ? 'portrait' : 'landscape';
if ( '' !== $thumb_src ) : ?>
<div class="et_pb_portfolio_image <?php echo esc_attr( $orientation ); ?>">
'alt' => get_the_title(),
$full_src = get_the_post_thumbnail_url();
$image_attrs['srcset'] = $full_src . ' 479w, ' . $thumb_src . ' 480w';
$image_attrs['sizes'] = '(max-width:479px) 479px, 100vw';
$this->render_image( $thumb_src, $image_attrs );
<a href="<?php esc_url( the_permalink() ); ?>">
$data_icon = '' !== $hover_icon
esc_attr( et_pb_process_font_icon( $hover_icon ) )
printf( '<span class="et_overlay%1$s"%2$s></span>',
( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
et_core_esc_previously( $data_icon )
$multi_view->render_element( array(
'tag' => et_pb_process_header_level( $header_level, 'h3' ),
'content' => get_the_title(),