/** * @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 }