feat: adds datocms astro image by JopMolenaar · Pull Request #355 · voorhoede/head-start

JopMolenaar · 2026-04-24T09:36:58Z

Changes

Adds datocms astro image for rendering responsive images

Associated issue

Resolves #356

How to test

Open preview link
Navigate to a page that uses an image
Try resizing the screen and refresh to see the resized image
Compare with what we had. New version uses DPR to scale images istead of setting scrSets in a function we made.
Is it loading well?
What if an image fails, does it show the correct fallback

Test broken image

Go to image block demo
Open dev tools -> Go to Network tab -> Select the Img filter
Right mouse click on the image url -> hover over Block requests -> Click Block request URL.
Refresh
Image should not load. Background should be light gray with a message.
Don't forget to unblock the URL afterwards ;)

Checklist

I have performed a self-review of my own code
I have made sure that my PR is easy to review (not too big, includes comments)
I have made updated relevant documentation files (in project README, docs/, etc)
I have added a decision log entry if the change affects the architecture or changes a significant technology
I have notified a reviewer

cloudflare-workers-and-pages · 2026-04-24T09:42:55Z

Deploying head-start with Cloudflare Pages

Latest commit:	`bb48fde`
Status:	🚫 Build failed.

View logs

slimluccii · 2026-05-19T12:55:19Z

+import type { ImageBlockFragment } from '~/lib/datocms/types';
 import { t } from '~/lib/i18n';

-const defaultSizes = [1280, 960, 640, 320];


The default way is with DPR now. Do we want to set our own DPR values? Or are the DatoCMS default sufficient?

srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]

Copilot

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

slimluccii · 2026-05-19T13:35:21Z

