<?php
namespace Elementor;
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Repeater;
use Elementor\Group_Control_Image_Size;
use Motiox\Elementor\Motiox_Base_Widgets;
class Motiox_Elementor_Gallery extends Motiox_Base_Widgets {
public function get_name() {
return 'motiox-gallery';
}
public function get_title() {
return esc_html__('Motiox Gallery', 'motiox');
}
public function get_icon() {
return 'eicon-slider-push';
}
public function get_script_depends() {
return ['motiox-elementor-gallery', 'motiox-elementor-video', 'magnific-popup'];
}
public function get_style_depends() {
return ['magnific-popup', 'e-swiper'];
}
public function get_categories() {
return array('motiox-addons');
}
public function get_keywords() {
return ['image', 'photo', 'visual', 'carousel', 'slider'];
}
protected function register_controls() {
$this->start_controls_section(
'section_image',
[
'label' => esc_html__('Gallery', 'motiox'),
]
);
$repeater = new Repeater();
$repeater->add_control(
'title',
[
'label' => esc_html__('Title', 'motiox'),
'type' => Controls_Manager::HIDDEN,
]
);
$repeater->add_control(
'choose_display',
[
'label' => esc_html__('Display', 'motiox'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'image',
'options' => [
'image' => esc_html__('Image', 'motiox'),
'video' => esc_html__('Video', 'motiox'),
],
]
);
$repeater->add_control(
'slider_image',
[
'label' => esc_html__('Choose Image', 'motiox'),
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'type' => Controls_Manager::MEDIA,
'show_label' => true,
'condition' => ['choose_display' => 'image'],
]
);
$repeater->add_control(
'video_link',
[
'label' => esc_html__('Choose Video File', 'motiox'),
'type' => \Elementor\Controls_Manager::MEDIA,
'media_types' => ['video'],
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
'condition' => ['choose_display' => 'video'],
]
);
$repeater->add_control(
'website_link',
[
'label' => esc_html__('IG Link', 'motiox'),
'type' => \Elementor\Controls_Manager::URL,
'default' => [
'url' => 'https://www.instagram.com/pavothemeswp/'
],
'options' => ['url', 'is_external', 'nofollow'],
'label_block' => true,
]
);
$this->add_control(
'slider_name',
[
'label' => esc_html__('Items', 'motiox'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => '{{{ title }}}',
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'slider_image', // Actually its `image_size`
'label' => esc_html__('Image Resolution', 'motiox'),
'default' => 'full',
'separator' => 'none',
]
);
$this->add_control(
'style',
[
'label' => esc_html__('Style', 'motiox'),
'type' => Controls_Manager::SELECT,
'default' => '1',
'options' => [
'1' => esc_html__('Style 1', 'motiox'),
'2' => esc_html__('Style 2', 'motiox'),
],
'prefix_class' => 'gallery-style-'
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_layout',
[
'label' => esc_html__('Layout', 'motiox'),
'tab' => Controls_Manager::TAB_LAYOUT
]
);
$column = range(1, 10);
$column = array_combine($column, $column);
$this->add_responsive_control(
'column',
[
'label' => esc_html__('Columns', 'motiox'),
'type' => Controls_Manager::SELECT,
'default' => 6,
'options' => [
'' => esc_html__('Default', 'motiox'),
] + $column,
'frontend_available' => true,
'render_type' => 'template',
'prefix_class' => 'elementor-grid%s-',
'selectors' => [
// '(widescreen){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_widescreen.VALUE}} - 1)) / {{column_widescreen.VALUE}})',
'{{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column.VALUE}} - 1)) / {{column.VALUE}});',
'(laptop){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_laptop.VALUE}} - 1)) / {{column_laptop.VALUE}});',
'(tablet_extra){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_tablet_extra.VALUE}} - 1)) / {{column_tablet_extra.VALUE}});',
'(tablet){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_tablet.VALUE}} - 1)) / {{column_tablet.VALUE}});',
'(mobile_extra){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_mobile_extra.VALUE}} - 1)) / {{column_mobile_extra.VALUE}});',
'(mobile){{WRAPPER}} .grid__item' => 'width: calc((100% - {{column_spacing.SIZE}}{{column_spacing.UNIT}}*({{column_mobile.VALUE}} - 1)) / {{column_mobile.VALUE}});',
],
]
);
$this->add_control(
'column_spacing',
[
'label' => esc_html__('Column Spacing', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'max' => 100,
],
],
'default' => [
'size' => 12,
],
'condition' => [
'column!' => '1',
],
'frontend_available' => true,
'separator' => 'after',
'selectors' => [
'{{WRAPPER}} .elementor-gallery-item-wrapper .isotope-grid' => 'gap: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'gallery_alignment',
[
'label' => esc_html__('Alignment Info ', 'motiox'),
'type' => Controls_Manager::CHOOSE,
'options' => [
'flex-start' => [
'title' => esc_html__('Left', 'motiox'),
'icon' => 'eicon-h-align-left',
],
'center' => [
'title' => esc_html__('Center', 'motiox'),
'icon' => 'eicon-h-align-center',
],
'flex-end' => [
'title' => esc_html__('Right', 'motiox'),
'icon' => 'eicon-h-align-right',
],
],
'selectors' => [
'{{WRAPPER}} .elementor-gallery-item-wrapper .isotope-grid' => 'justify-content: {{VALUE}};',
],
]
);
$this->add_control(
'view',
[
'label' => esc_html__('View', 'motiox'),
'type' => Controls_Manager::HIDDEN,
'default' => 'traditional',
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_box_image',
[
'label' => esc_html__('Wrapper', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'size',
[
'label' => esc_html__('Size', 'motiox'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px', 'em', 'rem', 'custom'],
'range' => [
'px' => [
'min' => 1,
'max' => 500,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-gallery-item-wrapper .elementor-gallery-item .gallery_item' => 'padding-top: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_image',
[
'label' => esc_html__('Image', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_image_radius',
[
'label' => esc_html__('Border Radius', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .item-inner img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .item-inner video' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .elementor-gallery-item .item-inner .gallery_item a.link-img:hover:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
if (!empty($settings['slider_name']) && is_array($settings['slider_name'])) {
$this->add_render_attribute('wrapper', 'class', 'elementor-gallery-item-wrapper');
// Item
$this->add_render_attribute('item', 'class', 'grid__item elementor-gallery-item');
$this->add_render_attribute('inner', 'class', 'elementor-flex');
$this->add_render_attribute('inner', 'class', 'isotope-grid elementor-grid');
?>
<div <?php $this->print_render_attribute_string('wrapper'); ?>>
<div <?php $this->print_render_attribute_string('inner'); ?>>
<?php foreach ($settings['slider_name'] as $slideritem): ?>
<div <?php $this->print_render_attribute_string('item'); ?>>
<div class="item-inner">
<?php if (($slideritem['slider_image'])): ?>
<div class="gallery_item image_item_1">
<a class="link-img" href="<?php echo esc_url($slideritem['website_link']['url']); ?>">
<?php $this->render_image_1($settings, $slideritem); ?>
<i class="motiox-icon-plus-thin"></i>
</a>
</div>
<?php endif; ?>
<?php if ($slideritem['video_link']): ?>
<?php $video_url = $slideritem['video_link']['url']; ?>
<div class="gallery_item video_item">
<video src="<?php echo esc_attr($video_url); ?>" class="elementor-video">
</video>
<a class="link-video" href="<?php echo esc_url($slideritem['website_link']['url']); ?>">
<i class="motiox-icon motiox-icon-Polygon"></i>
</a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php
}
}
private function render_image_1($settings, $slideritem) {
if (!empty($slideritem['slider_image']['url'])) :
?>
<div class="elementor-sliderimage-image-1">
<?php
$slideritem['slider_image_size'] = $settings['slider_image_size'];
$slideritem['slider_image_custom_dimension'] = $settings['slider_image_custom_dimension'];
echo Group_Control_Image_Size::get_attachment_image_html($slideritem, 'slider_image');
?>
</div>
<?php
endif;
}
private function render_image_2($settings, $slideritem) {
if (!empty($slideritem['slider_image']['url'])) :
?>
<div class="elementor-sliderimage-image-2">
<?php
$slideritem['slider_image_size'] = $settings['slider_image_size'];
$slideritem['slider_image_custom_dimension'] = $settings['slider_image_custom_dimension'];
echo Group_Control_Image_Size::get_attachment_image_html($slideritem, 'slider_image_2');
?>
</div>
<?php
endif;
}
}
$widgets_manager->register(new Motiox_Elementor_Gallery());