# bricksable/1.3.0/includes/elements/element-before-after-image.php

Bricksable for Bricks Builder, version 1.3.0. 540 lines.

- Page: https://pluginprobe.com/plugins/bricksable/1.3.0/code/includes/elements/element-before-after-image.php
- Raw: https://pluginprobe.com/plugins/bricksable/1.3.0/raw/includes/elements/element-before-after-image.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-before-after-image.php#L10-L20`.

```php
<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Bricksable_Before_After_Image extends \Bricks\Element {
	public $category     = 'bricksable';
	public $name         = 'ba-before-after-image';
	public $icon         = 'ti-image';
	public $css_selector = '.ba-before-after-image-wrapper';
	public $scripts      = array( 'bricksableBAImage' );

	public function get_label() {
		return esc_html__( 'Before/After Image', 'bricksable' );
	}
	public function set_control_groups() {
		$this->control_groups['image']    = array(
			'title' => esc_html__( 'Image', 'bricksable' ),
			'tab'   => 'content',
		);
		$this->control_groups['label']    = array(
			'title' => esc_html__( 'Labels', 'bricksable' ),
			'tab'   => 'content',
		);
		$this->control_groups['control']  = array(
			'title' => esc_html__( 'Control', 'bricksable' ),
			'tab'   => 'content',
		);
		$this->control_groups['settings'] = array(
			'title' => esc_html__( 'Settings', 'bricksable' ),
			'tab'   => 'content',
		);
		unset( $this->control_groups['_typography'] );
	}

	public function set_controls() {
		// Images.
		$this->controls['before_image'] = array(
			'tab'     => 'content',
			'group'   => 'image',
			'type'    => 'image',
			'default' => array(
				'full' => 'https://source.unsplash.com/random/800x400?moon',
				'url'  => 'https://source.unsplash.com/random/800x400?moon',
			),
		);

		$this->controls['before_image_filter'] = array(
			'tab'    => 'content',
			'group'  => 'image',
			'label'  => esc_html__( 'Before Image filters', 'bricksable' ),
			'type'   => 'filters',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'filter',
					'selector' => '.ba-before-after-img-before',
				),
			),
		);

		$this->controls['after_image'] = array(
			'tab'     => 'content',
			'group'   => 'image',
			'type'    => 'image',
			'default' => array(
				'full' => 'https://source.unsplash.com/random/800x400?earth',
				'url'  => 'https://source.unsplash.com/random/800x400?earth',
			),
		);

		$this->controls['after_image_filter'] = array(
			'tab'    => 'content',
			'group'  => 'image',
			'label'  => esc_html__( 'After Image filters', 'bricksable' ),
			'type'   => 'filters',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'filter',
					'selector' => '.ba-before-after-img-after',
				),
			),
		);

		// Labels.
		$this->controls['show_labels'] = array(
			'tab'   => 'content',
			'group' => 'label',
			'label' => esc_html__( 'Show Labels', 'bricksable' ),
			'type'  => 'checkbox',
		);

		$this->controls['labels_onHover'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Show Labels On Hover', 'bricksable' ),
			'type'     => 'checkbox',
			'required' => array( 'show_labels', '=', true ),
		);

		$this->controls['before_label'] = array(
			'tab'            => 'content',
			'group'          => 'label',
			'label'          => esc_html__( 'Before Label', 'bricksable' ),
			'type'           => 'text',
			'inline'         => true,
			'default'        => 'Before Label',
			'hasDynamicData' => 'text',
			'required'       => array( 'show_labels', '=', true ),
		);

		$this->controls['after_label'] = array(
			'tab'            => 'content',
			'group'          => 'label',
			'label'          => esc_html__( 'After Label', 'bricksable' ),
			'type'           => 'text',
			'inline'         => true,
			'default'        => 'After Label',
			'hasDynamicData' => 'text',
			'required'       => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_alignment'] = array(
			'tab'         => 'content',
			'group'       => 'label',
			'label'       => esc_html__( 'Vertical align', 'bricksable' ),
			'type'        => 'select',
			'options'     => $this->control_options['alignItems'],
			'css'         => array(
				array(
					'property' => 'align-items',
					'selector' => '.ba-before-after-image-wrapper',
				),
				array(
					'property' => 'justify-content',
					'selector' => '.ba-before-after-image-wrapper',
				),
			),
			'inline'      => true,
			'default'     => 'center',
			'placeholder' => esc_html__( 'Center', 'bricksable' ),
			'required'       => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_typography'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Labels Typography', 'bricksable' ),
			'type'     => 'typography',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.ba-before-after-image-label',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_background_color'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Labels background color', 'bricksable' ),
			'type'     => 'color',
			'inline'   => true,
			'default'  => 'rgba(0,0,0,0.33)',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.ba-before-after-image-label',
				),
			),
			'required' => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_border'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Labels border', 'bricksable' ),
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.ba-before-after-image-label',
				),
			),
			'inline'   => true,
			'small'    => true,
			'default'  => array(
				'radius' => array(
					'top'    => 3,
					'right'  => 3,
					'bottom' => 3,
					'left'   => 3,
				),
			),
			'required' => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_BoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Labels box shadow', 'bricksable' ),
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.ba-before-after-image-label',
				),
			),
			'inline'   => true,
			'small'    => true,
			'required' => array( 'show_labels', '=', true ),
		);

		$this->controls['labels_Padding'] = array(
			'tab'      => 'content',
			'group'    => 'label',
			'label'    => esc_html__( 'Padding', 'bricksable' ),
			'type'     => 'dimensions',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.ba-before-after-image-label',
				),
			),
			'required' => [ 'show_labels', '=', true ],
		);

		// Controls.
		$this->controls['control_line_color'] = array(
			'tab'     => 'content',
			'group'   => 'control',
			'label'   => esc_html__( 'Control Line Color', 'bricksable' ),
			'type'    => 'color',
			'inline'  => true,
			'default' => '#ffffff',
			'css'     => array(
				array(
					'property' => 'background-color',
					'selector' => '.ba-before-after-image-control-line',
				),
				array(
					'property' => 'border-color',
					'selector' => '.ba-before-after-image-circle',
				),
			),
		);

		$this->controls['control_arrow_color'] = array(
			'tab'     => 'content',
			'group'   => 'control',
			'label'   => esc_html__( 'Control Arrow Color', 'bricksable' ),
			'type'    => 'color',
			'inline'  => true,
			'default' => '#ffffff',
			'css'     => array(
				array(
					'property' => 'border-right-color',
					'selector' => '.ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left',
				),
				array(
					'property' => 'border-left-color',
					'selector' => '.ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right',
				),
			),
		);

		$this->controls['add_circle'] = array(
			'tab'         => 'content',
			'group'       => 'control',
			'label'       => esc_html__( 'Add Circle', 'bricksable' ),
			'type'        => 'checkbox',
			'description' => esc_html__( 'Add Circle type to the control handler.', 'bricksable' ),
			'default'     => true,
		);

		$this->controls['control_circle_background_color'] = array(
			'tab'      => 'content',
			'group'    => 'control',
			'label'    => esc_html__( 'Control Circle Background Color', 'bricksable' ),
			'type'     => 'color',
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.ba-before-after-image-circle',
				),
			),
			'required' => array( 'add_circle', '=', true ),
		);

		$this->controls['control_circle_size'] = array(
			'tab'     => 'content',
			'group'   => 'control',
			'label'   => esc_html__( 'Circle Size', 'bricksable' ),
			'type'    => 'slider',
			'units'   => array(
				'px' => array(
					'min'  => 1,
					'max'  => 100,
					'step' => 1,
				),
			),
			'css'     => array(
				array(
					'property' => 'width',
					'selector' => '.ba-before-after-image-circle',
				),
				array(
					'property' => 'height',
					'selector' => '.ba-before-after-image-circle',
				),
			),
			'default' => '50px',
			'required' => array( 'add_circle', '=', true ),
		);

		$this->controls['control_circle_radius'] = array(
			'tab'     => 'content',
			'group'   => 'control',
			'label'   => esc_html__( 'Circle Radius', 'bricksable' ),
			'type'    => 'slider',
			'units'   => array(
				'px' => array(
					'min'  => 1,
					'max'  => 50,
					'step' => 1,
				),
			),
			'css'     => array(
				array(
					'property' => 'border-radius',
					'selector' => '.ba-before-after-image-circle',
				),
			),
			'default' => '50px',
			'required' => array( 'add_circle', '=', true ),
		);

		$this->controls['control_handler_width'] = array(
			'tab'     => 'content',
			'group'   => 'control',
			'label'   => esc_html__( 'Handler width', 'bricksable' ),
			'type'    => 'slider',
			'units'   => array(
				'px' => array(
					'min'  => 1,
					'max'  => 20,
					'step' => 1,
				),
			),
			'css'     => array(
				array(
					'property' => 'width',
					'selector' => '.ba-before-after-image-horizontal .ba-before-after-image-control-line',
				),
				array(
					'property' => 'height',
					'selector' => '.ba-before-after-image-vertical .ba-before-after-image-control-line',
				),
				array(
					'property' => 'border-width',
					'selector' => '.ba-before-after-image-circle',
				),
			),
			'default' => '2px',
		);

		// Settings.
		$this->controls['vertical_mode'] = array(
			'tab'   => 'content',
			'group' => 'settings',
			'label' => esc_html__( 'Vertical Mode', 'bricksable' ),
			'type'  => 'checkbox',
		);

		$this->controls['slider_move_type'] = array(
			'tab'         => 'content',
			'group'       => 'settings',
			'label'       => esc_html__( 'Slider Move Type', 'bricksable' ),
			'type'        => 'select',
			'options'     => array(
				'mouse_click'       => esc_html__( 'Move on Click', 'bricksable' ),
				'mouse_hover' => esc_html__( 'Move on Hover', 'bricksable' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'pasteStyles' => false,
			'default'     => 'mouse_click',
		);

		$this->controls['starting_point'] = array(
			'tab'         => 'content',
			'group'       => 'settings',
			'label'       => esc_html__( 'Starting point', 'bricksable' ),
			'type'        => 'number',
			'min'         => 0,
			'max'         => 100,
			'step'        => '10',
			'default'     => 50,
			'inline'      => true,
			'description' => esc_html__( 'The percentage to show of the before image.', 'bricksable' ),
		);
	}

	public function enqueue_scripts() {
		if ( '' === get_option( 'bricksable_combine_minify_js' ) || false === get_option( 'bricksable_combine_minify_js' ) ) {
			wp_enqueue_script( 'ba-before-after-image' );
			wp_localize_script(
				'ba-before-after-image',
				'bricksableBeforeAfterImageData',
				array(
					'BeforeAfterImageInstances' => array(),
				)
			);
		}
	}

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

		$image = $settings['before_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['before_image'] = $image;

		return $settings;
	}

	public function get_after_image_settings( $settings ) {
		if ( ! isset( $settings['after_image'] ) ) {
			$settings['after_image'] = array(
				'id'  => 1,
				'url' => '',
			);
			return $settings;
		}

		$image = $settings['after_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['after_image'] = $image;

		return $settings;
	}

	public function render() {
		$settings        = $this->settings;
		$before_settings = $this->get_before_image_settings( $settings );
		$after_settings  = $this->get_after_image_settings( $settings );
		$labels_on_hover = isset( $settings['labels_onHover'] ) ? true : false;

		$image_wrapper_classes   = array( 'ba-before-after-image-wrapper' );
		$image_wrapper_classes[] = true === $labels_on_hover ? 'ba-before-after-image-label-on-hover' : '';

		$image_before_atts       = array();
		$image_before_atts['id'] = isset( $image_before_atts['id'] ) ? 'image-' . $settings['before_image']['id'] : '';
		$image_after_atts        = array();
		$image_after_atts['id']  = isset( $image_after_atts['id'] ) ? 'image-' . $settings['after_image']['id'] : '';

		$before_after_image_options = array(
			'addCircle'     => isset( $settings['add_circle'] ) ? true : false,
			'verticalMode'  => isset( $settings['vertical_mode'] ) ? true : false,
			'onHover'       => $labels_on_hover,
			'hoverStart'	=> 'mouse_hover' === $settings['slider_move_type'] ? true : false,
			'startingPoint' => isset( $settings['starting_point'] ) ? intval( $settings['starting_point'] ) : 50,
		);

		$this->set_attribute( 'image-wrapper', 'class', $image_wrapper_classes );
		$this->set_attribute( 'image-wrapper', 'id', esc_attr( 'ba-before-after-image-' . $this->id ) );
		$this->set_attribute( 'image-wrapper', 'data-ba-bricks-before-after-image-options', wp_json_encode( $before_after_image_options ) );

		echo '<div ' . $this->render_attributes( 'image-wrapper' ) . '>'; //phpcs:ignore
		// Lazy load atts set via 'wp_get_attachment_image_attributes' filter.
		if ( isset( $settings['before_image']['id'] ) ) {
			echo wp_get_attachment_image( $settings['before_image']['id'], $settings['before_image']['size'], false, $image_before_atts );
		} elseif ( ! empty( $settings['before_image']['url'] ) ) {
			echo '<img src="' . esc_url( $settings['before_image']['url'] ) . '">';
		}
		if ( isset( $settings['show_labels'] ) ) {
			if ( isset( $settings['before_label'] ) ) {
				echo '<span class="ba-before-after-image-label ba-before-after-image-label-before keep">';
				echo esc_html( $settings['before_label'] );
				echo '</span>';
			}
			if ( isset( $settings['after_label'] ) ) {
				echo '<span class="ba-before-after-image-label ba-before-after-image-label-after keep">';
				echo esc_html( $settings['after_label'] );
				echo '</span>';
			}
		}

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

```