feat(ui): teaser block uses highest resolution available to it

intk · Mar 21, 2024 · 07cbc14 · 07cbc14
1 parent c7f9792
commit 07cbc14
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/frontend/src/components/blocks/Teaser/TeaserDefaultTemplate.jsx b/frontend/src/components/blocks/Teaser/TeaserDefaultTemplate.jsx
@@ -1,14 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Message } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
+import { MaybeWrap, UniversalLink } from '@plone/volto/components';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from '@plone/volto/components/manage/Blocks/Teaser/utils';
-import { MaybeWrap } from '@plone/volto/components';
-import { UniversalLink } from '@plone/volto/components';
-import cx from 'classnames';
 import config from '@plone/volto/registry';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import { Message } from 'semantic-ui-react';
+import { getTeaserImageURL } from './utils';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -86,7 +84,7 @@ const TeaserDefaultTemplate = (props) => {
   const Image = config.getComponent('Image').component || DefaultImage;
   const { openExternalLinkInNewTab } = config.settings;
   const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
+    href && flattenToAppURL(getTeaserImageURL({ href, image }));
 
   const isEvent = data.href?.[0]?.['@type'] === 'Event';
   const end = new Date(data.href?.[0]?.end || Date.now());

diff --git a/frontend/src/components/blocks/Teaser/TeaserHeroTemplate.jsx b/frontend/src/components/blocks/Teaser/TeaserHeroTemplate.jsx
@@ -1,6 +1,5 @@
 import { MaybeWrap, UniversalLink } from '@plone/volto/components';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { getTeaserImageURL } from '@plone/volto/components/manage/Blocks/Teaser/utils';
 import {
   BodyClass,
   flattenToAppURL,
@@ -11,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Message } from 'semantic-ui-react';
+import { getTeaserImageURL } from './utils';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -82,13 +82,13 @@ const TeaserHeroTemplate = (props) => {
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
-  const align = data?.styles?.align;
+  // const align = data?.styles?.align;
 
   const hasImageComponent = config.getComponent('Image').component;
   const Image = config.getComponent('Image').component || DefaultImage;
   const { openExternalLinkInNewTab } = config.settings;
   const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
+    href && flattenToAppURL(getTeaserImageURL({ href, image }));
 
   const isEvent = data.href?.[0]?.['@type'] === 'Event';
   const end = new Date(data.href?.[0]?.end || Date.now());

diff --git a/frontend/src/components/blocks/Teaser/utils.js b/frontend/src/components/blocks/Teaser/utils.js
@@ -0,0 +1,57 @@
+import { isInternalURL } from '@plone/volto/helpers';
+// import config from '@plone/volto/registry';
+
+function findNameOfBiggestImage(images) {
+  let maxHeight = 0;
+  let objectNameWithMaxHeight = 'teaser';
+
+  for (const [key, value] of Object.entries(images)) {
+    if (value.height > maxHeight) {
+      maxHeight = value.height;
+      objectNameWithMaxHeight = key;
+    }
+  }
+
+  return objectNameWithMaxHeight;
+}
+
+export function getTeaserImageURL({ href, image }) {
+  // The default scale used in teasers is the 'teaser' scale
+  // except if it's customized otherwise in the teaser block settings
+  // or if the teaser is center (top)
+  // const imageScale = isHero ? 'great' : 'larger';
+  const { scales } = href.image_scales?.[href.image_field]?.[0] || {};
+  const imageScale = findNameOfBiggestImage(scales);
+
+  if (image) {
+    // If the image is overriden locally in the teaser block
+    if (isInternalURL(image['@id'])) {
+      // If it's internal check if image_scales catalog info is present
+      if (image?.image_scales?.[image?.image_field]) {
+        return `${image['@id']}/${
+          image.image_scales[image.image_field]?.[0].scales[imageScale]
+            ?.download || image.image_scales[image.image_field]?.[0].download
+        }`;
+      } else {
+        // If not, fallback to content scale URL shortcut
+        return `${image['@id']}/@@images/${image.image_field}/${imageScale}`;
+      }
+    } else {
+      // If it's external, return the plain URL
+      return image['@id'];
+    }
+  } else {
+    // If the image is not overriden
+    if (href?.image_scales?.[href?.image_field]) {
+      return `${href['@id']}/${
+        href.image_scales[href.image_field]?.[0].scales[imageScale]?.download ||
+        href.image_scales[href.image_field]?.[0].download
+      }`;
+    } else {
+      // If not, fallback to content scale URL shortcut
+      return `${href['@id']}/@@images/${
+        href.image_field || 'preview_image'
+      }/${imageScale}`;
+    }
+  }
+}