File: /home/plandeptncgov/public_html/wp-content/plugins/codevz-plus/elementor/widgets/image.php
<?php if ( ! defined( 'ABSPATH' ) ) {exit;} // Exit if accessed directly.
use Codevz_Plus as Codevz_Plus;
use Elementor\Utils;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
class Xtra_Elementor_Widget_image extends Widget_Base {
protected $id = 'cz_image';
public function get_name() {
return $this->id;
}
public function get_title() {
return esc_html__( 'Image', 'codevz' );
}
public function get_icon() {
return 'xtra-image';
}
public function get_categories() {
return [ 'xtra' ];
}
public function get_keywords() {
return [
esc_html__( 'XTRA', 'codevz' ),
esc_html__( 'Image', 'codevz' ),
esc_html__( 'Photo', 'codevz' ),
esc_html__( 'Shot', 'codevz' )
];
}
public function get_style_depends() {
return [ $this->id, 'cz_parallax', 'codevz-tilt' ];
}
public function get_script_depends() {
return [ $this->id, 'cz_parallax', 'codevz-tilt' ];
}
protected function register_controls() {
$free = Codevz_Plus::is_free();
$this->start_controls_section(
'section_image',
[
'label' => esc_html__( 'Settings', 'codevz' ),
]
);
$this->add_control(
'image',
[
'label' => esc_html__( 'Image', 'codevz' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Codevz_Plus::$url . 'assets/img/p.svg',
],
]
);
$this->add_control(
'fx_hover',
[
'label' => esc_html__( 'Hover effect', 'codevz' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SELECT,
'default' => 'cz_image_no_fx',
'options' => [
'cz_image_no_fx' => esc_html__( 'Select', 'codevz' ),
'cz_image_simple_fade' => esc_html__( 'Simple Fade', 'codevz' ),
'cz_image_flip_h' => esc_html__( 'Flip Horizontal', 'codevz' ),
'cz_image_flip_v' => esc_html__( 'Flip Vertical', 'codevz' ),
'cz_image_fade_to_top' => esc_html__( 'Fade To Top', 'codevz' ),
'cz_image_fade_to_bottom' => esc_html__( 'Fade To Bottom', 'codevz' ),
'cz_image_fade_to_left' => esc_html__( 'Fade To Left', 'codevz' ),
'cz_image_fade_to_right' => esc_html__( 'Fade To Right', 'codevz' ),
'cz_image_zoom_in' => esc_html__( 'Zoom In', 'codevz' ),
'cz_image_zoom_out' => esc_html__( 'Zoom Out', 'codevz' ),
'cz_image_blurred' => esc_html__( 'Blurred', 'codevz' ),
],
]
);
$this->add_control(
'hover_image',
[
'label' => esc_html__( 'Hover Image', 'codevz' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Codevz_Plus::$url . 'assets/img/p.svg',
],
'condition' => [
'fx_hover' => [
'cz_image_simple_fade',
'cz_image_flip_h',
'cz_image_flip_v',
'cz_image_fade_to_top',
'cz_image_fade_to_bottom',
'cz_image_fade_to_left',
'cz_image_fade_to_right',
'cz_image_zoom_in',
'cz_image_zoom_out',
'cz_image_blurred',
],
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `image_size` and `image_custom_dimension`.
'default' => 'full',
'separator' => 'none',
]
);
$this->add_control(
'css_position',
[
'label' => esc_html__( 'Image Position', 'codevz' ),
'type' => Controls_Manager::SELECT,
'default' => 'relative',
'options' => [
'relative' => esc_html__( 'Inline', 'codevz' ),
'relative;display: block;text-align:center' => esc_html__( 'Block', 'codevz' ),
'relative;float:left' => esc_html__( 'Left', 'codevz' ),
'relative;display: table;margin:0 auto' => esc_html__( 'Center', 'codevz' ),
'relative;float:right' => esc_html__( 'Right', 'codevz' ),
'relative;float:left;margin:0 auto' => esc_html__( 'Left (center_in_mobile)', 'codevz' ),
'relative;float:right;margin:0 auto' => esc_html__( 'Right (center_in_mobile)', 'codevz' ),
],
'selectors' => [
'{{WRAPPER}} .cz_image > div' => 'position: {{VALUE}};',
],
]
);
$this->add_control(
'link_type',
[
'label' => esc_html__( 'Link Type', 'codevz' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => [
'none' => esc_html__( 'None', 'codevz' ),
'lightbox' => esc_html__( 'Link to large image (Lightbox)', 'codevz' ),
'custom' => esc_html__( 'Custom', 'codevz' ),
],
]
);
$this->add_control(
'link',
[
'label' => esc_html__( 'Link', 'codevz' ),
'type' => Controls_Manager::URL,
'placeholder' => 'https://codevz.com',
'condition' => [
'link_type' => 'custom',
]
]
);
$this->add_control(
'tooltip',
[
'label' => esc_html__('Tooltip','codevz'),
'type' => $free ? 'codevz_pro' : Controls_Manager::TEXT,
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_caption',
[
'label' => esc_html__( 'Caption', 'codevz' )
]
);
$this->add_control(
'content',
[
'label' => esc_html__('Caption','codevz'),
'type' => Controls_Manager::WYSIWYG
]
);
$this->add_control(
'sticky_caption',
[
'label' => esc_html__( 'Sticky on mouse hover?', 'codevz' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SWITCHER
]
);
$this->add_control(
'smart_fs',
[
'label' => esc_html__( 'Mobile smart font size?', 'codevz' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SWITCHER
]
);
$this->end_controls_section();
// Tilt controls.
Xtra_Elementor::tilt_controls( $this );
// Parallax settings.
Xtra_Elementor::parallax_settings( $this );
$this->start_controls_section(
'section_style_image',
[
'label' => esc_html__( 'Image', 'codevz' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'css_width',
[
'label' => esc_html__( 'Custom Width', 'codevz' ),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => '%',
],
'size_units' => [ '%', 'px', 'vw' ],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
'px' => [
'min' => 50,
'max' => 2000,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .cz_image > div' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'sk_image',
[
'label' => esc_html__( 'Container', 'codevz' ),
'type' => 'stylekit',
'settings' => [ 'background', 'padding', 'border', 'box-shadow' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_image' ),
]
);
$this->add_responsive_control(
'sk_image_in',
[
'label' => esc_html__( 'Image', 'codevz' ),
'type' => 'stylekit',
'settings' => [ 'background', 'padding', 'border', 'box-shadow' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_image_in', '.cz_image:hover .cz_image_in' ),
]
);
$this->add_responsive_control(
'svg_bg',
[
'label' => esc_html__( 'Background layer', 'codevz' ),
'type' => $free ? 'stylekit_pro' : 'stylekit',
'settings' => [ 'background', 'top', 'left', 'width', 'height' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_svg_bg:before' ),
]
);
$this->add_responsive_control(
'sk_caption',
[
'label' => esc_html__( 'Caption', 'codevz' ),
'type' => 'stylekit',
'settings' => [ 'background', 'color', 'border', 'position', 'top', 'left' ],
'selectors' => Xtra_Elementor::sk_selectors(
'.cz_image_caption',
'.cz_image:hover .cz_image_caption'
),
]
);
}
public function render() {
$settings = $this->get_settings_for_display();
// Link.
$a_before = $a_after = '';
if ( $settings['link_type'] === 'lightbox' && ! empty( $settings[ 'image' ][ 'url' ] ) ) {
$a_before = '<a href="' . $settings[ 'image' ][ 'url' ] . '">';
$a_after = '</a>';
} else if ( $settings['link_type'] === 'custom' ) {
$this->add_link_attributes( 'link', $settings['link'] );
$a_before = '<a '. $this->get_render_attribute_string( 'link' ) . '>';
$a_after = '</a>';
}
// Tooltip.
$tooltip = $settings['tooltip'] ? ' data-title="' . $settings['tooltip'] . '"' : '';
// Get images.
$image = Group_Control_Image_Size::get_attachment_image_html( $settings );
// Hover effect.
if ( ! empty( $settings['hover_image']['id'] ) ) {
$settings['image'] = $settings['hover_image'];
$hover_image = Group_Control_Image_Size::get_attachment_image_html( $settings );
} else {
$hover_image = $image;
}
// Hover.
$hover_image_tag = '<div class="cz_hover_image">' . $hover_image .'</div>';
// Caption.
$caption = $settings['content'] ? '<div class="cz_image_caption mt10">' . $settings['content'] . '</div>' : '';
// Background layer.
$svg_bg = $settings['svg_bg'] ? ' class="cz_svg_bg"' : '';
// Widget classes.
$classes = array();
$classes[] = 'cz_image clr';
$classes[] = $settings['fx_hover'];
$classes[] = $settings['smart_fs'] ? 'cz_smart_fs' : '';
$classes[] = $settings['tooltip'] ? 'cz_tooltip_up' : '';
$classes[] = $settings['sticky_caption'] ? 'cz_image_caption_sticky' : '';
$classes[] = ( $settings['css_position'] === 'relative' ) ? 'center_on_mobile' : '';
$classes[] = Codevz_Plus::contains( $settings['css_position'], 'margin' ) ? 'center_on_mobile' : '';
// Fullwidth image.
if ( ! empty( $settings[ 'css_width' ][ 'size' ] ) ) {
if ( $settings[ 'css_width' ][ 'size' ] == '100' && $settings[ 'css_width' ][ 'unit' ] == '%' ) {
$classes[] = 'xtra-image-full-width';
}
}
if ( ! empty( $settings[ 'css_width_tablet' ][ 'size' ] ) ) {
if ( $settings[ 'css_width_tablet' ][ 'size' ] == '100' && $settings[ 'css_width_tablet' ][ 'unit' ] == '%' ) {
$classes[] = 'xtra-image-full-width-tablet';
}
}
if ( ! empty( $settings[ 'css_width_mobile' ][ 'size' ] ) ) {
if ( $settings[ 'css_width_mobile' ][ 'size' ] == '100' && $settings[ 'css_width_mobile' ][ 'unit' ] == '%' ) {
$classes[] = 'xtra-image-full-width-mobile';
}
}
// Parallax.
Xtra_Elementor::parallax( $settings );
// Link before.
echo wp_kses_post( $a_before );
?>
<div<?php echo Codevz_Plus::classes( [], $classes ); ?>>
<div<?php echo wp_kses_post( $svg_bg . $tooltip ); ?>>
<div class="cz_image_in"<?php echo Codevz_Plus::tilt( $settings ); ?>>
<div class="cz_main_image"><?php echo wp_kses_post( $image ); ?></div>
<?php echo wp_kses_post( $hover_image_tag ); ?>
</div>
<?php echo wp_kses_post( $caption ); ?>
</div>
</div>
<?php
// Close link.
echo wp_kses_post( $a_after );
// Close parallax.
Xtra_Elementor::parallax( $settings, true );
}
protected function content_template(){
?>
<#
if ( settings.image.url ) {
var image = {
id: settings.image.id,
url: settings.image.url,
size: settings.image_size,
dimension: settings.image_custom_dimension,
model: view.getEditModel()
};
var image_url = elementor.imagesManager.getImageUrl( image );
if ( ! image_url ) {
return;
}
}
if ( settings.hover_image.url ) {
var hover_image = {
id: settings.hover_image.id,
url: settings.hover_image.url,
size: settings.image_size,
dimension: settings.image_custom_dimension,
model: view.getEditModel()
};
var hover_image_url = elementor.imagesManager.getImageUrl( hover_image );
if ( ! hover_image_url ) {
return;
}
}
// Images.
var image = '<img src="' + image_url + '" />',
image_url = settings.hover_image.id ? hover_image_url : image_url,
hover_image = '<img src="' + image_url + '" />',
a_before = a_after = '';
// Link.
if ( settings.link_type === 'lightbox' ) {
a_before = '<a href="{{ settings.link.url }}" data-xtra-lightbox>';
a_after = '</a>';
} else if ( settings.link_type === 'custom' ) {
a_before = '<a href="{{ settings.link.url }}">';
a_after = '</a>';
}
// Widget classes.
var classes = 'cz_image clr',
classes = classes + ( settings.fx_hover ? ' ' + settings.fx_hover : '' ),
classes = classes + ( settings.smart_fs ? ' cz_smart_fs' : '' ),
classes = classes + ( settings.tooltip ? ' cz_tooltip_up' : '' ),
classes = classes + ( settings.sticky_caption ? ' cz_image_caption_sticky' : '' ),
classes = classes + ( settings.css_position === 'relative' ? 'center_on_mobile' : '' ),
classes = classes + ( settings.css_position.indexOf( 'margin' ) >= 0 ? 'center_on_mobile' : '' ),
caption = settings.content ? '<div class="cz_image_caption mt10">' + settings.content + '</div>' : '',
tooltip = settings.tooltip ? ' data-title="' + settings.tooltip + '"' : '',
hover_image_tag = hover_image ? '<div class="cz_hover_image">' + hover_image +'</div>' : '',
parallaxOpen = xtraElementorParallax( settings ),
parallaxClose = xtraElementorParallax( settings, true ),
tilt = xtraElementorTilt( settings ),
svg_bg = settings.svg_bg ? ' class="cz_svg_bg"' : '';
#>
{{{ parallaxOpen }}}
{{{ a_before }}}
<div class="{{{ classes }}}">
<div{{{ svg_bg }}}{{{ tooltip }}}>
<div class="cz_image_in" {{{ tilt }}}>
<div class="cz_main_image">{{{ image }}}</div>
{{{ hover_image_tag }}}
</div>
{{{ caption }}}
</div>
</div>
{{{ a_after }}}
{{{ parallaxClose }}}
<?php
}
}