File: /home/smilepac/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\Icons_Manager;
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-plus' );
}
public function get_icon() {
return 'xtra-image';
}
public function get_categories() {
return [ 'xtra' ];
}
public function get_keywords() {
return [
esc_html__( 'XTRA', 'codevz-plus' ),
esc_html__( 'Codevz Plus', 'codevz-plus' ),
esc_html__( 'Image', 'codevz-plus' ),
esc_html__( 'Photo', 'codevz-plus' ),
'XTRA',
'Codevz Plus',
'Image',
'Photo',
'Shot',
'Picture',
'Visual',
'Media',
'Graphic',
'invert',
'border',
'image info box'
];
}
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-plus' ),
]
);
$this->add_control(
'image',
[
'label' => esc_html__( 'Image', 'codevz-plus' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Codevz_Plus::$url . 'assets/img/p.svg',
],
]
);
$this->add_control(
'fx_hover',
[
'label' => esc_html__( 'Hover effect', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SELECT,
'default' => 'cz_image_no_fx',
'options' => [
'cz_image_no_fx' => esc_html__( 'Select', 'codevz-plus' ),
'cz_image_simple_fade' => esc_html__( 'Simple Fade', 'codevz-plus' ),
'cz_image_flip_h' => esc_html__( 'Flip Horizontal', 'codevz-plus' ),
'cz_image_flip_v' => esc_html__( 'Flip Vertical', 'codevz-plus' ),
'cz_image_fade_to_top' => esc_html__( 'Fade To Top', 'codevz-plus' ),
'cz_image_fade_to_bottom' => esc_html__( 'Fade To Bottom', 'codevz-plus' ),
'cz_image_fade_to_left' => esc_html__( 'Fade To Left', 'codevz-plus' ),
'cz_image_fade_to_right' => esc_html__( 'Fade To Right', 'codevz-plus' ),
'cz_image_zoom_in' => esc_html__( 'Zoom In', 'codevz-plus' ),
'cz_image_zoom_out' => esc_html__( 'Zoom Out', 'codevz-plus' ),
'cz_image_blurred' => esc_html__( 'Blurred', 'codevz-plus' ),
],
]
);
$this->add_control(
'hover_image',
[
'label' => esc_html__( 'Hover Image', 'codevz-plus' ),
'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-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'relative',
'options' => [
'relative' => esc_html__( 'Inline', 'codevz-plus' ),
'relative;display: block;text-align:center' => esc_html__( 'Block', 'codevz-plus' ),
'relative;float:left' => esc_html__( 'Left', 'codevz-plus' ),
'relative;display: table;margin:0 auto' => esc_html__( 'Center', 'codevz-plus' ),
'relative;float:right' => esc_html__( 'Right', 'codevz-plus' ),
'relative;float:left;margin:0 auto' => esc_html__( 'Left (center_in_mobile)', 'codevz-plus' ),
'relative;float:right;margin:0 auto' => esc_html__( 'Right (center_in_mobile)', 'codevz-plus' ),
],
'selectors' => [
'{{WRAPPER}} .cz_image > div' => 'position: {{VALUE}};',
],
]
);
$this->add_control(
'link_type',
[
'label' => esc_html__( 'Link Type', 'codevz-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => [
'none' => esc_html__( 'None', 'codevz-plus' ),
'lightbox' => esc_html__( 'Link to large image (Lightbox)', 'codevz-plus' ),
'custom' => esc_html__( 'Custom', 'codevz-plus' ),
],
]
);
$this->add_control(
'link',
[
'label' => esc_html__( 'Link', 'codevz-plus' ),
'type' => Controls_Manager::URL,
'condition' => [
'link_type' => 'custom',
]
]
);
$this->add_control(
'tooltip',
[
'label' => esc_html__( 'Tooltip', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::TEXT,
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_caption',
[
'label' => esc_html__( 'Caption / Info box', 'codevz-plus' )
]
);
$this->add_control(
'type',
[
'label' => esc_html__( 'Type', 'codevz-plus' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => esc_html__( 'Caption', 'codevz-plus' ),
'2' => esc_html__( 'Info Box', 'codevz-plus' ),
],
]
);
$this->add_control(
'position',
[
'label' => esc_html__( 'Position', 'codevz-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'top-right',
'options' => [
'top-right' => esc_html__( 'Top right', 'codevz-plus' ),
'top-left' => esc_html__( 'Top left', 'codevz-plus' ),
'bottom-right' => esc_html__( 'Bottom right', 'codevz-plus' ),
'bottom-left' => esc_html__( 'Bottom left', 'codevz-plus' ),
],
'condition' => [
'type' => '2'
]
]
);
$this->add_control(
'content',
[
'label' => esc_html__( 'Caption', 'codevz-plus' ),
'type' => Controls_Manager::WYSIWYG
]
);
$this->add_control(
'icon',
[
'label' => esc_html__( 'Icon', 'codevz-plus' ),
'type' => Controls_Manager::ICONS,
'default' => [
'value' => 'fa fa-info',
'library' => 'solid',
],
'skin' => 'inline',
'label_block' => false,
'condition' => [
'type' => '2'
]
]
);
$this->add_control(
'sticky_caption',
[
'label' => esc_html__( 'Sticky on mouse hover?', 'codevz-plus' ),
'type' => $free ? 'codevz_pro' : Controls_Manager::SWITCHER,
'condition' => [
'type' => ''
]
]
);
$this->end_controls_section();
// Inverted radius controls.
Xtra_Elementor::inverted_radius_controls( $this );
// 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-plus' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'css_width',
[
'label' => esc_html__( 'Custom Width', 'codevz-plus' ),
'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-plus' ),
'type' => $free ? 'stylekit_pro' : 'stylekit',
'settings' => [ 'background', 'border', 'box-shadow' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_image' ),
]
);
$this->add_responsive_control(
'sk_image_in',
[
'label' => esc_html__( 'Image', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'background', '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-plus' ),
'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-plus' ),
'type' => 'stylekit',
'settings' => [ 'background', 'color', 'border', 'position', 'top', 'left' ],
'selectors' => Xtra_Elementor::sk_selectors(
'.cz_image_caption',
'.cz_image:hover .cz_image_caption'
),
]
);
$this->add_responsive_control(
'sk_icon',
[
'label' => esc_html__( 'Icon', 'codevz-plus' ),
'type' => 'stylekit',
'settings' => [ 'background', 'color', 'border' ],
'selectors' => Xtra_Elementor::sk_selectors( '.cz_image > div > i' ),
'condition' => [
'type' => '2'
]
]
);
}
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;
}
// LCP fix.
global $cz_lcp_detected;
if ( empty( $cz_lcp_detected ) ) {
$image = preg_replace( '/loading=["\']lazy["\']/i', '', $image );
$image = str_replace( '<img', '<img fetchpriority="high" loading="eager" decoding="sync" data-no-lazy="1"', $image );
$cz_lcp_detected = true;
}
// Hover.
$hover_image_tag = $settings['fx_hover'] === 'cz_image_no_fx' ? '' : '<div class="cz_hover_image">' . $hover_image .'</div>';
$caption = '';
// Caption.
if ( $settings['content'] ) {
$caption = Codevz_Plus::fix_extra_p( $settings['content'] );
$caption = '<div class="cz_image_caption mt10 cz_wpe_content">' . do_shortcode( $caption ) . '</div>';
}
// Info box icon.
if ( $settings['type'] ) {
ob_start();
Icons_Manager::render_icon( $settings['icon'] );
$icon = ob_get_clean();
$caption = $icon . $caption;
}
// Background layer.
$svg_bg = empty( $settings['svg_bg'] ) ? '' : ' class="cz_svg_bg"';
// Widget classes.
$classes = array();
$classes[] = 'cz_image clr';
$classes[] = $settings['fx_hover'];
$classes[] = $settings['tooltip'] ? 'cz_tooltip_up' : '';
$classes[] = $settings['sticky_caption'] ? 'cz_image_caption_sticky' : '';
$classes[] = $settings['type'] ? 'codevz-plus-image-info-box' : '';
if ( ! empty( $settings['css_position'] ) ) {
$classes[] = ( $settings['css_position'] === 'relative' ) ? 'center_on_mobile' : '';
$classes[] = Codevz_Plus::contains( $settings['css_position'], 'margin' ) ? 'center_on_mobile' : '';
}
$classes[] = empty( $settings['ir_position'] ) ? '' : 'codevz-plus-inverted-radius-' . esc_attr( $settings['ir_position'] );
// 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( (string) $a_before );
$position = empty( $settings[ 'position' ] ) ? '' : $settings[ 'position' ];
?>
<div<?php echo wp_kses_post( (string) Codevz_Plus::classes( [], $classes ) ); echo ' data-position="' . esc_attr( $position ) . '"'; ?>>
<div<?php echo wp_kses_post( (string) $svg_bg . $tooltip ); ?>>
<div class="cz_image_in"<?php echo wp_kses_post( (string) Codevz_Plus::tilt( $settings ) ); ?>>
<div class="cz_main_image"><?php echo wp_kses_post( (string) $image ); ?></div>
<?php echo wp_kses_post( (string) $hover_image_tag ); ?>
</div>
<?php echo wp_kses_post( (string) $caption ); ?>
</div>
</div>
<?php
// Close link.
echo wp_kses_post( (string) $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.tooltip ? ' cz_tooltip_up' : '' ),
classes = classes + ( settings.sticky_caption ? ' cz_image_caption_sticky' : '' ),
classes = classes + ( settings.type ? ' codevz-plus-image-info-box' : '' ),
classes = classes + ( settings.css_position === 'relative' ? ' center_on_mobile' : '' ),
classes = classes + ( settings.css_position.indexOf( 'margin' ) >= 0 ? ' center_on_mobile' : '' ),
classes = classes + ( settings.ir_position ? ' codevz-plus-inverted-radius-' + settings.ir_position : '' ),
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"' : '',
position = settings.position ? settings.position : 'top-right',
icon = '';
// Info box icon.
if ( settings.type && settings.icon ) {
icon = settings.icon.value ? '<i class="' + settings.icon.value + '"></i>' : '<i class="fa fa-info"></i>',
caption = icon + caption;
}
#>
{{{ parallaxOpen }}}
{{{ a_before }}}
<div class="{{{ classes }}}" data-position="{{{ position }}}">
<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
}
}