control_groups['image'] = array( 'title' => esc_html__( 'Image', 'bricksable' ), 'tab' => 'content', ); unset( $this->control_groups['_typography'] ); } public function set_controls() { // Apply CSS filters only to img tag. $this->controls['_cssFilters']['css'] = array( array( 'selector' => '&:is(img)', 'property' => 'filter', ), array( 'selector' => 'img', 'property' => 'filter', ), ); $this->controls['_typography']['css'][0]['selector'] = 'figcaption'; // Images. $this->controls['randomImageGallery'] = array( 'tab' => 'content', 'label' => esc_html__( 'Random Image gallery', 'bricksable' ), 'type' => 'image-gallery', ); // @since 1.4. $this->controls['tag'] = array( 'tab' => 'content', 'label' => esc_html__( 'HTML tag', 'bricksable' ), 'type' => 'select', 'options' => array( 'figure' => 'figure', 'picture' => 'picture', 'div' => 'div', 'custom' => esc_html__( 'Custom', 'bricksable' ), ), 'lowercase' => true, 'inline' => true, 'placeholder' => '-', ); $this->controls['customTag'] = array( 'tab' => 'content', 'label' => esc_html__( 'Custom tag', 'bricksable' ), 'type' => 'text', 'inline' => true, 'hasDynamicData' => false, 'placeholder' => 'div', 'required' => array( 'tag', '=', 'custom' ), ); $this->controls['stretch'] = array( 'tab' => 'content', 'group' => 'image', 'label' => esc_html__( 'Stretch', 'bricksable' ), 'type' => 'checkbox', 'css' => array( array( 'property' => 'width', 'value' => '100%', ), ), ); // Link To. $this->controls['linkToSeparator'] = array( 'tab' => 'content', 'group' => 'image', 'type' => 'separator', 'label' => esc_html__( 'Link To', 'bricksable' ), ); $this->controls['link'] = array( 'tab' => 'content', 'group' => 'image', 'type' => 'select', 'options' => array( 'lightbox' => esc_html__( 'Lightbox', 'bricksable' ), 'attachment' => esc_html__( 'Attachment Page', 'bricksable' ), 'media' => esc_html__( 'Media File', 'bricksable' ), 'custom' => esc_html__( 'Custom URL', 'bricksable' ), ), 'placeholder' => esc_html__( 'None', 'bricksable' ), ); $this->controls['newTab'] = array( 'tab' => 'content', 'group' => 'image', 'label' => esc_html__( 'Open in new tab', 'bricksable' ), 'type' => 'checkbox', 'required' => array( 'link', '=', array( 'attachment', 'media' ) ), ); $this->controls['url'] = array( 'tab' => 'content', 'group' => 'image', 'label' => esc_html__( 'Link type', 'bricksable' ), 'type' => 'link', 'required' => array( 'link', '=', 'url' ), ); $this->controls['linkCustom'] = array( 'tab' => 'content', 'group' => 'image', 'label' => esc_html__( 'Custom links', 'bricksable' ), 'type' => 'repeater', 'fields' => array( 'link' => array( 'label' => esc_html__( 'Link', 'bricksable' ), 'type' => 'link', 'exclude' => array( 'lightboxImage', 'lightboxVideo', ), ), ), 'placeholder' => esc_html__( 'Custom link', 'bricksable' ), 'required' => array( 'link', '=', 'custom' ), ); } public function enqueue_scripts() { if ( isset( $this->settings['link'] ) && 'lightbox' === $this->settings['link'] ) { wp_enqueue_script( 'bricks-photoswipe' ); wp_enqueue_style( 'bricks-photoswipe' ); } } public function get_random_image_settings( $settings ) { $items = isset( $settings['randomImageGallery'] ) ? $settings['randomImageGallery'] : array(); $size = ! empty( $items['size'] ) ? $items['size'] : BRICKS_DEFAULT_IMAGE_SIZE; // Dynamic Data. if ( ! empty( $items['useDynamicData'] ) ) { $items['images'] = array(); $images = $this->render_dynamic_data_tag( $items['useDynamicData'], 'image' ); if ( is_array( $images ) ) { foreach ( $images as $image_id ) { $items['images'][] = array( 'id' => $image_id, 'full' => wp_get_attachment_image_url( $image_id, 'full' ), 'url' => wp_get_attachment_image_url( $image_id, $size ), ); } } } // Either empty OR old data structure used before 1.0 (images were saved as one array directly on $items). if ( ! isset( $items['images'] ) ) { $images = ! empty( $items ) ? $items : array(); unset( $items ); $items['images'] = $images; } // Get 'size' from first image if not set (previous to 1.4-RC). $first_image_size = ! empty( $items['images'][0]['size'] ) ? $items['images'][0]['size'] : false; $size = empty( $items['size'] ) && $first_image_size ? $first_image_size : $size; // Calculate new image URL if size is not the same as from the Media Library. if ( $first_image_size && $first_image_size !== $size ) { foreach ( $items['images'] as $key => $image ) { $items['images'][ $key ]['size'] = $size; $items['images'][ $key ]['url'] = wp_get_attachment_image_url( $image['id'], $size ); } } $settings['items'] = $items; $settings['items']['size'] = $size; return $settings; } public function render() { $settings = $this->settings; $image_settings = $this->get_random_image_settings( $this->settings ); $images = ! empty( $image_settings['items']['images'] ) ? $image_settings['items']['images'] : false; $size = ! empty( $image_settings['items']['size'] ) ? $image_settings['items']['size'] : BRICKS_DEFAULT_IMAGE_SIZE; $link_to = ! empty( $settings['link'] ) ? $settings['link'] : false; $has_html_tag = isset( $settings['tag'] ); // Return placeholder. if ( ! $images ) { if ( ! empty( $settings['items']['useDynamicData'] ) ) { if ( BRICKS_DB_TEMPLATE_SLUG !== get_post_type( $this->post_id ) ) { return $this->render_element_placeholder( array( 'title' => esc_html__( 'Dynamic data is empty.', 'bricks' ), ) ); } } else { return $this->render_element_placeholder( array( 'title' => esc_html__( 'No image selected.', 'bricks' ), ) ); } } // Check: Global classes on Image element for '_gradient' setting. $element_global_classes = ! empty( $settings['_cssGlobalClasses'] ) ? $settings['_cssGlobalClasses'] : false; if ( ! $has_html_tag && is_array( $element_global_classes ) ) { $all_global_classes = Database::$global_data['globalClasses']; foreach ( $element_global_classes as $element_global_class ) { $index = array_search( $element_global_class, array_column( $all_global_classes, 'id' ), true ); $global_class = ! empty( $all_global_classes[ $index ] ) ? $all_global_classes[ $index ] : false; // Global class has 'gradient' setting: Add HTML tag to Image element to make ::before work. if ( $global_class && strpos( wp_json_encode( $global_class ), '_gradient' ) ) { $has_html_tag = true; } } } /** * Render: Wrap 'img' HTML tag in HTML tag (if 'tag' set) or anchor tag (if 'link' set) */ $output = ''; // Add _root attributes to outermost tag. if ( $has_html_tag ) { $this->set_attribute( '_root', 'class', 'tag brxe-image ' ); $output .= "<{$this->tag} {$this->render_attributes( '_root' )}>"; } if ( $images ) { foreach ( $images as $index => $item ) { $rand_keys = array_rand( $images, 1 ); $image = $images[ $rand_keys ]; $image_atts['id'] = 'image-' . $image['id']; $close_a_tag = false; if ( $link_to ) { if ( isset( $settings['newTab'] ) ) { $this->set_attribute( 'link', 'target', '_blank' ); } if ( 'attachment' === $link_to && isset( $image['id'] ) ) { $close_a_tag = true; $this->set_attribute( 'link', 'href', get_permalink( $image['id'] ) ); } elseif ( 'media' === $link_to ) { $close_a_tag = true; $this->set_attribute( 'link', 'href', wp_get_attachment_url( $image['id'] ) ); } elseif ( 'custom' === $link_to && isset( $settings['linkCustom'][ $index ]['link'] ) ) { $close_a_tag = true; $this->set_link_attributes( "a-$index", $settings['linkCustom'][ $index ]['link'] ); } if ( 'custom' === $link_to ) { $output .= "render_attributes( "a-$index" )}>"; } else { $output .= "render_attributes( 'link' )}>"; } } // Render. $image_atts = array(); $img_classes = array( 'post-thumbnail', 'image' ); if ( isset( $size ) ) { $img_classes[] = 'size-' . $size; } if ( ! $has_html_tag ) { $img_classes[] = $this->attributes['_root']['class'][0]; } if ( isset( $settings['link'] ) && 'lightbox' === $settings['link'] ) { $img_classes[] = 'bricks-lightbox'; $image_src = $image['id'] ? wp_get_attachment_image_src( $image['id'], $size ) : array( \Bricks\Builder::get_template_placeholder_image(), 800, 600, ); $image_atts['data-bricks-lightbox-source'] = $image_src[0]; $image_atts['data-bricks-lightbox-width'] = $image_src[1]; $image_atts['data-bricks-lightbox-height'] = $image_src[2]; $image_atts['data-bricks-lightbox-index'] = $index; $image_atts['data-bricks-lightbox-id'] = $this->id; } $image_atts['class'] = join( ' ', $img_classes ); if ( ! $has_html_tag ) { $this->set_attribute( 'img', 'class', 'css-filter' ); foreach ( $this->attributes['_root'] as $key => $value ) { $image_attributes[ $key ] = is_array( $value ) ? join( ' ', $value ) : $value; } foreach ( $this->attributes['img'] as $key => $value ) { if ( isset( $image_attributes[ $key ] ) ) { $image_attributes[ $key ] .= ' ' . ( is_array( $value ) ? join( ' ', $value ) : $value ); } else { $image_attributes[ $key ] = is_array( $value ) ? join( ' ', $value ) : $value; } } // Merge custom attributes with img attributes. $custom_attributes = $this->get_custom_attributes( $settings ); $image_attributes = array_merge( $image_attributes, $custom_attributes, $image_atts ); $output .= wp_get_attachment_image( $image['id'], $size, false, $image_attributes ); } else { $output .= wp_get_attachment_image( $image['id'], $size, false, $image_atts ); } if ( $close_a_tag ) { $output .= ''; } break; } } else { esc_html_e( 'No image(s) selected.', 'bricksable' ); } if ( $has_html_tag ) { $output .= "tag}>"; } //phpcs:ignore echo $output; } }