/**
* @param array $settings [ image => [ id => '', url => '' ], image_size => '', hover_animation => '' ]
*
* @return string
*/
public static function get_attachment_image_html($settings)
{
$id = $settings['image']['id'];
$url = $settings['image']['url'];
// Old version of image settings
if (!isset($settings['image_size'])) {
$settings['image_size'] = '';
}
$size = $settings['image_size'];
$image_class = !empty($settings['hover_animation']) ? 'elementor-animation-' . $settings['hover_animation'] : '';
$html = '';
// If is the new version - with image size
$image_sizes = get_intermediate_image_sizes();
$image_sizes[] = 'full';
if (!empty($id) && in_array($size, $image_sizes)) {
$image_class .= " attachment-{$size} size-{$size}";
$html .= wp_get_attachment_image($id, $size, false, ['class' => trim($image_class)]);
} else {
$image_src = Group_Control_Image_Size::get_attachment_image_src($id, 'image', $settings);
if (!$image_src) {
$image_src = $url;
}
$image_class_html = !empty($image_class) ? ' class="' . $image_class . '"' : '';
$html .= sprintf('<img src="%s" title="%s" alt="%s"%s />', esc_attr($image_src), Control_Media::get_image_title($settings['image']), Control_Media::get_image_alt($settings['image']), $image_class_html);
}
return $html;
}
protected function _register_controls()
{
$this->start_controls_section('section_gallery', ['label' => __('Image Gallery', 'elementor')]);
$this->add_control('wp_gallery', ['label' => __('Add Images', 'elementor'), 'type' => Controls_Manager::GALLERY]);
$this->add_group_control(Group_Control_Image_Size::get_type(), ['name' => 'thumbnail', 'exclude' => ['custom']]);
$gallery_columns = range(1, 10);
$gallery_columns = array_combine($gallery_columns, $gallery_columns);
$this->add_control('gallery_columns', ['label' => __('Columns', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 4, 'options' => $gallery_columns]);
$this->add_control('gallery_link', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'file', 'options' => ['file' => __('Media File', 'elementor'), 'attachment' => __('Attachment Page', 'elementor'), 'none' => __('None', 'elementor')]]);
$this->add_control('gallery_rand', ['label' => __('Ordering', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['' => __('Default', 'elementor'), 'rand' => __('Random', 'elementor')], 'default' => '']);
$this->add_control('view', ['label' => __('View', 'elementor'), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional']);
$this->end_controls_section();
$this->start_controls_section('section_gallery_images', ['label' => __('Images', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('image_spacing', ['label' => __('Spacing', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['' => __('Default', 'elementor'), 'custom' => __('Custom', 'elementor')], 'prefix_class' => 'gallery-spacing-', 'default' => '']);
$columns_margin = is_rtl() ? '0 0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}};' : '0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}} 0;';
$columns_padding = is_rtl() ? '0 0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};' : '0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;';
$this->add_control('image_spacing_custom', ['label' => __('Image Spacing', 'elementor'), 'type' => Controls_Manager::SLIDER, 'show_label' => false, 'range' => ['px' => ['max' => 100]], 'default' => ['size' => 15], 'selectors' => ['{{WRAPPER}} .gallery-item' => 'padding:' . $columns_padding, '{{WRAPPER}} .gallery' => 'margin: ' . $columns_margin], 'condition' => ['image_spacing' => 'custom']]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'image_border', 'label' => __('Image Border', 'elementor'), 'selector' => '{{WRAPPER}} .gallery-item img']);
$this->add_control('image_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .gallery-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->end_controls_section();
$this->start_controls_section('section_caption', ['label' => __('Caption', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('gallery_display_caption', ['label' => __('Display', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['' => __('Show', 'elementor'), 'none' => __('Hide', 'elementor')], 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'display: {{VALUE}};']]);
$this->add_control('align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right'], 'justify' => ['title' => __('Justified', 'elementor'), 'icon' => 'align-justify']], 'default' => 'center', 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'text-align: {{VALUE}};'], 'condition' => ['gallery_display_caption' => '']]);
$this->add_control('text_color', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'color: {{VALUE}};'], 'condition' => ['gallery_display_caption' => '']]);
$this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'typography', 'label' => __('Typography', 'elementor'), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} .gallery-item .gallery-caption', 'condition' => ['gallery_display_caption' => '']]);
$this->end_controls_section();
}
public function get_details($id, $size, $is_first_time)
{
if ('true' === $is_first_time) {
$sizes = get_intermediate_image_sizes();
$sizes[] = 'full';
} else {
$sizes = [];
}
$sizes[] = $size;
$urls = [];
foreach ($sizes as $size) {
if (0 === strpos($size, 'custom_')) {
preg_match('/custom_(\\d*)x(\\d*)/', $size, $matches);
$instance = ['image_size' => 'custom', 'image_custom_dimension' => ['width' => $matches[1], 'height' => $matches[2]]];
$urls[$size] = Group_Control_Image_Size::get_attachment_image_src($id, 'image', $instance);
} else {
$urls[$size] = wp_get_attachment_image_src($id, $size)[0];
}
}
return $urls;
}
protected function render()
{
$settings = $this->get_settings();
if (empty($settings['carousel'])) {
return;
}
$slides = [];
foreach ($settings['carousel'] as $attachment) {
$image_url = Group_Control_Image_Size::get_attachment_image_src($attachment['id'], 'thumbnail', $settings);
$image_html = '<img class="slick-slide-image" src="' . esc_attr($image_url) . '" alt="' . esc_attr(Control_Media::get_image_alt($attachment)) . '" />';
$link = $this->get_link_url($attachment, $settings);
if ($link) {
$target = '';
if (!empty($link['is_external'])) {
$target = ' target="_blank"';
}
$image_html = sprintf('<a href="%s"%s>%s</a>', $link['url'], $target, $image_html);
}
$slides[] = '<div><div class="slick-slide-inner">' . $image_html . '</div></div>';
}
if (empty($slides)) {
return;
}
$is_slideshow = '1' === $settings['slides_to_show'];
$is_rtl = 'rtl' === $settings['direction'];
$direction = $is_rtl ? 'rtl' : 'ltr';
$show_dots = in_array($settings['navigation'], ['dots', 'both']);
$show_arrows = in_array($settings['navigation'], ['arrows', 'both']);
$slick_options = ['slidesToShow' => absint($settings['slides_to_show']), 'autoplaySpeed' => absint($settings['autoplay_speed']), 'autoplay' => 'yes' === $settings['autoplay'], 'infinite' => 'yes' === $settings['infinite'], 'pauseOnHover' => 'yes' === $settings['pause_on_hover'], 'speed' => absint($settings['speed']), 'arrows' => $show_arrows, 'dots' => $show_dots, 'rtl' => $is_rtl];
$carousel_classes = ['elementor-image-carousel'];
if ($show_arrows) {
$carousel_classes[] = 'slick-arrows-' . $settings['arrows_position'];
}
if ($show_dots) {
$carousel_classes[] = 'slick-dots-' . $settings['dots_position'];
}
if ('yes' === $settings['image_stretch']) {
$carousel_classes[] = 'slick-image-stretch';
}
if (!$is_slideshow) {
$slick_options['slidesToScroll'] = absint($settings['slides_to_scroll']);
} else {
$slick_options['fade'] = 'fade' === $settings['effect'];
}
?>
<div class="elementor-image-carousel-wrapper elementor-slick-slider" dir="<?php
echo $direction;
?>
">
<div class="<?php
echo implode(' ', $carousel_classes);
?>
" data-slider_options='<?php
echo wp_json_encode($slick_options);
?>
'>
<?php
echo implode('', $slides);
?>
</div>
</div>
<?php
}
protected function render()
{
$settings = $this->get_settings();
if (empty($settings['image']['url'])) {
return;
}
$has_caption = !empty($settings['caption']);
$this->add_render_attribute('wrapper', 'class', 'elementor-image');
if (!empty($settings['shape'])) {
$this->add_render_attribute('wrapper', 'class', 'elementor-image-shape-' . $settings['shape']);
}
$link = $this->get_link_url($settings);
if ($link) {
$this->add_render_attribute('link', 'href', $link['url']);
if (!empty($link['is_external'])) {
$this->add_render_attribute('link', 'target', '_blank');
}
}
?>
<div <?php
echo $this->get_render_attribute_string('wrapper');
?>
>
<?php
if ($has_caption) {
?>
<figure class="wp-caption">
<?php
}
if ($link) {
?>
<a <?php
echo $this->get_render_attribute_string('link');
?>
>
<?php
}
echo Group_Control_Image_Size::get_attachment_image_html($settings);
if ($link) {
?>
</a>
<?php
}
if ($has_caption) {
?>
<figcaption class="widget-image-caption wp-caption-text"><?php
echo $settings['caption'];
?>
</figcaption>
<?php
}
if ($has_caption) {
?>
</figure>
<?php
}
?>
</div>
<?php
}
