startControlsSection(
'section_image_carousel',
[
'label' => __('Image Carousel'),
]
);
$this->addControl(
'links',
[
'type' => ControlsManager::RAW_HTML,
'raw' => '
',
'condition' => [
'link_to' => 'custom',
],
]
);
$repeater = new Repeater();
$repeater->addControl(
'image',
[
'label' => __('Choose Image'),
'type' => ControlsManager::MEDIA,
'seo' => true,
'excludeLoading' => true,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::getPlaceholderImageSrc(),
],
]
);
$repeater->addControl(
'caption',
[
'label' => __('Caption'),
'label_block' => true,
'type' => ControlsManager::TEXT,
'placeholder' => __('Enter your caption about the image'),
'title' => __('Input image caption here'),
]
);
$repeater->addControl(
'link',
[
'label' => __('Link'),
'type' => ControlsManager::URL,
'label_block' => true,
'placeholder' => __('http://your-link.com'),
]
);
$this->addControl(
'carousel',
[
'label' => __('Images'),
'type' => ControlsManager::REPEATER,
'fields' => $repeater->getControls(),
'default' => [
[
'image' => [
'url' => Utils::getPlaceholderImageSrc(),
],
],
[
'image' => [
'url' => Utils::getPlaceholderImageSrc(),
],
],
],
'dynamic' => [
'active' => true,
'categories' => ['gallery'],
],
'title_field' => '<# if (image.url) { #>' .
' }})
<# } #>' .
'{{{ caption || image.title || image.alt || image.url && image.url.split("/").pop() }}}',
]
);
$this->addControl(
'link_to',
[
'label' => __('Link'),
'type' => ControlsManager::SELECT,
'default' => 'none',
'options' => [
'none' => __('None'),
'file' => __('Media File'),
'custom' => __('Custom URL'),
],
]
);
$this->addControl(
'variable_width',
[
'label' => __('Variable Width'),
'type' => ControlsManager::SWITCHER,
'frontend_available' => true,
]
);
$this->addControl(
'image_stretch',
[
'label' => __('Image Stretch'),
'type' => ControlsManager::SWITCHER,
]
);
$this->addResponsiveControl(
'image_height',
[
'label' => __('Height'),
'type' => ControlsManager::SLIDER,
'size_units' => ['px', 'vh'],
'range' => [
'px' => [
'max' => 1000,
],
],
'selectors' => [
'{{WRAPPER}} .swiper-slide-image' => 'height: {{SIZE}}{{UNIT}}',
],
'frontend_available' => true,
'condition' => [
'image_stretch!' => '',
],
]
);
$this->addControl(
'open_lightbox',
[
'label' => __('Lightbox'),
'type' => ControlsManager::SELECT,
'default' => 'default',
'options' => [
'default' => __('Default'),
'yes' => __('Yes'),
'no' => __('No'),
],
'condition' => [
'link_to' => 'file',
],
]
);
$this->addControl(
'view',
[
'label' => __('View'),
'type' => ControlsManager::HIDDEN,
'default' => 'traditional',
]
);
$this->endControlsSection();
$this->registerCarouselSection([
'variable_width' => true,
]);
$this->startControlsSection(
'section_style_image',
[
'label' => __('Image'),
'tab' => ControlsManager::TAB_STYLE,
]
);
$this->addResponsiveControl(
'gallery_vertical_align',
[
'label' => __('Vertical Align'),
'type' => ControlsManager::CHOOSE,
'options' => [
'flex-start' => [
'title' => __('Start'),
'icon' => 'eicon-v-align-top',
],
'center' => [
'title' => __('Center'),
'icon' => 'eicon-v-align-middle',
],
'flex-end' => [
'title' => __('End'),
'icon' => 'eicon-v-align-bottom',
],
],
'condition' => [
'slides_to_show!' => '1',
],
'selectors' => [
'{{WRAPPER}} .swiper-wrapper' => 'display: flex; align-items: {{VALUE}};',
],
]
);
$this->addControl(
'image_spacing',
[
'label' => __('Spacing'),
'type' => ControlsManager::SELECT,
'options' => [
'' => __('Default'),
'custom' => __('Custom'),
],
]
);
$this->addResponsiveControl(
'image_spacing_custom',
[
'label' => __('Image Spacing'),
'type' => ControlsManager::SLIDER,
'default' => [
'size' => 20,
],
'condition' => [
'image_spacing' => 'custom',
'slides_to_show!' => '1',
],
'frontend_available' => true,
'render_type' => 'none',
'separator' => 'after',
]
);
$this->addGroupControl(
GroupControlBorder::getType(),
[
'name' => 'image_border',
'selector' => '{{WRAPPER}} .elementor-image-carousel .swiper-slide-image',
]
);
$this->addControl(
'image_border_radius',
[
'label' => __('Border Radius'),
'type' => ControlsManager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->endControlsSection();
$this->startControlsSection(
'section_caption',
[
'label' => __('Caption'),
'tab' => ControlsManager::TAB_STYLE,
]
);
$this->addControl(
'caption_align',
[
'label' => __('Alignment'),
'type' => ControlsManager::CHOOSE,
'options' => [
'left' => [
'title' => __('Left'),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => __('Center'),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => __('Right'),
'icon' => 'eicon-text-align-right',
],
'justify' => [
'title' => __('Justified'),
'icon' => 'eicon-text-align-justify',
],
],
'default' => 'center',
'selectors' => [
'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
],
]
);
$this->addControl(
'caption_text_color',
[
'label' => __('Text Color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
],
]
);
$this->addGroupControl(
GroupControlTypography::getType(),
[
'name' => 'caption_typography',
'scheme' => SchemeTypography::TYPOGRAPHY_4,
'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
]
);
$this->addGroupControl(
GroupControlTextShadow::getType(),
[
'name' => 'caption_shadow',
'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
]
);
$this->addResponsiveControl(
'caption_space',
[
'label' => __('Spacing'),
'type' => ControlsManager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} figcaption' => 'margin-top: {{SIZE}}{{UNIT}};',
],
]
);
$this->endControlsSection();
$this->registerNavigationStyleSection();
}
public function onImport($widget)
{
// Compatibility fix with WP image-carousel
if (isset($widget['settings']['carousel'][0]['url'])) {
$carousel = [];
$import_images = Plugin::$instance->templates_manager->getImportImagesInstance();
foreach ($widget['settings']['carousel'] as &$img) {
$image = $import_images->import($img);
$carousel[] = [
'_imported' => true,
'_id' => Utils::generateRandomString(),
'image' => $image ?: [
'id' => 0,
'url' => Utils::getPlaceholderImageSrc(),
],
];
}
$widget['settings']['carousel'] = $carousel;
}
return $widget;
}
/**
* Render image carousel widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
*/
protected function render()
{
$settings = $this->getSettingsForDisplay();
if (empty($settings['carousel'])) {
return;
}
$id = $this->getId();
$edit_mode = Plugin::$instance->editor->isEditMode();
$slides = [];
foreach ($settings['carousel'] as $index => &$item) {
if (empty($item['image']['url'])) {
continue;
}
$image_html = GroupControlImageSize::getAttachmentImageHtml($item, 'image', 'auto', 'swiper-slide-image');
$link_tag = '';
$link = $this->getLinkUrl($item, $settings['link_to']);
if ($link) {
$link_key = 'link_' . $index;
$this->addLightboxDataAttributes($link_key, $item['image']['id'], $settings['open_lightbox'], $id);
if ($edit_mode) {
$this->addRenderAttribute($link_key, 'class', 'elementor-clickable');
}
$this->addLinkAttributes($link_key, $link);
$link_tag = 'getRenderAttributeString($link_key) . '>';
}
$slide_html = '' . $link_tag .
'' . $image_html;
empty($item['caption']) or $slide_html .=
'' . $item['caption'] . '';
$slide_html .= '';
if ($link) {
$slide_html .= '';
}
$slide_html .= '
';
$slides[] = $slide_html;
}
if (!$slides) {
return;
}
$this->addRenderAttribute('carousel', 'class', 'elementor-image-carousel');
empty($settings['variable_width']) or $this->addRenderAttribute('carousel', 'class', 'swiper-variable-width');
empty($settings['image_stretch']) or $this->addRenderAttribute('carousel', 'class', 'swiper-image-stretch');
$this->renderCarousel($settings, $slides);
}
/**
* Retrieve image carousel link URL.
*
* @since 1.0.0
*
* @param array $item
* @param object $instance
*
* @return array|string|false An array/string containing the attachment URL, or false if no link
*/
private function getLinkUrl($item, $link_to)
{
if ('none' === $link_to) {
return false;
}
if ('custom' === $link_to) {
if (empty($item['link']['url'])) {
return false;
}
return $item['link'];
}
return empty($item['image']['url']) ? false : [
'url' => Helper::getMediaLink($item['image']['url']),
];
}
}