elementor / includes / widgets / image-gallery.php

image-gallery.php in Elementor Website Builder – more than just a page builder 4.2.1, at includes/widgets/image-gallery.php

524 lines 12.4 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit; // Exit if accessed directly.
8	}
9
10	/**
11	* Elementor image gallery widget.
12	*
13	* Elementor widget that displays a set of images in an aligned grid.
14	*
15	* @since 1.0.0
16	*/
17	class Widget_Image_Gallery extends Widget_Base {
18
19	/**
20	* Get widget name.
21	*
22	* Retrieve image gallery widget name.
23	*
24	* @since 1.0.0
25	* @access public
26	*
27	* @return string Widget name.
28	*/
29	public function get_name() {
30	return 'image-gallery';
31	}
32
33	/**
34	* Get widget title.
35	*
36	* Retrieve image gallery widget title.
37	*
38	* @since 1.0.0
39	* @access public
40	*
41	* @return string Widget title.
42	*/
43	public function get_title() {
44	return esc_html__( 'Basic Gallery', 'elementor' );
45	}
46
47	/**
48	* Get widget icon.
49	*
50	* Retrieve image gallery widget icon.
51	*
52	* @since 1.0.0
53	* @access public
54	*
55	* @return string Widget icon.
56	*/
57	public function get_icon() {
58	return 'eicon-gallery-grid';
59	}
60
61	/**
62	* Get widget keywords.
63	*
64	* Retrieve the list of keywords the widget belongs to.
65	*
66	* @since 2.1.0
67	* @access public
68	*
69	* @return array Widget keywords.
70	*/
71	public function get_keywords() {
72	return [ 'image', 'photo', 'visual', 'gallery' ];
73	}
74
75	protected function is_dynamic_content(): bool {
76	return false;
77	}
78
79	/**
80	* Get style dependencies.
81	*
82	* Retrieve the list of style dependencies the widget requires.
83	*
84	* @since 3.24.0
85	* @access public
86	*
87	* @return array Widget style dependencies.
88	*/
89	public function get_style_depends(): array {
90	return [ 'widget-image-gallery' ];
91	}
92
93	/**
94	* Get widget upsale data.
95	*
96	* Retrieve the widget promotion data.
97	*
98	* @since 3.18.0
99	* @access protected
100	*
101	* @return array Widget promotion data.
102	*/
103	protected function get_upsale_data() {
104	return [
105	'condition' => ! Utils::has_pro(),
106	'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
107	'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
108	'description' => esc_html__( 'Use interesting masonry layouts and other overlay features with Elementor\'s Pro Gallery widget.', 'elementor' ),
109	'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-basic-gallery-widget/' ),
110	'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
111	];
112	}
113
114	public function has_widget_inner_wrapper(): bool {
115	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
116	}
117
118	/**
119	* Register image gallery widget controls.
120	*
121	* Adds different input fields to allow the user to change and customize the widget settings.
122	*
123	* @since 3.1.0
124	* @access protected
125	*/
126	protected function register_controls() {
127	$this->start_controls_section(
128	'section_gallery',
129	[
130	'label' => esc_html__( 'Basic Gallery', 'elementor' ),
131	]
132	);
133
134	$this->add_control(
135	'wp_gallery',
136	[
137	'label' => esc_html__( 'Add Images', 'elementor' ),
138	'type' => Controls_Manager::GALLERY,
139	'show_label' => false,
140	'dynamic' => [
141	'active' => true,
142	],
143	]
144	);
145
146	$this->add_group_control(
147	Group_Control_Image_Size::get_type(),
148	[
149	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
150	'exclude' => [ 'custom' ],
151	]
152	);
153
154	$gallery_columns = range( 1, 10 );
155	$gallery_columns = array_combine( $gallery_columns, $gallery_columns );
156
157	$this->add_control(
158	'gallery_columns',
159	[
160	'label' => esc_html__( 'Columns', 'elementor' ),
161	'type' => Controls_Manager::SELECT,
162	'default' => 4,
163	'options' => $gallery_columns,
164	]
165	);
166
167	$this->add_control(
168	'gallery_display_caption',
169	[
170	'label' => esc_html__( 'Caption', 'elementor' ),
171	'type' => Controls_Manager::SELECT,
172	'default' => '',
173	'options' => [
174	'none' => esc_html__( 'None', 'elementor' ),
175	'' => esc_html__( 'Attachment Caption', 'elementor' ),
176	],
177	'selectors' => [
178	'{{WRAPPER}} .gallery-item .gallery-caption' => 'display: {{VALUE}};',
179	],
180	]
181	);
182
183	$this->add_control(
184	'gallery_link',
185	[
186	'label' => esc_html__( 'Link', 'elementor' ),
187	'type' => Controls_Manager::SELECT,
188	'default' => 'file',
189	'options' => [
190	'file' => esc_html__( 'Media File', 'elementor' ),
191	'attachment' => esc_html__( 'Attachment Page', 'elementor' ),
192	'none' => esc_html__( 'None', 'elementor' ),
193	],
194	]
195	);
196
197	$this->add_control(
198	'open_lightbox',
199	[
200	'label' => esc_html__( 'Lightbox', 'elementor' ),
201	'type' => Controls_Manager::SELECT,
202	'description' => sprintf(
203	/* translators: 1: Link open tag, 2: Link close tag. */
204	esc_html__( 'Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'elementor' ),
205	'<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
206	'</a>'
207	),
208	'default' => 'default',
209	'options' => [
210	'default' => esc_html__( 'Default', 'elementor' ),
211	'yes' => esc_html__( 'Yes', 'elementor' ),
212	'no' => esc_html__( 'No', 'elementor' ),
213	],
214	'condition' => [
215	'gallery_link' => 'file',
216	],
217	'assets' => [
218	'styles' => [
219	[
220	'name' => 'e-swiper',
221	'conditions' => [
222	'terms' => [
223	[
224	'name' => 'gallery_link',
225	'operator' => '===',
226	'value' => 'file',
227	],
228	[
229	'name' => 'open_lightbox',
230	'operator' => '!==',
231	'value' => 'no',
232	],
233	],
234	],
235	],
236	],
237	'scripts' => [
238	[
239	'name' => 'swiper',
240	'conditions' => [
241	'terms' => [
242	[
243	'name' => 'gallery_link',
244	'operator' => '===',
245	'value' => 'file',
246	],
247	[
248	'name' => 'open_lightbox',
249	'operator' => '!==',
250	'value' => 'no',
251	],
252	],
253	],
254	],
255	],
256	],
257	]
258	);
259
260	$this->add_control(
261	'gallery_rand',
262	[
263	'label' => esc_html__( 'Order By', 'elementor' ),
264	'type' => Controls_Manager::SELECT,
265	'options' => [
266	'' => esc_html__( 'Default', 'elementor' ),
267	'rand' => esc_html__( 'Random', 'elementor' ),
268	],
269	'default' => '',
270	]
271	);
272
273	$this->end_controls_section();
274
275	$this->start_controls_section(
276	'section_gallery_images',
277	[
278	'label' => esc_html__( 'Images', 'elementor' ),
279	'tab' => Controls_Manager::TAB_STYLE,
280	]
281	);
282
283	$this->add_control(
284	'image_spacing',
285	[
286	'label' => esc_html__( 'Gap', 'elementor' ),
287	'type' => Controls_Manager::SELECT,
288	'options' => [
289	'' => esc_html__( 'Default', 'elementor' ),
290	'custom' => esc_html__( 'Custom', 'elementor' ),
291	],
292	'prefix_class' => 'gallery-spacing-',
293	'default' => '',
294	]
295	);
296
297	$columns_margin = is_rtl() ? '0 0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}};' : '0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}} 0;';
298	$columns_padding = is_rtl() ? '0 0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};' : '0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;';
299
300	$this->add_control(
301	'image_spacing_custom',
302	[
303	'label' => esc_html__( 'Custom Gap', 'elementor' ),
304	'type' => Controls_Manager::SLIDER,
305	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
306	'range' => [
307	'px' => [
308	'max' => 100,
309	],
310	'em' => [
311	'max' => 10,
312	],
313	'rem' => [
314	'max' => 10,
315	],
316	],
317	'default' => [
318	'size' => 15,
319	],
320	'selectors' => [
321	'{{WRAPPER}} .gallery-item' => 'padding:' . $columns_padding,
322	'{{WRAPPER}} .gallery' => 'margin: ' . $columns_margin,
323	],
324	'condition' => [
325	'image_spacing' => 'custom',
326	],
327	]
328	);
329
330	$this->add_group_control(
331	Group_Control_Border::get_type(),
332	[
333	'name' => 'image_border',
334	'selector' => '{{WRAPPER}} .gallery-item img',
335	'separator' => 'before',
336	]
337	);
338
339	$this->add_responsive_control(
340	'image_border_radius',
341	[
342	'label' => esc_html__( 'Border Radius', 'elementor' ),
343	'type' => Controls_Manager::DIMENSIONS,
344	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
345	'selectors' => [
346	'{{WRAPPER}} .gallery-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
347	],
348	]
349	);
350
351	$this->end_controls_section();
352
353	$this->start_controls_section(
354	'section_caption',
355	[
356	'label' => esc_html__( 'Caption', 'elementor' ),
357	'tab' => Controls_Manager::TAB_STYLE,
358	'condition' => [
359	'gallery_display_caption' => '',
360	],
361	]
362	);
363
364	$this->add_responsive_control(
365	'align',
366	[
367	'label' => esc_html__( 'Alignment', 'elementor' ),
368	'type' => Controls_Manager::CHOOSE,
369	'options' => [
370	'start' => [
371	'title' => esc_html__( 'Start', 'elementor' ),
372	'icon' => 'eicon-text-align-left',
373	],
374	'center' => [
375	'title' => esc_html__( 'Center', 'elementor' ),
376	'icon' => 'eicon-text-align-center',
377	],
378	'end' => [
379	'title' => esc_html__( 'End', 'elementor' ),
380	'icon' => 'eicon-text-align-right',
381	],
382	'justify' => [
383	'title' => esc_html__( 'Justified', 'elementor' ),
384	'icon' => 'eicon-text-align-justify',
385	],
386	],
387	'classes' => 'elementor-control-start-end',
388	'selectors_dictionary' => [
389	'left' => is_rtl() ? 'end' : 'start',
390	'right' => is_rtl() ? 'start' : 'end',
391	],
392	'default' => 'center',
393	'selectors' => [
394	'{{WRAPPER}} .gallery-item .gallery-caption' => 'text-align: {{VALUE}};',
395	],
396	'condition' => [
397	'gallery_display_caption' => '',
398	],
399	]
400	);
401
402	$this->add_control(
403	'text_color',
404	[
405	'label' => esc_html__( 'Text Color', 'elementor' ),
406	'type' => Controls_Manager::COLOR,
407	'default' => '',
408	'selectors' => [
409	'{{WRAPPER}} .gallery-item .gallery-caption' => 'color: {{VALUE}};',
410	],
411	'condition' => [
412	'gallery_display_caption' => '',
413	],
414	]
415	);
416
417	$this->add_group_control(
418	Group_Control_Typography::get_type(),
419	[
420	'name' => 'typography',
421	'global' => [
422	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
423	],
424	'selector' => '{{WRAPPER}} .gallery-item .gallery-caption',
425	'condition' => [
426	'gallery_display_caption' => '',
427	],
428	]
429	);
430
431	$this->add_group_control(
432	Group_Control_Text_Shadow::get_type(),
433	[
434	'name' => 'caption_shadow',
435	'selector' => '{{WRAPPER}} .gallery-item .gallery-caption',
436	'condition' => [
437	'gallery_display_caption' => '',
438	],
439	]
440	);
441
442	$this->add_responsive_control(
443	'caption_space',
444	[
445	'label' => esc_html__( 'Spacing', 'elementor' ),
446	'type' => Controls_Manager::SLIDER,
447	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
448	'selectors' => [
449	'{{WRAPPER}} .gallery-item .gallery-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
450	],
451	'condition' => [
452	'gallery_display_caption' => '',
453	],
454	]
455	);
456
457	$this->end_controls_section();
458	}
459
460	/**
461	* Render image gallery widget output on the frontend.
462	*
463	* Written in PHP and used to generate the final HTML.
464	*
465	* @since 1.0.0
466	* @access protected
467	*/
468	protected function render() {
469	$settings = $this->get_settings_for_display();
470
471	if ( ! $settings['wp_gallery'] ) {
472	return;
473	}
474
475	$ids = wp_list_pluck( $settings['wp_gallery'], 'id' );
476
477	$this->add_render_attribute( 'shortcode', 'ids', implode( ',', $ids ) );
478	$this->add_render_attribute( 'shortcode', 'size', $settings['thumbnail_size'] );
479
480	if ( $settings['gallery_columns'] ) {
481	$this->add_render_attribute( 'shortcode', 'columns', $settings['gallery_columns'] );
482	}
483
484	if ( $settings['gallery_link'] ) {
485	$this->add_render_attribute( 'shortcode', 'link', $settings['gallery_link'] );
486	}
487
488	if ( ! empty( $settings['gallery_rand'] ) ) {
489	$this->add_render_attribute( 'shortcode', 'orderby', $settings['gallery_rand'] );
490	}
491	?>
492	<div class="elementor-image-gallery">
493	<?php
494	add_filter( 'wp_get_attachment_link', [ $this, 'add_lightbox_data_to_image_link' ], 10, 2 );
495
496	echo do_shortcode( '[gallery ' . $this->get_render_attribute_string( 'shortcode' ) . ']' );
497
498	remove_filter( 'wp_get_attachment_link', [ $this, 'add_lightbox_data_to_image_link' ] );
499	?>
500	</div>
501	<?php
502	}
503
504	public function render_markdown(): string {
505	$settings = $this->get_settings_for_display();
506	if ( empty( $settings['wp_gallery'] ) ) {
507	return '';
508	}
509	$images = [];
510	foreach ( $settings['wp_gallery'] as $image ) {
511	$url = $image['url'] ?? '';
512	if ( empty( $url ) ) {
513	continue;
514	}
515	$alt = '';
516	if ( ! empty( $image['id'] ) ) {
517	$alt = get_post_meta( $image['id'], '_wp_attachment_image_alt', true );
518	}
519	$images[] = '![' . $alt . '](' . esc_url( $url ) . ')';
520	}
521	return implode( "\n\n", $images );
522	}
523	}
524