elementor / modules / atomic-widgets / elements / atomic-image / atomic-image.php

atomic-image.php in Elementor Website Builder – more than just a page builder 3.32.0-dev2, at modules/atomic-widgets/elements/atomic-image/atomic-image.php

116 lines 3.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Image;
3
4	use Elementor\Modules\AtomicWidgets\Controls\Types\Link_Control;
5	use Elementor\Modules\AtomicWidgets\Elements\Has_Template;
6	use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
7	use Elementor\Modules\AtomicWidgets\PropTypes\Image_Prop_Type;
8	use Elementor\Modules\AtomicWidgets\PropTypes\Link_Prop_Type;
9	use Elementor\Modules\AtomicWidgets\Controls\Section;
10	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Widget_Base;
11	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
12	use Elementor\Modules\AtomicWidgets\Controls\Types\Image_Control;
13	use Elementor\Modules\AtomicWidgets\Image\Placeholder_Image;
14	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
15	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
16	use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
17
18	if ( ! defined( 'ABSPATH' ) ) {
19	exit; // Exit if accessed directly.
20	}
21
22	class Atomic_Image extends Atomic_Widget_Base {
23	use Has_Template;
24
25	const LINK_BASE_STYLE_KEY = 'link-base';
26	const BASE_STYLE_KEY = 'base';
27
28	public static function get_element_type(): string {
29	return 'e-image';
30	}
31
32	public function get_title() {
33	return esc_html__( 'Image', 'elementor' );
34	}
35
36	public function get_keywords() {
37	return [ 'ato', 'atom', 'atoms', 'atomic' ];
38	}
39
40	public function get_icon() {
41	return 'eicon-e-image';
42	}
43
44	protected static function define_props_schema(): array {
45	$props = [
46	'classes' => Classes_Prop_Type::make()
47	->default( [] ),
48
49	'image' => Image_Prop_Type::make()
50	->default_url( Placeholder_Image::get_placeholder_image() )
51	->default_size( 'full' ),
52
53	'link' => Link_Prop_Type::make(),
54
55	'attributes' => Attributes_Prop_Type::make(),
56	];
57
58	return $props;
59	}
60
61	protected function define_atomic_controls(): array {
62	return [
63	Section::make()
64	->set_label( esc_html__( 'Content', 'elementor' ) )
65	->set_items( [
66	Image_Control::bind_to( 'image' )
67	->set_show_mode( 'media' )
68	->set_label( __( 'Image', 'elementor' ) ),
69	] ),
70	Section::make()
71	->set_label( __( 'Settings', 'elementor' ) )
72	->set_id( 'settings' )
73	->set_items( $this->get_settings_controls() ),
74	];
75	}
76
77	protected function get_settings_controls(): array {
78	return [
79	Image_Control::bind_to( 'image' )
80	->set_show_mode( 'sizes' )
81	->set_label( __( 'Image resolution', 'elementor' ) )
82	->set_meta( [ 'layout' => 'two-columns' ] ),
83	Link_Control::bind_to( 'link' )
84	->set_label( __( 'Link', 'elementor' ) )
85	->set_meta( [
86	'topDivider' => true,
87	] ),
88	Text_Control::bind_to( '_cssid' )
89	->set_label( __( 'ID', 'elementor' ) )
90	->set_meta( $this->get_css_id_control_meta() ),
91	];
92	}
93
94	protected function define_base_styles(): array {
95	return [
96	self::LINK_BASE_STYLE_KEY => Style_Definition::make()
97	->add_variant(
98	Style_Variant::make()
99	->add_prop( 'display', 'inherit' )
100	->add_prop( 'width', 'fit-content' )
101	),
102	self::BASE_STYLE_KEY => Style_Definition::make()
103	->add_variant(
104	Style_Variant::make()
105	->add_prop( 'display', 'block' )
106	),
107	];
108	}
109
110	protected function get_templates(): array {
111	return [
112	'elementor/elements/atomic-image' => __DIR__ . '/atomic-image.html.twig',
113	];
114	}
115	}
116