Demo Site: Add createImageSizes helper #3804
Conversation
johnnyomair
requested review from
nsams,
fraxachun,
manuelblum,
dkarnutsch and
thomasdax98
| <RichTextBlock data={text} /> | ||
| </TextContainer> | ||
| </Root> | ||
| <PageLayout> |
There was a problem hiding this comment.
By adding into a block, you are converting it into a PageContent-Block (a block that positions itself in the page (adds margins etc)).
PageContent-Blocks can only be used in the outer PageContentBlock (the root content-BlocksBlock) as it would add extra margins for nested usages.
common/blocks/* blocks can have two exports: A PageContent version and a plain version.
stekalt
force-pushed
the
add-createNextImageSizes-function
branch
from
5f93d98 to
dfb5c9f
Compare
| @@ -0,0 +1,17 @@ | |||
| import theme, { Theme } from "@src/theme"; | |||
|
|
|||
| export function createImageSizes(breakpointWidths: Partial<Record<keyof Theme["breakpoints"], string | number>>) { | |||
There was a problem hiding this comment.
I guess this helper will never move into @comet/site (because then you can't just import from src/theme)
There was a problem hiding this comment.
As discussed in the focus meeting and with @johnnyomair the helper should only exist in the demo and the starter.
| flex: 1; | ||
| aspect-ratio: ${({ $imageAspectRatio }) => $imageAspectRatio}; |
There was a problem hiding this comment.
why is this needed? the image itself already has the aspect-ratio
There was a problem hiding this comment.
Without it there's a layout shift occurring. But there's already a task (https://vivid-planet.atlassian.net/browse/COM-1678) for it, so I removed it again.
| import styled, { css } from "styled-components"; | ||
|
|
||
| import { DamImageBlock } from "./DamImageBlock"; | ||
| import { RichTextBlock } from "./RichTextBlock"; | ||
|
|
||
| export const TextImageBlock = withPreview( | ||
| const TextImageBlock = withPreview( |
There was a problem hiding this comment.
| const TextImageBlock = withPreview( | |
| export const TextImageBlock = withPreview(e |
There was a problem hiding this comment.
At the moment the TextImageBlock is not used in any other file. Just for my understanding, why would you export it already?
There was a problem hiding this comment.
- if it is a PageContent-Only block, it should not be in common/blocks (documents/pages/blocks would be correct I assume)
- it is very likely to be used in eg. Columns block (maybe we should add it there)
There was a problem hiding this comment.
Okay, I guess adding it to the ColumnsBlock (and probably the AccordionBlock) would be a topic for another PR, right? If yes, I wouldn't change anything in the folder structure now and handle it in a second PR.
There was a problem hiding this comment.
yes, please.
(and don't remove the export in this PR)
stekalt
force-pushed
the
add-createNextImageSizes-function
branch
from
2ba9767 to
13838b5
Compare
stekalt
force-pushed
the
add-createNextImageSizes-function
branch
from
13838b5 to
f0da793
Compare
stekalt
force-pushed
the
add-createNextImageSizes-function
branch
from
f0da793 to
e684f5f
Compare
johnnyomair
added
the
needs-starter-pr
johnnyomair
changed the title
Description
The function
createImageSizesis implemented to generate thesizesattribute string for Next.js images based on the breakpoints in the project. Thesizesattribute is used by the browser to decide which image from thesrcsetto load depending on the viewport width.If not set, it defaults to100vw.Acceptance criteria
Screenshots/screencasts
Bildschirmaufnahme.2025-04-24.um.15.25.08.mov
Further information