From bce80b9c9d6ad2c6ce9005714b0dc38871f4a4a3 Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Sun, 1 Sep 2024 10:49:41 +0100 Subject: [PATCH] lazy load large blog images --- .../src/components/Article/Article.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/lib-content/src/components/Article/Article.js b/packages/lib-content/src/components/Article/Article.js index 7d87bb23f3a..ca4572f31fc 100644 --- a/packages/lib-content/src/components/Article/Article.js +++ b/packages/lib-content/src/components/Article/Article.js @@ -1,4 +1,4 @@ -import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet' +import { Anchor, Box, Heading, Image, Paragraph, ResponsiveContext } from 'grommet' import { string } from 'prop-types' import { useTranslation } from '../../translations/i18n.js' import styled from 'styled-components' @@ -9,6 +9,10 @@ const StyledParagraph = styled(Paragraph)` line-height: 1.2; ` +const thumbnailSize = { + max: '120px', + min: '120px' +} export default function Article({ date = '', excerpt = '', @@ -33,11 +37,17 @@ export default function Article({ {imageSrc.length && size !== 'small' ? ( + height={thumbnailSize} + width={thumbnailSize} + > + {title} + ) : null}