Add gallery contentblock and part

oslokommune · Nov 7, 2024 · 07face7 · 07face7
1 parent dbec031
commit 07face7
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 2 deletions.
diff --git a/src/main/frontend/styles/main.scss b/src/main/frontend/styles/main.scss
@@ -217,8 +217,6 @@ html {
 }
 
 .home-header {
-  margin-bottom: 1.5rem;
-
   &__columns {
     flex-direction: row-reverse;
   }

diff --git a/src/main/resources/lib/labs/content-prep.js b/src/main/resources/lib/labs/content-prep.js
@@ -335,6 +335,13 @@ function processContentBlocks(ctbs) {
       block.ctb.ctbImages = processBlockImages(block.ctb.ctbImages)
     }
 
+    // Prepare gallery
+    if (block.ctb._selected === 'ctbGallery' && block.ctb.ctbGallery) {
+      // Duplicate fullwidth flag from settings, as it is needed in calculation
+      block.ctb.ctbGallery.isFullWidth = block.ctb.isFullWidth
+      block.ctb.ctbGallery = processBlockGallery(block.ctb.ctbGallery)
+    }
+
     // Process links block
     if (block.ctb._selected === 'ctbLinks' && block.ctb.ctbLinks) {
       block.ctb.ctbLinks = processBlockLinkList(block.ctb.ctbLinks)
@@ -447,6 +454,17 @@ var processBlockImages = function (b) {
 }
 exports.processBlockImages = processBlockImages
 
+var processBlockGallery = function (b) {
+  b.galleryImages = util.forceArray(b.galleryImages)
+  var scale = 'width(1)' // No scaling is default
+  b.galleryImages = b.galleryImages.map(function (image) {
+    image = imageLib.image.create(image, scale)
+    return image
+  })
+  return b
+}
+exports.processBlockGallery = processBlockGallery
+
 var processBlockVideos = function (b) {
   const defaultAspectRatio = '16:9'
   var ratio

diff --git a/src/main/resources/site/i18n/phrases_no.properties b/src/main/resources/site/i18n/phrases_no.properties
@@ -74,6 +74,8 @@ ct.article.ctbCollection       = Samling av innhold
 ct.article.ctbCollectionDesc   = Predefinert sett med gruppert innhold
 ct.article.ctbImages           = Bilder
 ct.article.ctbImagesDesc       = 1-3 bilder
+ct.article.ctbGallery          = Bildegalleri
+ct.article.ctbGalleryDesc      = Bilder til galleri
 ct.article.ctbVideo            = Video
 ct.article.ctbVideoDesc        = Vimeo video fra video-id
 ct.article.ctbVideoId          = Vimeo video-id
@@ -109,6 +111,7 @@ parts.genericText.lead         = Enkel tekst
 parts.genericText.body         = Rik tekst (HTML)
 parts.blockLinkList            = Generisk lenkeliste
 parts.blockImages              = Generisk bildeblokk
+parts.blockGallery             = Generisk galleriblokk
 parts.blockCollection          = Samling av innhold
 parts.article                  = Artikkel
 parts.category                 = Kategoriside (temaside)

diff --git a/src/main/resources/site/mixins/contentblock/contentblock.xml b/src/main/resources/site/mixins/contentblock/contentblock.xml
@@ -34,6 +34,19 @@
           </items>
         </option>
 
+        <!-- Gallery block -->
+        <option name="ctbGallery">
+          <label i18n="ct.article.ctbGallery">Gallery</label>
+          <help-text i18n="ct.article.ctbGalleryDesc">Image gallery</help-text>
+          <items>
+            <input name="galleryImages" type="ImageSelector">
+              <label i18n="txt.images">Images</label>
+              <occurrences minimum="1" maximum="0"/>
+            </input>
+            <mixin name="contentblock-settings" />
+          </items>
+        </option>
+
         <!-- Video block -->
         <option name="ctbVideo">
           <label i18n="ct.article.ctbVideo">Video</label>

diff --git a/src/main/resources/site/parts/block-gallery/block-gallery.html b/src/main/resources/site/parts/block-gallery/block-gallery.html
@@ -0,0 +1,10 @@
+<div data-th-remove="tag">
+  <div data-th-if="${!live && !hasContent}">
+    <h3>Unconfigured generic gallery part</h3>
+  </div>
+  <section data-th-if="${hasContent}" class="section">
+    <div class="container">
+      <div data-th-replace="/site/snippets/block-gallery.html(d=${data}, s=${settings})" data-th-remove="tag"></div>
+    </div>
+  </section>
+</div>
diff --git a/src/main/resources/site/parts/block-gallery/block-gallery.js b/src/main/resources/site/parts/block-gallery/block-gallery.js
@@ -0,0 +1,18 @@
+var portal = require('/lib/xp/portal')
+var thymeleaf = require('/lib/thymeleaf')
+var contentPrep = require('/lib/labs/content-prep.js')
+
+exports.get = function (req) {
+  var component = portal.getComponent()
+  var model = {}
+  model.data = contentPrep.processBlockGallery(component.config)
+  model.data.isFullWidth = true
+  model.live = req.mode == 'live'
+  model.hasContent = model && model.data && model.data.hasOwnProperty('galleryImages')
+  var view = resolve('./block-gallery.html')
+  var body = thymeleaf.render(view, model)
+  return {
+    body: body,
+    contentType: 'text/html',
+  }
+}
diff --git a/src/main/resources/site/parts/block-gallery/block-gallery.xml b/src/main/resources/site/parts/block-gallery/block-gallery.xml
@@ -0,0 +1,9 @@
+<part>
+  <display-name i18n="parts.blockGallery">Generic gallery block</display-name>
+  <form>
+    <input name="galleryImages" type="ImageSelector">
+      <label i18n="txt.images">Images</label>
+      <occurrences minimum="1" maximum="0"/>
+    </input>
+  </form>
+</part>
diff --git a/src/main/resources/site/snippets/block-gallery.html b/src/main/resources/site/snippets/block-gallery.html
@@ -0,0 +1,43 @@
+<!--
+  /*
+    Gallery block
+    Wants data in ${data}
+  */
+-->
+
+<div data-th-if="${data.galleryImages}">
+  <div class="columns">
+    <div class="column" data-th-classappend="${data.isFullWidth} ? 'is-12' : 'is-10-fullhd is-offset-1-fullhd'">
+      <div class="columns is-multiline">
+        <a
+          class="gallery column is-one-third"
+          data-th-each="image: ${data.galleryImages}"
+          data-th-object="${image}"
+          data-th-href="*{src}"
+          data-th-data-pswp-width="*{width}"
+          data-th-data-pswp-height="*{height}"
+        >
+          <figure>
+            <img
+              data-th-width="*{width}"
+              data-th-height="*{height}"
+              data-th-src="*{placeholderSrc}"
+              data-th-srcset="*{srcSet}"
+              data-th-alt-title="*{alt}"
+              data-th-sizes="${data.isFullWidth} ? 
+            '(max-width:768px) 95vw, (max-width:1087px) 30vw, (max-width:1279px) 301px, (max-width:1471px) 364px, 352px' :
+            '(max-width:768px) 95vw, (max-width:1087px) 30vw, (max-width:1279px) 301px, (max-width:1471px) 364px, 428px'"
+            />
+            <figcaption
+              data-th-if="*{caption}"
+              class="o-block-images__caption pswp-caption-content"
+              data-th-utext="*{caption}"
+            >
+              Caption
+            </figcaption>
+          </figure>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/main/resources/site/snippets/content-blocks.html b/src/main/resources/site/snippets/content-blocks.html
@@ -135,6 +135,14 @@ <h3 class="title is-marginless" data-th-text="${block.ctbMap.mapTitle}"></h3>
   data-th-insert="block-images.html(data=${block.ctbImages})"
 ></div>
 
+<!-- /* Gallery block */ -->
+<div
+  data-th-fragment="ctbGallery"
+  data-th-if="${block.ctbGallery.galleryImages}"
+  class="column"
+  data-th-insert="block-gallery.html(data=${block.ctbGallery})"
+></div>
+
 <!-- /* Podcast */ -->
 <div data-th-fragment="ctbPodcast" data-th-remove="tag">
   <div