diff --git a/apps/cms/lib/field/image.ex b/apps/cms/lib/field/image.ex index fae38c1494..e1c0935207 100644 --- a/apps/cms/lib/field/image.ex +++ b/apps/cms/lib/field/image.ex @@ -1,20 +1,37 @@ defmodule CMS.Field.Image do @moduledoc """ Represents an image field in the Drupal CMS. This image field is embedded - in other content types like CMS.Page.NewsEntry. + in other content types like CMS.Page.NewsEntry. Captions only used on galleries. """ + alias Phoenix.HTML - import CMS.Helpers, only: [rewrite_url: 1] + import CMS.Helpers, + only: [ + field_value: 2, + handle_html: 1, + rewrite_url: 1 + ] - defstruct url: "", alt: "" + defstruct url: "", + alt: "", + caption: nil @type t :: %__MODULE__{ url: String.t(), - alt: String.t() + alt: String.t(), + caption: HTML.safe() | nil } @spec from_api(map) :: t - def from_api(%{"alt" => alt, "url" => url}) do - %__MODULE__{alt: alt, url: rewrite_url(url)} + def from_api(%{"alt" => alt, "url" => url} = data) do + %__MODULE__{ + url: rewrite_url(url), + alt: alt, + caption: data |> field_value("field_image_caption") |> handle_caption() + } end + + @spec handle_caption(String.t() | nil) :: HTML.safe() | nil + defp handle_caption(nil), do: nil + defp handle_caption(caption), do: handle_html(caption) end diff --git a/apps/site/assets/js/photo-gallery.js b/apps/site/assets/js/photo-gallery.js index eccaf7d3a6..6ec672681f 100644 --- a/apps/site/assets/js/photo-gallery.js +++ b/apps/site/assets/js/photo-gallery.js @@ -17,8 +17,10 @@ export default function photoGallery($) { /* DATA FUNCTIONS */ function initializeData($) { - let output = {}; - let $galleryEl, galleryId, images; + const output = {}; + let $galleryEl; + let galleryId; + let images; $('[data-component="photo-gallery"]').each((_offset, el) => { $galleryEl = $(el); @@ -27,8 +29,8 @@ function initializeData($) { galleryId = guid(); $galleryEl.attr("data-gallery-id", galleryId); - // find all images that belong to a gallery - images = $galleryEl.find("img").get(); + // find all images/captions that belong to a gallery + images = $galleryEl.find("figure").get(); // create an object to keep track of image gallery parameters output[galleryId] = makeGallery($galleryEl, images); @@ -39,7 +41,7 @@ function initializeData($) { const makeGallery = ($el, images) => ({ el: $el, - images: images, + images, imageOffset: 0, pageOffset: 0, lastPage: calculateLastPage(images.length) @@ -82,7 +84,6 @@ function handleClickImage(ev) { ev.preventDefault(); const id = ev.currentTarget.getAttribute("data-gallery"); const offset = ev.currentTarget.getAttribute("data-offset"); - const photoId = ev.currentTarget.getAttribute("id"); const actualOffset = setGalleryImageOffset(id, offset); replaceActiveImage(id, getGalleryImageByOffset(id, actualOffset)); } @@ -92,7 +93,7 @@ function handleClickNavigation(ev) { const id = ev.currentTarget.getAttribute("data-gallery"); const increment = parseInt(ev.currentTarget.getAttribute("data-increment")); const focusEl = increment === 1 ? "next" : "prev"; - const isDesktop = isVisible(id + "images"); + const isDesktop = isVisible(`${id}images`); // when on desktop: navigate between sets of images // when on mobile: navigate between images @@ -115,10 +116,14 @@ const guid = () => /* RENDERING FUNCTIONS */ function render(id, focusId) { // get main image - const mainImage = galleries[id].images + const main = galleries[id].images .filter((_el, offset) => offset == galleries[id].imageOffset) .pop(); + const mainImage = main.querySelectorAll("img").item(0); + + const mainCaption = main.querySelectorAll("figcaption").item(0); + // get pages of images const firstImage = galleries[id].pageOffset * PAGE_SIZE; const lastImage = firstImage + PAGE_SIZE; @@ -130,19 +135,19 @@ function render(id, focusId) { // render group of images const markUp = `
-
- ${mainImage.getAttribute( +
+
+ ${mainImage.getAttribute(
-
${mainImage.getAttribute( - "alt" - )}
+
${ + mainCaption.innerHTML + }
+
-
${renderImages(images, firstImage, id)} @@ -163,14 +168,14 @@ function renderNavigation(id, pagination) { Previous Next @@ -186,20 +191,43 @@ function renderImages(images, firstImage, id) { data-gallery="${id}" id="${id + (firstImage + offset)}" role="navigation" - title="change photo to ${image.getAttribute("alt")}" + title="change photo to ${image + .querySelectorAll("img") + .item(0) + .getAttribute("alt")}" data-offset="${firstImage + offset}"> ${image.getAttribute(` + alt="${image + .querySelectorAll("img") + .item(0) + .getAttribute("alt")}" + src="${image + .querySelectorAll("img") + .item(0) + .getAttribute("src")}">` ) .join(""); } function replaceActiveImage(id, image) { - const activeImage = document.getElementById(id + "primary"); - const activeImageName = document.getElementById(id + "name"); - activeImage.setAttribute("src", image.getAttribute("src")); - activeImage.setAttribute("alt", image.getAttribute("alt")); - activeImageName.innerHTML = image.getAttribute("alt"); + const activeImage = document.getElementById(`${id}primary`); + const activeImageName = document.getElementById(`${id}name`); + activeImage.setAttribute( + "src", + image + .querySelectorAll("img") + .item(0) + .getAttribute("src") + ); + activeImage.setAttribute( + "alt", + image + .querySelectorAll("img") + .item(0) + .getAttribute("alt") + ); + activeImageName.innerHTML = image + .querySelectorAll("figcaption") + .item(0).innerHTML; } diff --git a/apps/site/assets/js/test/photo-gallery_test.js b/apps/site/assets/js/test/photo-gallery_test.js index 1af4cd0540..d2d9d6316e 100644 --- a/apps/site/assets/js/test/photo-gallery_test.js +++ b/apps/site/assets/js/test/photo-gallery_test.js @@ -12,72 +12,106 @@ describe("photo-gallery", () => { $("body") .append(`
-
Red
-
Red
+
+ Red +
Red
+
-
Blue
-
Blue
+
+ Blue +
Blue
+
-
Brown
-
Brown
+
+ Brown +
Brown
+
-
Gray
-
Gray
+
+ Gray +
Gray
+
-
Yellow
-
Yellow
+
+ Yellow +
Yellow
+
-
Green
-
Green
+
+ Green +
Green
+
-
Purple
-
Purple
+
+ Purple +
Purple
+
-
Maroon
-
Maroon
+
+ Maroon +
Maroon
+
-
Yucky
-
Yucky
+
+ Yucky +
Yucky
+
-
Light Blue
-
Light Blue
+
+ Light Blue +
Light Blue
+
-
White
-
White
+
+ White +
White
+
-
page 2 red
-
page 2 red
+
+ page 2 red +
page 2 red
+
-
page 2 blue
-
page 2 blue
+
+ page 2 blue +
page 2 blue
+
-
page 2 brown
-
page 2 brown
+
+ page 2 brown +
page 2 brown
+
-
page 2 dark
-
page 2 dark
+
+ page 2 dark +
page 2 dark
+
-
page 2 yellow
-
page 2 yellow
+
+ page 2 yellow +
page 2 yellow
+
-
page 2 green
-
page 2 green
+
+ page 2 green +
page 2 green
+
`); photoGallery($); diff --git a/apps/site/lib/site_web/templates/cms/paragraph/_photo_gallery.html.eex b/apps/site/lib/site_web/templates/cms/paragraph/_photo_gallery.html.eex index 0d42517f2a..59bed5a26f 100644 --- a/apps/site/lib/site_web/templates/cms/paragraph/_photo_gallery.html.eex +++ b/apps/site/lib/site_web/templates/cms/paragraph/_photo_gallery.html.eex @@ -3,12 +3,18 @@
<%= for image <- @content.images do %>
-
+
<%= link to: image.url do %> <%= img_tag(image.url, alt: image.alt, class: "img-thumbnail") %> <% end %> -
-
<%= image.alt %>
+
+ <%= if image.caption do %> + <%= image.caption %> + <% else %> +

<%= image.alt %>

+ <% end %> +
+
<% end %>