Merge pull request #1205 from CuBoulder/issue/1174

New Image Styles: Colorbox Image Styles

boulder_base.info.yml

@@ -5,10 +5,13 @@ core_version_requirement: ^9 || ^10
 type: theme
 base theme: stable9
 
-libraries: 
+libraries:
   - boulder_base/ucb-global
   - boulder_base/migrate_styles # Needed for css polyfill during migration
 
+ckeditor5-stylesheets:
+  - css/colorbox-image.css
+
 regions:
   header: "Header"
   primary_menu: "Main Menu"

boulder_base.libraries.yml

@@ -17,8 +17,6 @@ ucb-global:
       css/layout-builder-styles.css: {}
       css/block/block-styles.css: {}
       css/ucb-accordion-styles.css: {}
-  ckeditor5-stylesheets:
-    - css/base-ckeditor5.css
   js:
     js/bootstrap/bootstrap.min.js: {}
     js/ucb-rave-alert.js: {}
@@ -486,3 +484,15 @@ ucb-social-media-icons-block:
   css:
     theme:
       css/block/social-media-icons.css: {}
+
+colorbox-image:
+  version: 1.x
+  js:
+    js/glightbox/glightbox.min.js: {}
+    js/glightbox/ucb-gallery-lightbox-settings.js: {}
+    js/masonry/masonry.pkgd.min.js: {}
+  css:
+    theme:
+      css/block/image-gallery.css: {}
+      css/colorbox-image.css: {}
+      js/glightbox/glightbox.min.css: {}

css/colorbox-image.css

@@ -0,0 +1,19 @@
+img.ucb-colorbox-small{
+  width: 300px !important;
+}
+
+img.ucb-colorbox-small-square{
+  width: 70px;
+  height: 70px;
+  object-fit: cover;
+}
+
+img.ucb-colorbox-small-thumbnail{
+  width: 100px !important;
+}
+
+img.ucb-colorbox-square{
+  width: 180px;
+  height: 180px;
+  object-fit: cover;
+}

templates/media/media--image--colorbox-small-square.html.twig

@@ -0,0 +1,23 @@
+{{ attach_library('boulder_base/colorbox-image') }}
+
+{% set imageStyle = 'image_style-default' %}
+{% if content.field_media_image.0['#image_style']|render %}
+  {% set imageStyle = 'image_style-' ~ content.field_media_image.0['#image_style']|render %}
+{% endif %}
+
+{# Retrieve the image URL #}
+{% set image_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}
+
+{# Access the photo description directly from content #}
+{% set field_items = content.field_media_image_caption['#items'] %}
+{% if field_items %}
+  {% set photoDescription = field_items.0.value|render|striptags|trim %}
+{% else %}
+  {% set photoDescription = '' %}
+{% endif %}
+
+<div class="col gallery-item">
+  <a href="{{ image_url }}" class="glightbox ucb-gallery-lightbox" data-gallery="gallery{{ content['#block_content'].id() }}" data-glightbox="description: {{ photoDescription }} ">
+    <img class="ucb-colorbox-small-square" src="{{ image_url }}" alt="{{ photoDescription }}" />
+  </a>
+</div>

templates/media/media--image--colorbox-small-thumbnail.html.twig

@@ -0,0 +1,23 @@
+{{ attach_library('boulder_base/colorbox-image') }}
+
+{% set imageStyle = 'image_style-default' %}
+{% if content.field_media_image.0['#image_style']|render %}
+  {% set imageStyle = 'image_style-' ~ content.field_media_image.0['#image_style']|render %}
+{% endif %}
+
+{# Retrieve the image URL #}
+{% set image_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}
+
+{# Access the photo description directly from content #}
+{% set field_items = content.field_media_image_caption['#items'] %}
+{% if field_items %}
+  {% set photoDescription = field_items.0.value|render|striptags|trim %}
+{% else %}
+  {% set photoDescription = '' %}
+{% endif %}
+
+<div class="col gallery-item">
+  <a href="{{ image_url }}" class="glightbox ucb-gallery-lightbox" data-gallery="gallery{{ content['#block_content'].id() }}" data-glightbox="description: {{ photoDescription }} ">
+    <img class="ucb-colorbox-small-thumbnail" src="{{ image_url }}" alt="{{ photoDescription }}" />
+  </a>
+</div>

templates/media/media--image--colorbox-small.html.twig

@@ -0,0 +1,23 @@
+{{ attach_library('boulder_base/colorbox-image') }}
+
+{% set imageStyle = 'image_style-default' %}
+{% if content.field_media_image.0['#image_style']|render %}
+  {% set imageStyle = 'image_style-' ~ content.field_media_image.0['#image_style']|render %}
+{% endif %}
+
+{# Retrieve the image URL #}
+{% set image_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}
+
+{# Access the photo description directly from content #}
+{% set field_items = content.field_media_image_caption['#items'] %}
+{% if field_items %}
+  {% set photoDescription = field_items.0.value|render|striptags|trim %}
+{% else %}
+  {% set photoDescription = '' %}
+{% endif %}
+
+<div class="col gallery-item">
+  <a href="{{ image_url }}" class="glightbox ucb-gallery-lightbox" data-gallery="gallery{{ content['#block_content'].id() }}" data-glightbox="description: {{ photoDescription }} ">
+    <img class="ucb-colorbox-small" src="{{ image_url }}" alt="{{ photoDescription }}" />
+  </a>
+</div>

templates/media/media--image--colorbox-square.html.twig

@@ -0,0 +1,23 @@
+{{ attach_library('boulder_base/colorbox-image') }}
+
+{% set imageStyle = 'image_style-default' %}
+{% if content.field_media_image.0['#image_style']|render %}
+  {% set imageStyle = 'image_style-' ~ content.field_media_image.0['#image_style']|render %}
+{% endif %}
+
+{# Retrieve the image URL #}
+{% set image_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}
+
+{# Access the photo description directly from content #}
+{% set field_items = content.field_media_image_caption['#items'] %}
+{% if field_items %}
+  {% set photoDescription = field_items.0.value|render|striptags|trim %}
+{% else %}
+  {% set photoDescription = '' %}
+{% endif %}
+
+<div class="col gallery-item">
+  <a href="{{ image_url }}" class="glightbox ucb-gallery-lightbox" data-gallery="gallery{{ content['#block_content'].id() }}" data-glightbox="description: {{ photoDescription }} ">
+    <img class="ucb-colorbox-square" src="{{ image_url }}" alt="{{ photoDescription }}" />
+  </a>
+</div>