-};
+type Props = HTMLAttributes<'figure'> & {
+  image: ImageBlockFragment['image']
+  priority?: boolean


priority is consistant with the DatoCMS Image component. Should we keep my change or revert it to loading?

Siilwyn · 2026-05-19T14:48:22Z

    url
-    responsiveImage {
-      aspectRatio
+    responsiveImage( imgixParams: { auto: [format, compress], q: 80, fit: max, w: 1200} ) {


Where is the 1200 width coming from? Max width of the default text block layout?

Either way I don't think we want to have imgix params here but instead closer to the component, probably passed down from the text block layout?

The q: 80, fit: max, w: 1200 is set here to have more control over the biggest image. Before this change we made our own srcSet steps, but now this is done with dpr. But wiuth only dpr we have no control over the largest possible img?

I think this place for the imgix params is the most logic place? The src set breakpoints also depend on this width. So if we set w after getting the srcSets, we get other breakpoints then that we serve?

srcSets when we append all imgix variables in the imgae.astro:

<source srcset=" https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.25&auto=format%2Ccompress&q=80&w=1200&fit=max 482w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.5&auto=format%2Ccompress&q=80&w=1200&fit=max 965w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.75&auto=format%2Ccompress&q=80&w=1200&fit=max 1447w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?auto=format%2Ccompress&q=80&w=1200&fit=max 1930w" sizes="(max-width: 1930px) 100vw, 1930px">

srcSets when we set max width in the query:

<source srcset=" https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.25&w=1200&auto=format%2Ccompress&q=80&fit=max 300w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.5&w=1200&auto=format%2Ccompress&q=80&fit=max 600w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=0.75&w=1200&auto=format%2Ccompress&q=80&fit=max 900w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?w=1200&auto=format%2Ccompress&q=80&fit=max 1200w, https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?dpr=1.5&w=1200&auto=format%2Ccompress&q=80&fit=max 1800w" sizes="(max-width: 1200px) 100vw, 1200px">

- Reuse HTMLAttributes<'figure'> for forwarded props; add typed imageProps escape hatch (omits data/imgClass/priority) - Replace `loading` prop with `priority: boolean` to mirror the DatoCMS AstroImage API; vector path applies the same fetchpriority/loading pattern - Add decoding="async" to vector img path - Avoid mutating input prop: use const alt = image.alt ?? '' and forward alt into responsiveImage data - Scope CSS under .image-block, merge duplicate selectors, use define:vars for the unavailable message Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

The unavailable-message exposed via `define:vars` is consumed inside a `content` declaration, which requires a quoted string. Without quotes the declaration was invalid and the `::after` pseudo never rendered. Use JSON.stringify to produce a valid CSS string literal and handle any embedded quotes/backslashes safely. Also collapse the duplicate `.image-block__image` selector into a nested rule. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

The vector `<img>` path has no inline sizing from DatoCMS, so the `max-width: 100%` and `height: auto` rules are required to keep SVGs from overflowing their container. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Add tests for the unhappy flows around the ::after pseudo: - the --unavailable-message CSS var must be a quoted CSS string literal, otherwise `content: var(...)` is invalid and the broken image styling never renders - the alt attribute falls back to an empty string when the image alt is missing Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Replace physical properties with their logical equivalents so the styling adapts to non-horizontal writing modes: - max-width / width / height -> max-inline-size / inline-size / block-size - top / left -> inset-block-start / inset-inline-start - padding-top -> padding-block-start Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Inline the props literal (typing it as a variable triggered a `Props & Props` intersection conflict against the renderer's generic) and narrow the figure query to `HTMLElement` so `style` is available. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

@ts-expect-error

`alt: null as unknown as string` lied about the type. The intent is "CMS did not send an alt" - express that by omitting the prop and annotating the missing required field with @ts-expect-error. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

JopMolenaar self-assigned this Apr 24, 2026

jbmoelker changed the title ~~feat(): adds datocms astro image~~ feat: adds datocms astro image Apr 30, 2026

jbmoelker added 🧹 Tidy up 🤖 AI Enhancements 🧱 Common components and removed 🤖 AI Enhancements labels Apr 30, 2026

slimluccii force-pushed the feat/image-datocms-astro branch from 5fd9f58 to 44bb9f9 Compare May 19, 2026 09:41

slimluccii marked this pull request as ready for review May 19, 2026 12:48

slimluccii requested a review from jbmoelker May 19, 2026 12:54

slimluccii reviewed May 19, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 19, 2026 13:01

Copilot AI reviewed May 19, 2026

slimluccii reviewed May 19, 2026

View reviewed changes

Siilwyn reviewed May 19, 2026

View reviewed changes

JopMolenaar force-pushed the feat/image-datocms-astro branch from af4b8df to 95e7997 Compare June 3, 2026 09:08

JopMolenaar and others added 12 commits June 3, 2026 11:21

feat(): adds datocms astro image

0e71f5b

fix(): installs datocms/astro

c768f54

chore(): update data in test file

e38b7b0

fix(): adds right img data to text image block

6c396da

docs(ImageBlock): mention priority prop for above-fold images

e9ff4dd

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

JopMolenaar force-pushed the feat/image-datocms-astro branch from 95e7997 to e9ff4dd Compare June 3, 2026 09:24

fix(): build error fix and formatting

3c191de

JopMolenaar added 3 commits June 3, 2026 14:47

fix(): sets imgix params in image.astro

691f62b

chore(): updates test

cd76678

chore(): formats image astro

bb48fde

Navigation Menu

Uh oh!

feat: adds datocms astro image - #355

feat: adds datocms astro image#355
JopMolenaar wants to merge 16 commits into
mainfrom
feat/image-datocms-astro

JopMolenaar commented Apr 24, 2026 •

edited by slimluccii

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 24, 2026 •

edited

Loading

Uh oh!

slimluccii May 19, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

slimluccii May 19, 2026

Uh oh!

Siilwyn May 19, 2026

Uh oh!

JopMolenaar Jun 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

JopMolenaar commented Apr 24, 2026 • edited by slimluccii Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Associated issue

How to test

Test broken image

Checklist

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying head-start with Cloudflare Pages

Uh oh!

slimluccii May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

slimluccii May 19, 2026

Choose a reason for hiding this comment

Uh oh!

Siilwyn May 19, 2026

Choose a reason for hiding this comment

Uh oh!

JopMolenaar Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

JopMolenaar commented Apr 24, 2026 •

edited by slimluccii

Loading

cloudflare-workers-and-pages Bot commented Apr 24, 2026 •

edited

Loading

slimluccii May 19, 2026 •

edited

Loading