# bricksable/1.3.0/includes/elements/element-image-scroller.php

Bricksable for Bricks Builder, version 1.3.0. 632 lines.

- Page: https://pluginprobe.com/plugins/bricksable/1.3.0/code/includes/elements/element-image-scroller.php
- Raw: https://pluginprobe.com/plugins/bricksable/1.3.0/raw/includes/elements/element-image-scroller.php
- Modified: 2021-09-12T09:49:06+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/bricksable/1.3.0/code/includes/elements/element-image-scroller.php#L10-L20`.

```php
<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
class Bricksable_Image_Scroller extends \Bricks\Element {

	public $category     = 'bricksable';
	public $name         = 'ba-image-scroller';
	public $icon         = 'ti-image';
	public $css_selector = 'img';
	public $scripts      = array( 'bricksableImageScroller' );


	public function get_label() {
		return esc_html__( 'Image Scroller', 'bricksable' );
	}

	public function set_control_groups() {
		$this->control_groups['settings'] = array(
			'title' => esc_html__( 'Settings', 'bricksable' ),
			'tab'   => 'content',
		);
	}

	public function set_controls() {

		$this->controls['_margin']['css'][0]['selector'] = '';
		$this->controls['_margin']['placeholder']        = array(
			'top'    => 0,
			'right'  => 'auto',
			'bottom' => 0,
			'left'   => 'auto',
		);

		$this->controls['_typography']['css'][0]['selector'] = 'figure > *';
		$this->controls['_gradient']['css'][0]['selector']   = '.image-wrapper';

		$this->controls['image'] = array(
			'tab'  => 'content',
			'type' => 'image',
		);

		$this->controls['altText'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Custom alt text', 'bricksable' ),
			'type'     => 'text',
			'inline'   => true,
			'required' => array( 'image', '!=', '' ),
		);

		$this->controls['stretch'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Stretch', 'bricksable' ),
			'type'  => 'checkbox',
		);

		// Link To.

		$this->controls['linkToSeparator'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Link To', 'bricksable' ),
		);

		$this->controls['link'] = array(
			'tab'         => 'content',
			'type'        => 'select',
			'options'     => array(
				'lightbox'   => esc_html__( 'Lightbox', 'bricksable' ),
				'attachment' => esc_html__( 'Attachment Page', 'bricksable' ),
				'media'      => esc_html__( 'Media File', 'bricksable' ),
				'url'        => esc_html__( 'Other (URL)', 'bricksable' ),
			),
			'placeholder' => esc_html__( 'None', 'bricksable' ),
		);

		$this->controls['url'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Link type', 'bricksable' ),
			'type'     => 'link',
			'required' => array( 'link', '=', 'url' ),
		);

		$this->controls['popupOverlay'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Image overlay', 'bricksable' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.image-overlay:after',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		// Icon

		$this->controls['popupSeparator'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon', 'bricksable' ),
			'type'     => 'separator',
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		// To hide icon for specific elements when image icon set in styles
		$this->controls['popupIconDisable'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Disable icon', 'bricksable' ),
			'type'        => 'checkbox',
			'description' => esc_html__( 'Precedes: "Theme Styles > Element - Image"', 'bricksable' ),
			// 'required' => ['link', '!=', ''],
		);

		$this->controls['popupIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon', 'bricksable' ),
			'type'     => 'icon',
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		// NOTE: Set popup CSS control outside of control 'link' (CSS is not applied to nested controls)
		$this->controls['popupIconBackgroundColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon background color', 'bricksable' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		$this->controls['popupIconBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon border', 'bricksable' ),
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		$this->controls['popupIconBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon box shadow', 'bricksable' ),
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		$this->controls['popupIconHeight'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon height', 'bricksable' ),
			'type'     => 'number',
			'unit'     => 'px',
			'css'      => array(
				array(
					'property' => 'line-height',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		$this->controls['popupIconWidth'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon width', 'bricksable' ),
			'type'     => 'number',
			'unit'     => 'px',
			'css'      => array(
				array(
					'property' => 'width',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		$this->controls['popupIconTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon typography', 'bricksable' ),
			'type'     => 'typography',
			'exclude'  => array(
				'font-family',
				'font-weight',
				'text-align',
				'text-transform',
				'line-height',
				'letter-spacing',
			),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.popup-icon',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'link', '!=', '' ),
		);

		// Caption

		$this->controls['captionSeparator'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Caption', 'bricksable' ),
		);

		$this->controls['caption'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Caption Type', 'bricksable' ),
			'type'        => 'select',
			'options'     => array(
				'none'       => esc_html__( 'No caption', 'bricksable' ),
				'attachment' => esc_html__( 'Attachment', 'bricksable' ),
				'custom'     => esc_html__( 'Custom', 'bricksable' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Select', 'bricksable' ),
			'description' => esc_html__( 'Default: "Theme Styles > Element - Image"', 'bricksable' ),
		);

		$this->controls['captionCustom'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Custom caption', 'bricksable' ),
			'type'        => 'text',
			'placeholder' => esc_html__( 'Here goes your caption ...', 'bricksable' ),
			'required'    => array( 'caption', '=', 'custom' ),
		);

		// Image Scroller Settings.
		$this->controls['scroller_height'] = array(
			'tab'         => 'content',
			'group'       => 'settings',
			'label'       => esc_html__( 'Height', 'bricksable' ),
			'type'        => 'slider',
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => '.image-wrapper',
				),
				array(
					'property' => 'transform',
					'selector' => ':hover .image-wrapper img',
					'value'    => 'translateY(calc(-100% + ' . $this->settings['scroller_height'] . '))',
				),
			),
			'units'       => array(
				'px' => array(
					'min'  => 1,
					'max'  => 1600,
					'step' => 1,
				),
				'vh' => array(
					'min'  => 1,
					'max'  => 100,
					'step' => 1,
				),
			),
			'default'     => '300px',
			'placeholder' => esc_html__( '300px', 'bricksable' ),
			'description' => esc_html__( "Adjust the Scroller container's height.", 'bricksable' ),
		);

		$this->controls['scroll_direction'] = array(
			'tab'         => 'content',
			'group'       => 'settings',
			'label'       => esc_html__( 'Scroll Direction', 'bricksable' ),
			'type'        => 'select',
			'options'     => array(
				'vertical'   => esc_html__( 'Vertical', 'bricksable' ),
				'horizontal' => esc_html__( 'Horizontal', 'bricksable' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Vertical', 'bricksable' ),
		);

	}

	public function enqueue_scripts() {
		if ( '' === get_option( 'bricksable_combine_minify_js' ) || false === get_option( 'bricksable_combine_minify_js' ) ) {
			wp_enqueue_script( 'ba-image-scroller' );
		}
	}


	public function get_normalized_image_settings( $settings ) {
		if ( ! isset( $settings['image'] ) ) {
			$settings['image'] = array(
				'id'  => 0,
				'url' => '',
			);
			return $settings;
		}

		$image = $settings['image'];

		if ( isset( $image['useDynamicData']['name'] ) ) {
			$images      = $this->render_dynamic_data_tag( $image['useDynamicData']['name'] );
			$image['id'] = empty( $images ) ? 0 : $images[0];
		} else {
			$image['id'] = isset( $image['id'] ) ? $image['id'] : 0;
		}

		// Image Size
		$image['size'] = isset( $image['size'] ) ? $settings['image']['size'] : BRICKS_DEFAULT_IMAGE_SIZE;

		// Image URL
		if ( ! isset( $image['url'] ) ) {
			$image['url'] = wp_get_attachment_image_url( $image['id'], $image['size'] );
		}

		$settings['image'] = $image;

		return $settings;
	}


	// NOTE: Use WP function 'wp_get_attachment_image' to render image (built-in responsive image implementation)
	public function render() {
		$settings = $this->settings;
		$settings = $this->get_normalized_image_settings( $settings );

		//echo $this->generate_css_string_from_element();

		// Dynamic Data is empty
		if ( isset( $settings['image']['useDynamicData']['name'] ) ) {

			if ( empty( $settings['image']['id'] ) ) {

				if ( 'ACF' === $settings['image']['useDynamicData']['group'] && ! class_exists( 'ACF' ) ) {
					$message = esc_html__( 'Can\'t render element, as the selected ACF field is not available. Please activate ACF or edit the element to select different data.', 'bricksable' );
				} elseif ( '{featured_image}' == $settings['image']['useDynamicData']['name'] ) {
					$message = esc_html__( 'No featured image set.', 'bricksable' );
				} else {
					$message = esc_html__( 'Dynamic Data %1$s (%2$s) is empty.', 'bricksable' );
				}

				return $this->render_element_placeholder(
					array(
						'icon-class' => 'ti-image',
						'text'       => sprintf(
							$message,
							$settings['image']['useDynamicData']['label'],
							$settings['image']['useDynamicData']['group']
						),
					)
				);
			}
		}

		// Image id is empty or doesn't exist
		else {

			// No image
			if ( empty( $settings['image']['id'] ) ) {
				return $this->render_element_placeholder(
					array(
						'icon-class' => 'ti-image',
						'text'       => esc_html__( 'No image selected.', 'bricksable' ),
					)
				);
			}

			// Return if image ID does not exist
			if ( ! wp_get_attachment_image_src( $settings['image']['id'] ) ) {
				return $this->render_element_placeholder(
					array(
						'icon-class' => 'ti-image',
						'text'       => sprintf( esc_html__( 'Image ID (%s) no longer exist. Please select another image.', 'bricksable' ), $settings['image']['id'] ),
					)
				);
			}
		}

		// Render
		$image_atts       = array();
		$image_atts['id'] = 'image-' . $settings['image']['id'];

		// Check for alternartive "Alt Text" setting
		if ( isset( $settings['altText'] ) ) {
			$image_atts['alt'] = esc_attr( $settings['altText'] );
		}

		$image_wrapper_classes = array( 'image-wrapper', 'ba-image-scroller-' . $settings['scroll_direction'] );
		$img_classes           = array( 'post-thumbnail', 'css-filter' );

		if ( isset( $settings['stretch'] ) ) {
			$img_classes[] = 'stretch';
		}

		if ( isset( $settings['link'] ) ) {
			$image_wrapper_classes[] = 'image-overlay';
		}

		if ( isset( $settings['link'] ) && $settings['link'] === 'lightbox' ) {
			$img_classes[] = 'bricks-lightbox';

			$image_src = $settings['image']['id'] ? wp_get_attachment_image_src( $settings['image']['id'], 'full' ) : 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];
		}

		$img_classes[]       = 'size-' . $settings['image']['size'];
		$image_atts['class'] = join( ' ', $img_classes );

		$show_caption = isset( $settings['caption'] ) ? $settings['caption'] : 'attachment';

		if ( $show_caption === 'none' ) {
			$image_caption = false;
		} elseif ( $show_caption === 'custom' && isset( $settings['captionCustom'] ) ) {
			$image_caption = trim( $settings['captionCustom'] );
		} else {
			$image_data    = get_post( $settings['image']['id'] );
			$image_caption = $image_data ? $image_data->post_excerpt : '';
		}

		if ( $image_caption ) {
			echo '<figure>';
		}

		$this->set_attribute( 'image-wrapper', 'class', $image_wrapper_classes );

		echo '<div ' . $this->render_attributes( 'image-wrapper' ) . '>';

		$close_a_tag = false;

		if ( isset( $settings['link'] ) && $settings['link'] === 'media' ) {
			$close_a_tag = true;

			echo '<a href="' . wp_get_attachment_url( $settings['image']['id'] ) . '" target="_blank">';
		}

		if ( isset( $settings['link'] ) && $settings['link'] === 'attachment' ) {
			echo '<a href="' . get_permalink( $settings['image']['id'] ) . '" target="_blank">';
		}

		if ( isset( $settings['link'] ) && $settings['link'] === 'url' && isset( $settings['url'] ) ) {
			$close_a_tag = true;

			// Link
			$this->set_link_attributes( 'a', $settings['url'] );

			echo '<a ' . $this->render_attributes( 'a' ) . '>';
		}

		// Show icon only if 'Link to' is set
		if ( ! isset( $settings['popupIconDisable'] ) && isset( $settings['link'] ) && isset( $settings['popupIcon']['icon'] ) ) {
			$icon_classes = array( 'popup-icon', $settings['popupIcon']['icon'] );

			if ( isset( $settings['link'] ) && $settings['link'] === 'lightbox' ) {
				$icon_classes[] = 'lightbox';
			}

			$this->set_attribute( 'popup-icon', 'class', $icon_classes );

			echo '<i ' . $this->render_attributes( 'popup-icon' ) . '></i>';
		}

		// Lazy load atts set via 'wp_get_attachment_image_attributes' filter
		if ( isset( $settings['image']['id'] ) ) {
			echo wp_get_attachment_image( $settings['image']['id'], $settings['image']['size'], false, $image_atts );
		} elseif ( ! empty( $settings['image']['url'] ) ) {
			echo '<img src="' . $settings['image']['url'] . '">';
		}

		if ( $close_a_tag ) {
			echo '</a>';
		}

		echo '</div>';

		if ( $image_caption ) {
			echo '<figcaption class="bricks-image-caption">' . esc_html( $image_caption ) . '</figcaption></figure>';
		}

	}


	public function get_block_html( $settings ) {
		if ( ! isset( $settings['image'] ) ) {
			return;
		}

		$figure_classes = array( 'wp-block-image', 'size-' . $settings['image']['size'] );

		if ( isset( $settings['_typography']['text-align'] ) ) {
			$figure_classes[] = 'align' . $settings['_typography']['text-align'];
		}

		$this->set_attribute( 'figure', 'class', $figure_classes );

		$this->set_attribute( 'image', 'src', $settings['image']['url'] );
		$this->set_attribute( 'image', 'alt', '' );
		$this->set_attribute( 'image', 'class', 'wp-image-' . $settings['image']['id'] );

		if ( isset( $settings['_width'] ) && strpos( $settings['_width'], 'px' ) !== false ) {
			$this->set_attribute( 'image', 'width', str_replace( 'px', '', $settings['_width'] ) );
		}

		if ( isset( $settings['_height'] ) && strpos( $settings['_height'], 'px' ) !== false ) {
			$this->set_attribute( 'image', 'height', str_replace( 'px', '', $settings['_height'] ) );
		}

		$block_html = '<figure ' . $this->render_attributes( 'figure' ) . '>';

		if ( isset( $settings['link'] ) ) {
			if ( $settings['link'] === 'media' ) {
				$this->set_link_attributes( 'a', 'href', wp_get_attachment_url( $settings['image']['id'] ) );
			} elseif ( isset( $settings['url'] ) ) {
				$this->set_link_attributes( 'a', $settings['url'] );
			}

			$this->remove_attribute( 'a', 'class' );

			$block_html .= '<a ' . $this->render_attributes( 'a' ) . '>';
		}

		$block_html .= '<img ' . $this->render_attributes( 'image' ) . '>';

		if ( isset( $settings['link'] ) ) {
			$block_html .= '</a>';
		}

		$block_html .= '</figure>';

		return $block_html;
	}


	public function convert_element_settings_to_block( $settings ) {
		if ( ! isset( $settings['image'] ) ) {
			return;
		}

		$settings = $this->get_normalized_image_settings( $settings );

		$block = array(
			'blockName'    => $this->block,
			'attrs'        => array(
				'id'       => $settings['image']['id'],
				'sizeSlug' => $settings['image']['size'],
			),
			'innerContent' => array(),
		);

		if ( isset( $settings['_typography']['text-align'] ) ) {
			$block['attrs']['align'] = $settings['_typography']['text-align'];
		}

		if ( isset( $settings['_width'] ) && strpos( $settings['_width'], 'px' ) !== false ) {
			$block['attrs']['width'] = intval( str_replace( 'px', '', $settings['_width'] ) );
		}

		if ( isset( $settings['_height'] ) && strpos( $settings['_height'], 'px' ) !== false ) {
			$block['attrs']['height'] = intval( str_replace( 'px', '', $settings['_height'] ) );
		}

		if ( isset( $settings['link'] ) ) {
			if ( $settings['link'] === 'media' ) {
				$block['attrs']['linkDestination'] = 'media';
			} else {
				$block['attrs']['linkDestination'] = 'custom';
			}
		}

		$block['innerContent'] = array( $this->get_block_html( $settings ) );

		return $block;
	}

	public function convert_block_to_element_settings( $block, $attributes ) {
		$element_settings = array();

		$image_id   = isset( $attributes['id'] ) ? intval( $attributes['id'] ) : 0;
		$image_size = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'large';
		$image_url  = wp_get_attachment_image_src( $image_id, $image_size );

		if ( is_array( $image_url ) && isset( $image_url[0] ) ) {
			$image_url = $image_url[0];
		}

		if ( $image_id && $image_url ) {
			$element_settings['image'] = array(
				'filename' => basename( get_attached_file( $image_id ) ),
				'full'     => wp_get_attachment_image_src( $image_id, 'full' ),
				'id'       => $image_id,
				'size'     => $image_size,
				'url'      => $image_url,
			);
		}

		return $element_settings;
	}

}

```