Merge pull request #2404 from tf/large-teaser-thumbnail-variant

Add srcset support to externalLinkList thumbnails

Author: tf

entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js

@@ -5,6 +5,7 @@ import React from 'react';
 import {renderInEntry} from 'support';
 import {screen} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import {features} from 'pageflow/frontend';
 
 describe('ExternalLink', () => {
   it('renders link with href', () => {
@@ -237,6 +238,29 @@ describe('ExternalLink', () => {
     expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('medium'));
   });
 
+  it('falls back to linkThumbnailLarge for large linkWidth when image_srcset disabled', () => {
+    const {getByRole} = renderInEntry(
+      <ExternalLink configuration={{}}
+                    url=""
+                    loadImages={true}
+                    thumbnail={5}
+                    linkWidth="xxl" />,
+      {
+        seed: {
+          imageFiles: [{permaId: 5}],
+          imageFileUrlTemplates: {
+            linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+            medium: ':id_partition/medium/image.jpg',
+            large: ':id_partition/large/image.jpg'
+          },
+        }
+      }
+    )
+
+    expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('linkThumbnailLarge'));
+    expect(getByRole('img')).not.toHaveAttribute('srcset');
+  });
+
   it('uses medium image as thumbnail with thumbnail fit contain', () => {
     const {getByRole} = renderInEntry(
       <ExternalLink configuration={{}}
@@ -257,6 +281,86 @@ describe('ExternalLink', () => {
 
     expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('medium'));
   });
+
+  describe('srcset', () => {
+    beforeEach(() => features.enable('frontend', ['image_srcset']));
+    afterEach(() => features.enabledFeatureNames = []);
+
+    it('uses medium and large srcset for linkWidth m', () => {
+      const {getByRole} = renderInEntry(
+        <ExternalLink configuration={{}}
+                      url=""
+                      loadImages={true}
+                      thumbnail={5}
+                      linkWidth="m" />,
+        {
+          seed: {
+            imageFiles: [{permaId: 5, id: 1, width: 4000, height: 3000}],
+            imageFileUrlTemplates: {
+              linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+              medium: ':id_partition/medium/image.jpg',
+              large: ':id_partition/large/image.jpg'
+            },
+          }
+        }
+      )
+
+      expect(getByRole('img')).toHaveAttribute('srcset',
+        '000/000/001/medium/image.jpg 1024w, 000/000/001/large/image.jpg 1920w');
+      expect(getByRole('img')).toHaveAttribute('sizes',
+        '(min-width: 950px) 50vw, 100vw');
+    });
+
+    it('uses medium, large and ultra srcset for linkWidth xxl', () => {
+      const {getByRole} = renderInEntry(
+        <ExternalLink configuration={{}}
+                      url=""
+                      loadImages={true}
+                      thumbnail={5}
+                      linkWidth="xxl" />,
+        {
+          seed: {
+            imageFiles: [{permaId: 5, id: 1, width: 4000, height: 3000}],
+            imageFileUrlTemplates: {
+              linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+              medium: ':id_partition/medium/image.jpg',
+              large: ':id_partition/large/image.jpg',
+              ultra: ':id_partition/ultra/image.jpg'
+            },
+          }
+        }
+      )
+
+      expect(getByRole('img')).toHaveAttribute('srcset',
+        '000/000/001/medium/image.jpg 1024w, ' +
+        '000/000/001/large/image.jpg 1920w, ' +
+        '000/000/001/ultra/image.jpg 3840w');
+      expect(getByRole('img')).toHaveAttribute('sizes', '100vw');
+    });
+
+    it('still uses linkThumbnailLarge for small linkWidth', () => {
+      const {getByRole} = renderInEntry(
+        <ExternalLink configuration={{}}
+                      url=""
+                      loadImages={true}
+                      thumbnail={5}
+                      linkWidth="s" />,
+        {
+          seed: {
+            imageFiles: [{permaId: 5, id: 1, width: 4000, height: 3000}],
+            imageFileUrlTemplates: {
+              linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+              medium: ':id_partition/medium/image.jpg',
+              large: ':id_partition/large/image.jpg'
+            },
+          }
+        }
+      )
+
+      expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('linkThumbnailLarge'));
+      expect(getByRole('img')).not.toHaveAttribute('srcset');
+    });
+  });
 });
 
 function value(text) {

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js

@@ -165,6 +165,7 @@ export function ExternalLink({id, configuration, contentElementId, ...props}) {
                        aspectRatio={props.thumbnailAspectRatio}
                        cropPosition={props.thumbnailCropPosition}
                        fit={props.thumbnailFit}
+                       linkWidth={props.linkWidth}
                        load={props.loadImages}
                        showPlaceholder={isEditable}>
               <InlineFileRights configuration={configuration}

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js

@@ -135,6 +135,7 @@ export function ExternalLinkList(props) {
                                 thumbnailFit={props.configuration.thumbnailFit || 'cover'}
                                 textPosition={props.configuration.textPosition || 'below'}
                                 textSize={props.configuration.textSize || 'small'}
+                                linkWidth={linkWidth}
                                 darkBackground={darkBackground}
                                 loadImages={shouldLoad}
                                 outlined={isSelected}

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import classNames from 'classnames';
+import {features} from 'pageflow/frontend';
 
 import {Image, FilePlaceholder} from 'pageflow-scrolled/frontend';
 
 import styles from './Thumbnail.module.css';
 
-export function Thumbnail({imageFile, aspectRatio, cropPosition, fit, load, showPlaceholder, children}) {
+export function Thumbnail({imageFile, aspectRatio, cropPosition, fit, linkWidth,
+                           load, showPlaceholder, children}) {
   imageFile = {
     ...imageFile,
     cropPosition
   };
 
   const aspectRatioPadding = getAspectRatioPadding(aspectRatio, imageFile);
+  const {variant, sizes} = variantAndSizes({aspectRatio, cropPosition, fit, linkWidth});
 
   return (
     <div className={classNames(styles.thumbnail,
@@ -21,15 +24,44 @@ export function Thumbnail({imageFile, aspectRatio, cropPosition, fit, load, show
       <Image imageFile={imageFile}
              load={load}
              preferSvg={true}
-             variant={((aspectRatio && aspectRatio !== 'wide') ||
-                       cropPosition ||
-                       fit === 'contain') ? 'medium' : 'linkThumbnailLarge'}
+             variant={variant}
+             sizes={sizes}
              fit={fit} />
       {children}
     </div>
   );
 }
 
+function variantAndSizes({aspectRatio, cropPosition, fit, linkWidth}) {
+  const needsUncropped = (aspectRatio && aspectRatio !== 'wide') ||
+                         cropPosition ||
+                         fit === 'contain';
+  const bucket = linkWidthBucket(linkWidth);
+
+  if (!features.isEnabled('image_srcset') || bucket === 'small') {
+    return {variant: needsUncropped ? 'medium' : 'linkThumbnailLarge'};
+  }
+
+  if (bucket === 'medium') {
+    return {
+      variant: ['medium', 'large'],
+      sizes: '(min-width: 950px) 50vw, 100vw'
+    };
+  }
+
+  return {variant: ['medium', 'large', 'ultra']};
+}
+
+function linkWidthBucket(linkWidth) {
+  if (linkWidth === 'xl' || linkWidth === 'xxl') {
+    return 'large';
+  }
+  if (linkWidth === 'm' || linkWidth === 'l') {
+    return 'medium';
+  }
+  return 'small';
+}
+
 function getAspectRatioPadding(aspectRatio, imageFile) {
   if (aspectRatio === 'original' && imageFile) {
     return `${imageFile.height / imageFile.width * 100}%`;