Closes #5443 Adds photo gallery paragraph on-page captions option.

modules/custom/az_demo/data/az_demo_paragraph_gallery.json

@@ -5,20 +5,23 @@
             "az_photos" : "placeduck01.jpg|placeduck02.jpg|placeduck03.jpg|placeduck04.jpg|placeduck05.jpg|placeduck06.jpg|placeduck07.jpg|placeduck08.jpg|placeduck09.jpg|placeduck10.jpg|placeduck11.jpg",
             "bottom_spacing" : "mb-4",
             "gallery_display" : "grid",
+            "gallery_captions" : false,
             "ratio" : ""
         },
         {
             "id":201,
             "az_photos" : "earth_solid.jpg|earth_solid_2.jpg|placeduck02.jpg|placeduck04.jpg|arizona_campus_fireworks.jpg|wilbur-wildcat.jpg",
             "bottom_spacing" : "mb-4",
             "gallery_display" : "slider",
+            "gallery_captions" : false,
             "ratio" : ""
         },
         {
             "id":202,
             "az_photos" : "earth_solid.jpg|earth_solid_2.jpg|placeduck02.jpg|placeduck04.jpg|arizona_campus_fireworks.jpg|wilbur-wildcat.jpg",
             "bottom_spacing" : "mb-4",
             "gallery_display" : "slider_full",
+            "gallery_captions" : false,
             "ratio" : "16x9"
         }
     ]

modules/custom/az_demo/migrations/az_demo_paragraph_gallery.yml

@@ -27,6 +27,9 @@ source:
     -
       name: gallery_display
       selector: gallery_display
+    -
+      name: gallery_captions
+      selector: gallery_captions
     -
       name: ratio
       selector: ratio
@@ -63,6 +66,7 @@ process:
     paragraph_behavior_plugins:
       az_photo_gallery_paragraph_behavior:
         gallery_display: gallery_display
+        gallery_captions: gallery_captions
         ratio: ratio
         az_display_settings:
           bottom_spacing: bottom_spacing

modules/custom/az_paragraphs/az_paragraphs_photo_gallery/templates/grid-gallery.html.twig

@@ -22,10 +22,13 @@
           '#alt': item.entity.field_media_az_image.alt,
           '#attributes': { class: ['rounded-0'] },
         } %}
-        <button class="col-6 col-md-4 col-lg-3 az-gallery-grid-btn" data-bs-toggle="modal" data-bs-target="#{{ modal }}">
+        <button class="col-6 col-md-4 col-lg-3 d-flex flex-column align-items-start az-gallery-grid-btn" data-bs-toggle="modal" data-bs-target="#{{ modal }}">
           <span data-bs-target="#{{ gallery }}" data-bs-slide-to="{{ loop.index0 }}">
             <picture class="img-fluid">{{ thumbnail_image }}</picture>
           </span>
+          {% if gallery_captions and item.entity.field_az_caption.value %}
+            <p class="px-2 mb-2">{{ item.entity.field_az_caption.value }}</p>
+          {% endif %}
         </button>
       {% endif %}
     {% endfor %}

modules/custom/az_paragraphs/az_paragraphs_photo_gallery/templates/paragraph--az-photo-gallery.html.twig

@@ -33,6 +33,7 @@
  * - is_admin: Flag for admin user status. Will be true when the current user
  *   is an administrator.
  * - gallery_display: Machine name of the display type. Can be grid, slider, or slider_full
+ * - gallery_captions: Boolean to determine whether to show captions in the gallery.
  * - modal: Unique id for the modal element.
  * - gallery: Unique id for the carousel element.
  * - ratio: Aspect ratio for the gallery display.

modules/custom/az_paragraphs/src/Plugin/paragraphs/Behavior/AZPhotoGalleryParagraphBehavior.php

@@ -37,6 +37,17 @@ public function buildBehaviorForm(ParagraphInterface $paragraph, array &$form, F
       '#description' => $this->t('The type of display to use for the photo gallery.'),
     ];
 
+    $form['gallery_captions'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Show captions under each thumbnail'),
+      '#default_value' => $config['gallery_captions'] ?? FALSE,
+      '#states' => [
+        'visible' => [
+          ':input[name$="[behavior_plugins][az_photo_gallery_paragraph_behavior][gallery_display]"]' => ['value' => 'grid'],
+        ],
+      ],
+    ];
+
     $form['gallery_ratio'] = [
       '#title' => $this->t('Gallery Aspect Ratio'),
       '#type' => 'select',
@@ -87,6 +98,9 @@ public function preprocess(&$variables) {
     // Variable to control which display to use.
     $variables['gallery_display'] = $config['gallery_display'] ?? 'grid';
 
+    // Variable to control which display to use.
+    $variables['gallery_captions'] = $config['gallery_captions'] ?? FALSE;
+
     // Variable to control the aspect ratio for the gallery display.
     $variables['ratio'] = $config['gallery_ratio'] ?? '16x9';