image-gallery.php 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor image gallery widget.
  8. *
  9. * Elementor widget that displays a set of images in an aligned grid.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Image_Gallery extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve image gallery widget name.
  18. *
  19. * @since 1.0.0
  20. * @access public
  21. *
  22. * @return string Widget name.
  23. */
  24. public function get_name() {
  25. return 'image-gallery';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve image gallery widget title.
  31. *
  32. * @since 1.0.0
  33. * @access public
  34. *
  35. * @return string Widget title.
  36. */
  37. public function get_title() {
  38. return __( 'Image Gallery', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve image gallery widget icon.
  44. *
  45. * @since 1.0.0
  46. * @access public
  47. *
  48. * @return string Widget icon.
  49. */
  50. public function get_icon() {
  51. return 'eicon-gallery-grid';
  52. }
  53. /**
  54. * Get widget keywords.
  55. *
  56. * Retrieve the list of keywords the widget belongs to.
  57. *
  58. * @since 2.1.0
  59. * @access public
  60. *
  61. * @return array Widget keywords.
  62. */
  63. public function get_keywords() {
  64. return [ 'image', 'photo', 'visual', 'gallery' ];
  65. }
  66. /**
  67. * Add lightbox data to image link.
  68. *
  69. * Used to add lightbox data attributes to image link HTML.
  70. *
  71. * @since 1.6.0
  72. * @access public
  73. *
  74. * @param string $link_html Image link HTML.
  75. *
  76. * @return string Image link HTML with lightbox data attributes.
  77. */
  78. public function add_lightbox_data_to_image_link( $link_html ) {
  79. return preg_replace( '/^<a/', '<a ' . $this->get_render_attribute_string( 'link' ), $link_html );
  80. }
  81. /**
  82. * Register image gallery widget controls.
  83. *
  84. * Adds different input fields to allow the user to change and customize the widget settings.
  85. *
  86. * @since 1.0.0
  87. * @access protected
  88. */
  89. protected function _register_controls() {
  90. $this->start_controls_section(
  91. 'section_gallery',
  92. [
  93. 'label' => __( 'Image Gallery', 'elementor' ),
  94. ]
  95. );
  96. $this->add_control(
  97. 'wp_gallery',
  98. [
  99. 'label' => __( 'Add Images', 'elementor' ),
  100. 'type' => Controls_Manager::GALLERY,
  101. 'show_label' => false,
  102. 'dynamic' => [
  103. 'active' => true,
  104. ],
  105. ]
  106. );
  107. $this->add_group_control(
  108. Group_Control_Image_Size::get_type(),
  109. [
  110. 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
  111. 'exclude' => [ 'custom' ],
  112. 'separator' => 'none',
  113. ]
  114. );
  115. $gallery_columns = range( 1, 10 );
  116. $gallery_columns = array_combine( $gallery_columns, $gallery_columns );
  117. $this->add_control(
  118. 'gallery_columns',
  119. [
  120. 'label' => __( 'Columns', 'elementor' ),
  121. 'type' => Controls_Manager::SELECT,
  122. 'default' => 4,
  123. 'options' => $gallery_columns,
  124. ]
  125. );
  126. $this->add_control(
  127. 'gallery_link',
  128. [
  129. 'label' => __( 'Link to', 'elementor' ),
  130. 'type' => Controls_Manager::SELECT,
  131. 'default' => 'file',
  132. 'options' => [
  133. 'file' => __( 'Media File', 'elementor' ),
  134. 'attachment' => __( 'Attachment Page', 'elementor' ),
  135. 'none' => __( 'None', 'elementor' ),
  136. ],
  137. ]
  138. );
  139. $this->add_control(
  140. 'open_lightbox',
  141. [
  142. 'label' => __( 'Lightbox', 'elementor' ),
  143. 'type' => Controls_Manager::SELECT,
  144. 'default' => 'default',
  145. 'options' => [
  146. 'default' => __( 'Default', 'elementor' ),
  147. 'yes' => __( 'Yes', 'elementor' ),
  148. 'no' => __( 'No', 'elementor' ),
  149. ],
  150. 'condition' => [
  151. 'gallery_link' => 'file',
  152. ],
  153. ]
  154. );
  155. $this->add_control(
  156. 'gallery_rand',
  157. [
  158. 'label' => __( 'Ordering', 'elementor' ),
  159. 'type' => Controls_Manager::SELECT,
  160. 'options' => [
  161. '' => __( 'Default', 'elementor' ),
  162. 'rand' => __( 'Random', 'elementor' ),
  163. ],
  164. 'default' => '',
  165. ]
  166. );
  167. $this->add_control(
  168. 'view',
  169. [
  170. 'label' => __( 'View', 'elementor' ),
  171. 'type' => Controls_Manager::HIDDEN,
  172. 'default' => 'traditional',
  173. ]
  174. );
  175. $this->end_controls_section();
  176. $this->start_controls_section(
  177. 'section_gallery_images',
  178. [
  179. 'label' => __( 'Images', 'elementor' ),
  180. 'tab' => Controls_Manager::TAB_STYLE,
  181. ]
  182. );
  183. $this->add_control(
  184. 'image_spacing',
  185. [
  186. 'label' => __( 'Spacing', 'elementor' ),
  187. 'type' => Controls_Manager::SELECT,
  188. 'options' => [
  189. '' => __( 'Default', 'elementor' ),
  190. 'custom' => __( 'Custom', 'elementor' ),
  191. ],
  192. 'prefix_class' => 'gallery-spacing-',
  193. 'default' => '',
  194. ]
  195. );
  196. $columns_margin = is_rtl() ? '0 0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}};' : '0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}} 0;';
  197. $columns_padding = is_rtl() ? '0 0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};' : '0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;';
  198. $this->add_control(
  199. 'image_spacing_custom',
  200. [
  201. 'label' => __( 'Image Spacing', 'elementor' ),
  202. 'type' => Controls_Manager::SLIDER,
  203. 'show_label' => false,
  204. 'range' => [
  205. 'px' => [
  206. 'max' => 100,
  207. ],
  208. ],
  209. 'default' => [
  210. 'size' => 15,
  211. ],
  212. 'selectors' => [
  213. '{{WRAPPER}} .gallery-item' => 'padding:' . $columns_padding,
  214. '{{WRAPPER}} .gallery' => 'margin: ' . $columns_margin,
  215. ],
  216. 'condition' => [
  217. 'image_spacing' => 'custom',
  218. ],
  219. ]
  220. );
  221. $this->add_group_control(
  222. Group_Control_Border::get_type(),
  223. [
  224. 'name' => 'image_border',
  225. 'selector' => '{{WRAPPER}} .gallery-item img',
  226. 'separator' => 'before',
  227. ]
  228. );
  229. $this->add_control(
  230. 'image_border_radius',
  231. [
  232. 'label' => __( 'Border Radius', 'elementor' ),
  233. 'type' => Controls_Manager::DIMENSIONS,
  234. 'size_units' => [ 'px', '%' ],
  235. 'selectors' => [
  236. '{{WRAPPER}} .gallery-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  237. ],
  238. ]
  239. );
  240. $this->end_controls_section();
  241. $this->start_controls_section(
  242. 'section_caption',
  243. [
  244. 'label' => __( 'Caption', 'elementor' ),
  245. 'tab' => Controls_Manager::TAB_STYLE,
  246. ]
  247. );
  248. $this->add_control(
  249. 'gallery_display_caption',
  250. [
  251. 'label' => __( 'Display', 'elementor' ),
  252. 'type' => Controls_Manager::SELECT,
  253. 'default' => '',
  254. 'options' => [
  255. '' => __( 'Show', 'elementor' ),
  256. 'none' => __( 'Hide', 'elementor' ),
  257. ],
  258. 'selectors' => [
  259. '{{WRAPPER}} .gallery-item .gallery-caption' => 'display: {{VALUE}};',
  260. ],
  261. ]
  262. );
  263. $this->add_control(
  264. 'align',
  265. [
  266. 'label' => __( 'Alignment', 'elementor' ),
  267. 'type' => Controls_Manager::CHOOSE,
  268. 'options' => [
  269. 'left' => [
  270. 'title' => __( 'Left', 'elementor' ),
  271. 'icon' => 'fa fa-align-left',
  272. ],
  273. 'center' => [
  274. 'title' => __( 'Center', 'elementor' ),
  275. 'icon' => 'fa fa-align-center',
  276. ],
  277. 'right' => [
  278. 'title' => __( 'Right', 'elementor' ),
  279. 'icon' => 'fa fa-align-right',
  280. ],
  281. 'justify' => [
  282. 'title' => __( 'Justified', 'elementor' ),
  283. 'icon' => 'fa fa-align-justify',
  284. ],
  285. ],
  286. 'default' => 'center',
  287. 'selectors' => [
  288. '{{WRAPPER}} .gallery-item .gallery-caption' => 'text-align: {{VALUE}};',
  289. ],
  290. 'condition' => [
  291. 'gallery_display_caption' => '',
  292. ],
  293. ]
  294. );
  295. $this->add_control(
  296. 'text_color',
  297. [
  298. 'label' => __( 'Text Color', 'elementor' ),
  299. 'type' => Controls_Manager::COLOR,
  300. 'default' => '',
  301. 'selectors' => [
  302. '{{WRAPPER}} .gallery-item .gallery-caption' => 'color: {{VALUE}};',
  303. ],
  304. 'condition' => [
  305. 'gallery_display_caption' => '',
  306. ],
  307. ]
  308. );
  309. $this->add_group_control(
  310. Group_Control_Typography::get_type(),
  311. [
  312. 'name' => 'typography',
  313. 'scheme' => Scheme_Typography::TYPOGRAPHY_4,
  314. 'selector' => '{{WRAPPER}} .gallery-item .gallery-caption',
  315. 'condition' => [
  316. 'gallery_display_caption' => '',
  317. ],
  318. ]
  319. );
  320. $this->end_controls_section();
  321. }
  322. /**
  323. * Render image gallery widget output on the frontend.
  324. *
  325. * Written in PHP and used to generate the final HTML.
  326. *
  327. * @since 1.0.0
  328. * @access protected
  329. */
  330. protected function render() {
  331. $settings = $this->get_settings_for_display();
  332. if ( ! $settings['wp_gallery'] ) {
  333. return;
  334. }
  335. $ids = wp_list_pluck( $settings['wp_gallery'], 'id' );
  336. $this->add_render_attribute( 'shortcode', 'ids', implode( ',', $ids ) );
  337. $this->add_render_attribute( 'shortcode', 'size', $settings['thumbnail_size'] );
  338. if ( $settings['gallery_columns'] ) {
  339. $this->add_render_attribute( 'shortcode', 'columns', $settings['gallery_columns'] );
  340. }
  341. if ( $settings['gallery_link'] ) {
  342. $this->add_render_attribute( 'shortcode', 'link', $settings['gallery_link'] );
  343. }
  344. if ( ! empty( $settings['gallery_rand'] ) ) {
  345. $this->add_render_attribute( 'shortcode', 'orderby', $settings['gallery_rand'] );
  346. }
  347. ?>
  348. <div class="elementor-image-gallery">
  349. <?php
  350. $this->add_render_attribute( 'link', [
  351. 'data-elementor-open-lightbox' => $settings['open_lightbox'],
  352. 'data-elementor-lightbox-slideshow' => $this->get_id(),
  353. ] );
  354. if ( Plugin::$instance->editor->is_edit_mode() ) {
  355. $this->add_render_attribute( 'link', [
  356. 'class' => 'elementor-clickable',
  357. ] );
  358. }
  359. add_filter( 'wp_get_attachment_link', [ $this, 'add_lightbox_data_to_image_link' ] );
  360. echo do_shortcode( '[gallery ' . $this->get_render_attribute_string( 'shortcode' ) . ']' );
  361. remove_filter( 'wp_get_attachment_link', [ $this, 'add_lightbox_data_to_image_link' ] );
  362. ?>
  363. </div>
  364. <?php
  365. }
  366. }