File: //proc/self/cwd/wp-content/themes/kidzieo/includes/elementor/gallery.php
<?php
namespace Elementor; // Custom widgets must be defined in the Elementor namespace
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly (security measure)
/**
* Widget Name: Projects Carousel
*/
class PBMIT_GalleryElement extends Widget_Base{
// The get_name() method is a simple one, you just need to return a widget name that will be used in the code.
public function get_name() {
return 'pbmit_gallery_element';
}
// The get_title() method, which again, is a very simple one, you need to return the widget title that will be displayed as the widget label.
public function get_title() {
return esc_attr__( 'Kidzieo Gallery Element', 'kidzieo' );
}
// The get_icon() method, is an optional but recommended method, it lets you set the widget icon. you can use any of the eicon or font-awesome icons, simply return the class name as a string.
public function get_icon() {
return 'fas fa-images';
}
// The get_categories method, lets you set the category of the widget, return the category name as a string.
public function get_categories() {
return [ 'kidzieo_category' ];
}
public function __construct($data = [], $args = null) {
parent::__construct($data, $args);
}
protected function register_controls() {
$this->start_controls_section(
'data_section',
[
'label' => esc_attr__( 'Content Options', 'kidzieo' ),
]
);
$this->add_control(
'gallery_images',
[
'label' => esc_attr__( 'Gallery Images', 'kidzieo' ),
'type' => \Elementor\Controls_Manager::GALLERY,
'default' => [
[
'url' => get_template_directory_uri() . '/images/static-box.jpg',
],
[
'url' => get_template_directory_uri() . '/images/static-box.jpg',
],
[
'url' => get_template_directory_uri() . '/images/static-box.jpg',
],
],
]
);
$this->end_controls_section();
// Heading and Subheading
$this->start_controls_section(
'heading_section',
[
'label' => esc_attr__( 'Heading and Subheading', 'kidzieo' ),
]
);
$this->add_control(
'title_animation',
[
'label' => esc_attr__( 'Heading Animation', 'kidzieo' ),
'description' => esc_attr__( 'Select Heading Text Animation View style.', 'kidzieo' ) . ' ' . pbmit_esc_kses('<br><a target="_blank" href="' . esc_url('http://kidzieo-demo.pbminfotech.com/demo1/element/#heading-animations') . '">' . esc_attr__( 'See all anmiation demo here.', 'kidzieo' ) . '</a>' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => esc_attr__( 'No animation', 'kidzieo' ),
'1' => esc_attr__( 'Animation Style 1', 'kidzieo' ),
'2' => esc_attr__( 'Animation Style 2', 'kidzieo' ),
'3' => esc_attr__( 'Animation Style 3', 'kidzieo' ),
],
'separator' => 'before',
]
);
$this->add_control(
'title',
[
'label' => esc_attr__( 'Heading', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'default' => esc_attr__( 'Gallery Title', 'kidzieo' ),
'placeholder' => esc_attr__( 'Enter your heading', 'kidzieo' ),
'label_block' => true,
]
);
$this->add_control(
'title_link',
[
'label' => esc_attr__( 'Heading Link', 'kidzieo' ),
'type' => Controls_Manager::URL,
'label_block' => true,
]
);
$this->add_control(
'subtitle',
[
'label' => esc_attr__( 'Subheading', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_attr__( 'Enter your subtitle', 'kidzieo' ),
'label_block' => true,
]
);
$this->add_control(
'subtitle_link',
[
'label' => esc_attr__( 'Subheading Link', 'kidzieo' ),
'type' => Controls_Manager::URL,
'label_block' => true,
]
);
$this->add_control(
'desc',
[
'label' => esc_attr__( 'Description', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'placeholder' => esc_attr__( 'Type your description here', 'kidzieo' ),
]
);
$this->add_control(
'reverse_title',
[
'label' => esc_attr__( 'Reverse Heading', 'kidzieo' ),
'description' => esc_attr__( 'Show Subheading before Heading', 'kidzieo' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_attr__( 'Yes', 'kidzieo' ),
'label_off' => esc_attr__( 'No', 'kidzieo' ),
'return_value' => 'yes',
'default' => '',
]
);
$this->add_responsive_control(
'text_align',
[
'label' => esc_attr__( 'Alignment', 'kidzieo' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_attr__( 'Left', 'kidzieo' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => esc_attr__( 'Center', 'kidzieo' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => esc_attr__( 'Right', 'kidzieo' ),
'icon' => 'fa fa-align-right',
],
],
'prefix_class' => 'pbmit-ele-header-align-',
'selectors' => [
'{{WRAPPER}} .pbmit-heading-subheading' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'title_btn',
[
'label' => esc_attr__( 'Button Title', 'kidzieo' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => esc_attr__( 'Read More', 'kidzieo' ),
'placeholder' => esc_attr__( 'Enter button title here', 'kidzieo' ),
'label_block' => true,
'default' => esc_attr__( 'Read More', 'kidzieo' ),
]
);
$this->add_control(
'btn_link',
[
'label' => esc_attr__( 'Button Link', 'kidzieo' ),
'type' => Controls_Manager::URL,
'label_block' => true,
'default' => array (
'url' => '#',
'is_external' => '',
'nofollow' => '',
'custom_attributes' => '',
),
]
);
$this->end_controls_section();
// HTML Tags
$this->start_controls_section(
'advanced_section',
[
'label' => pbmit_esc_kses('<img class="pbmit-tab-small-logo" src="'.get_template_directory_uri() . '/includes/images/pbm-small-logo.png" /> ') . esc_attr__( 'Gap Settings', 'kidzieo' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->add_control(
'gap',
[
'label' => esc_attr__( 'Box Gap', 'kidzieo' ),
'description' => esc_attr__( 'Gap between each Post box.', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'default' => '15px',
'options' => [
'0px' => esc_attr__( 'No Gap (0px)', 'kidzieo' ),
'5px' => esc_attr__( '5px', 'kidzieo' ),
'10px' => esc_attr__( '10px', 'kidzieo' ),
'15px' => esc_attr__( '15px', 'kidzieo' ),
'20px' => esc_attr__( '20px', 'kidzieo' ),
'25px' => esc_attr__( '25px', 'kidzieo' ),
'30px' => esc_attr__( '30px', 'kidzieo' ),
'35px' => esc_attr__( '35px', 'kidzieo' ),
'40px' => esc_attr__( '40px', 'kidzieo' ),
'45px' => esc_attr__( '45px', 'kidzieo' ),
'50px' => esc_attr__( '50px', 'kidzieo' ),
]
]
);
$this->end_controls_section();
}
function pbm_get_img_src( $image, $size ){
$src = '';
if( !empty($image['id']) && wp_attachment_is_image($image['id']) ){
$src = wp_get_attachment_image_src( $image['id'], $size );
$src = $src[0];
} else if( !empty($image['url']) ){
$src = $image['url'];
}
return $src;
}
protected function render() {
$settings = $this->get_settings_for_display();
extract($settings);
// Starting container
pbmit_element_container( array(
'position' => 'start',
'cpt' => 'gallery',
'data' => $settings
) );
?>
<div class="pbmit-ele-header-area">
<?php pbmit_heading_subheading($settings, true);
// Button
$button_html = '';
if( !empty($settings['title_btn']) && !empty($settings['btn_link']['url']) ){
$button_html = '<div class="pbmit-service-btn pbmit-head-btn">' . pbmit_link_render($settings['btn_link'], 'start' ) . pbmit_esc_kses($settings['title_btn']) . pbmit_link_render($settings['btn_link'], 'end' ) . '</div>';
}
echo pbmit_esc_kses($button_html); ?>
</div>
<?php if( !empty( $gallery_images ) && is_array($gallery_images) && count($gallery_images)>0 ) : ?>
<div class="pbmit-element-gallery-img-wrapper pbmit-element-gallery-total-img-<?php echo esc_attr( count($gallery_images) ) ?>">
<div class="row">
<?php
$total_images = count($gallery_images);
$random = 'pbm-gallery-group-'.rand(100,999).rand(100,999);
$x = 1;
foreach( $gallery_images as $image ){
?>
<?php if( $total_images <= 2 ){
$img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x365' );
$a_img_src = $this->pbm_get_img_src($image, 'full' );
$img_caption = wp_get_attachment_caption($image['id']);
?>
<div class="col-md-6"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_src); ?>"><img src="<?php echo esc_url($img_src); ?>" alt="<?php echo esc_attr($img_caption); ?>"></a></div></div>
<?php } else if( $total_images == 3 ){
$img_caption = wp_get_attachment_caption($image['id']);
?>
<?php if( $x == 1 ){
$img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x365' );
$a_img_src = $this->pbm_get_img_src($image, 'full' );
?>
<div class="col-md-6"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_src); ?>"><img src="<?php echo esc_url($img_src); ?>" alt="<?php echo esc_attr($img_caption); ?>"></a></div></div>
<?php } else {
$img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x770' );
$a_img_src = $this->pbm_get_img_src($image, 'full' );
?>
<div class="col-md-3"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_src); ?>"><img src="<?php echo esc_url($img_src); ?>" alt="<?php echo esc_attr($img_caption); ?>"></a></div></div>
<?php } ?>
<?php } else if( $total_images == 4 ){
$img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x770' );
$a_img_src = $this->pbm_get_img_src($image, 'full' );
$img_caption = wp_get_attachment_caption($image['id']);
?>
<div class="col-md-3"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_src); ?>"><img src="<?php echo esc_url($img_src); ?>" alt="<?php echo esc_attr($img_caption); ?>"></a></div></div>
<?php } else if( $total_images > 4 ){
${'img_'.$x.'_caption'} = wp_get_attachment_caption($image['id']);
?>
<?php
if($x < 5){
if( $x == 1 || $x == 4 ){
${'img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'pbmit-img-770x365' );
${'a_img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'full' );
} else if( $x == 2 || $x == 3 ){
${'img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'pbmit-img-770x770' );
${'a_img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'full' );
}
} else if($x == 5){
${'img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'pbmit-img-480x1000' );
${'a_img_'.$x.'_src'} = $this->pbm_get_img_src($image, 'full' );
?>
<div class="col-md-9">
<div class="row">
<div class="col-md-8"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_1_src); ?>"><img src="<?php echo esc_url( $img_1_src ); ?>" alt="<?php echo esc_attr($img_1_caption); ?>"></a></div></div>
<div class="col-md-4"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_2_src); ?>"><img src="<?php echo esc_url( $img_2_src ); ?>" alt="<?php echo esc_attr($img_2_caption); ?>"></a></div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_3_src); ?>"><img src="<?php echo esc_url( $img_3_src ); ?>" alt="<?php echo esc_attr($img_3_caption); ?>"></a></div></div>
<div class="col-md-8"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_4_src); ?>"><img src="<?php echo esc_url( $img_4_src ); ?>" alt="<?php echo esc_attr($img_4_caption); ?>"></a></div></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_5_src); ?>"><img src="<?php echo esc_url( $img_5_src ); ?>" alt="<?php echo esc_attr($img_5_caption); ?>"></a></div></div>
</div>
</div>
<?php
}
if( $x > 5 ){
$img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x770' );
$a_img_src = $this->pbm_get_img_src($image, 'pbmit-img-770x770' );
// show other images
?>
<div class="col-md-3"><div class="pbmit-gallery-thumb"><a data-elementor-lightbox-slideshow="<?php echo esc_attr($random); ?>" href="<?php echo esc_url($a_img_src); ?>"><img src="<?php echo esc_url( $img_src ); ?>" alt="<?php echo esc_attr(${'img_'.$x.'_caption'}); ?>"></a></div></div>
<?php
}
?>
<?php } ?>
<?php
$x++;
} // foreach
?>
</div><!-- .row -->
</div><!-- .pbmit-element-gallery-img-wrapper -->
<?php endif; ?>
<?php
// Ending wrapper of the whole arear
pbmit_element_container( array(
'position' => 'end',
'cpt' => 'blog',
'data' => $settings
) );
}
protected function content_template() {}
}
// After the Schedule class is defined, I must register the new widget class with Elementor:
Plugin::instance()->widgets_manager->register( new PBMIT_galleryElement() );