WIP #3053

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index eb880d6206c2f5aa0306a79e94f8e004b173cf6e..b58a460914c9a4e1a7ce12183d19b01fae95f409 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
@@ -36,6 +36,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\NewsBanner() );
         $elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() );
         $elementor->widgets_manager->register_widget_type( new Widgets\PictoGrid() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\PhotoGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\PeopleGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\Timeline() );
     }

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PhotoGrid.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PhotoGrid.php
new file mode 100644 (file)
index 0000000..cf7ec2b
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PhotoGrid.php
@@ -0,0 +1,96 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+use function Roots\view;
+
+
+class PhotoGrid extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-photo-grid';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Photo Grid', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-posts-grid';
+    }
+
+    /**
+     * List of scripts the widget depends on.
+     * Used to set scripts dependencies required to run the widget.
+     *
+     * @since 1.0.0
+     * @access public
+     * @return array Widget scripts dependencies.
+     */
+    public function get_script_depends() {
+        return [];
+    }
+    /**
+     * Register the widget controls.
+     * Adds different input fields to allow the user to change and customize the widget settings.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _register_controls() {
+
+        $this->start_controls_section(
+            'section_content',
+            [
+                'label' => __( 'Photo Grid', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __( 'Photos', 'cube' ),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'image',
+                        'label' => __('Photo', 'cube'),
+                        'label_block' => true,
+                        'type' => Controls_Manager::MEDIA,
+                        'default' => [
+                            'url' => Utils::get_placeholder_image_src(),
+                        ],
+                    ],
+                    [
+                        'name' => 'caption',
+                        'label' => __( 'Caption', 'cube' ),
+                        'type' => Controls_Manager::TEXTAREA,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                ],
+                'title_field' => '{{{ caption }}}',
+            ]
+        );
+        $this->end_controls_section();
+
+        $this->common_controls();
+    }
+    /**
+     * Render the widget output on the frontend.
+     * Written in PHP and used to generate the final HTML.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function render() {
+        $items = $this->get_settings('items');
+        echo view('widgets/photo-grid', compact('items'));
+    }
+}

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/photo-grid.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/photo-grid.styl
new file mode 100644 (file)
index 0000000..9783b95
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/photo-grid.styl
@@ -0,0 +1,27 @@
+.photo-grid
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  constrain(grid-gap, 5vw)
+
+  +below(768px)
+    grid-template-columns: repeat(2, 1fr)
+  +below(450px)
+    grid-template-columns: repeat(1, 1fr)
+
+  &-image
+    @apply bg-contain bg-center bg-no-repeat
+
+    &-sizer
+      padding-bottom: 100% // Ratio based sizing to make a square
+
+  &-caption
+    @apply text-center italic mx-auto
+    max-width: 320px
+
+    &:before
+      @apply bg-pink
+      content: ''
+      display: block
+      width: 48px
+      height: 5px
+      margin: 1em auto

diff --git a/wp-content/themes/CCV/resources/views/widgets/photo-grid.blade.php b/wp-content/themes/CCV/resources/views/widgets/photo-grid.blade.php
new file mode 100644 (file)
index 0000000..3a661d6
--- /dev/null
+++ b/wp-content/themes/CCV/resources/views/widgets/photo-grid.blade.php
@@ -0,0 +1,11 @@
+{{-- PHOTO GRID --}}
+<div class="photo-grid">
+    @foreach ($items as $item)
+      <div class="photo-grid-item">
+        <div class="photo-grid-image" style="background-image: url({{ $item['image']['url'] }})">
+          <div class="photo-grid-image-sizer"></div>
+        </div>
+        <p class="photo-grid-caption">{!! nl2br($item['caption']) !!}</p>
+      </div>
+    @endforeach
+</div>