feat: add responsive image support by CaiJimmy · Pull Request #1283 · CaiJimmy/hugo-theme-stack

CaiJimmy · 2026-03-04T18:36:30Z

No description provided.

cloudflare-workers-and-pages · 2026-03-04T18:37:10Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hugo-theme-stack	`6b37520`	Commit Preview URL Branch Preview URL	Mar 04 2026, 10:05 PM

…w partial and configure image processing widths.

…zes` attributes for improved display.

Copilot

Pull request overview

This PR introduces two new reusable Hugo partial helpers — helper/responsive-image (for width-based srcset) and helper/thumbnail-image (for 1x/2x DPR-based srcset) — and wires them up across article header, article list tiles, compact article lists, and the Markdown image render hook. It also restructures the imageProcessing config to add a new thumbnail sub-section (and removes the old cover sub-section), removes hard-coded width/height CSS from tile article containers, and fixes the tile article to use the correct 150px height value.

Changes:

Two new image helper partials (helper/responsive-image and helper/thumbnail-image) that generate <img> elements with srcset for responsive images
Existing templates (render-image.html, header.html, tile.html, compact.html) migrated to use the new helpers
config/_default/params.toml restructured to add imageProcessing.thumbnail sub-section (removing imageProcessing.cover) and add widths to imageProcessing.content

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`layouts/_partials/helper/responsive-image.html`	New helper: generates `<img>` with width-descriptor `srcset`
`layouts/_partials/helper/thumbnail-image.html`	New helper: generates `<img>` with 1x/2x pixel-density `srcset`
`layouts/_partials/article/components/header.html`	Uses `responsive-image` for article header image
`layouts/_partials/article-list/tile.html`	Uses `thumbnail-image` for tile list article images
`layouts/_partials/article-list/compact.html`	Uses `thumbnail-image` for compact list article images
`layouts/_markup/render-image.html`	Uses `responsive-image` for Markdown-rendered images
`config/_default/params.toml`	Adds `imageProcessing.thumbnail` section, `content.widths`, removes `cover`
`assets/scss/partials/article.scss`	Corrects tile article height from `350px` to `150px`
`assets/scss/partials/layout/article.scss`	Removes hard-coded `width`/`height` from related-content article
`assets/scss/partials/layout/list.scss`	Removes hard-coded `width`/`height` from subsection tile article

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T21:31:47Z

+    "Attributes" (merge $attributes (dict 
+        "src" $image.Permalink
+        "width" $image.Width
+        "height" $image.Height
+        "alt" $alt
+        "title" $title
+        "class" (cond $galleryImage "gallery-image" "")
+        "loading" "lazy"
+        "sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
+    ))


The data-title-escaped attribute is no longer rendered on gallery images in the new responsive-image helper, but gallery.ts still reads this attribute (lines 77–78) to populate figcaptions via innerHTML. Without it, the gallery caption falls back to the alt attribute text instead of the (possibly markdown-formatted) image title.

In the old code, the data-title-escaped attribute held the HTML-entity-escaped version of the markdownified title, which was required for safe assignment to innerHTML in JS. Now that neither data-title-escaped nor any equivalent attribute is emitted, any image with a title in Markdown (e.g. ![alt](url "title")) will silently lose its gallery caption.

The fix would be to include a "data-title-escaped" key in the attributes dict passed to responsive-image, set to the HTML-escaped form of $title when $title is non-empty.

Copilot · 2026-03-04T21:31:48Z

+{{- $resource := .Resource -}}
+{{- $width := .Width -}}
+{{- $height := .Height -}}
+{{- $resize := .Resize | default true -}}


In thumbnail-image.html, the Resize parameter is defaulted using | default true. In Hugo's template engine, default treats any falsy value (including the boolean false) as "missing" and substitutes the default. This means that when a caller explicitly passes "Resize" false (e.g. when imageProcessing.thumbnail.enabled = false in the config), the condition will still evaluate to true, making image processing run unconditionally regardless of the user's configuration.

The correct pattern used elsewhere in this codebase (e.g. mermaid.html line 30) is (not (eq (.Resize | default true) false)), or more directly, to check for nil explicitly (e.g., {{ $resize := .Resize }}{{ if eq $resize nil }}{{ $resize = true }}{{ end }}).

Suggested change

{{- $resize := .Resize | default true -}}

{{- $resize := .Resize -}}

{{- if eq $resize nil }}{{ $resize = true }}{{ end -}}

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…size is not enabled

Copilot

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T21:59:44Z

+    {{- end -}}
+
+    {{- if gt (len $srcset) 0 -}}
+        {{- $permalink := default $resource.RelPermalink (index $attributes "src") -}}


The srcset entries from resized images use RelPermalink (relative paths), but the final "full resolution" entry at line 24 uses $permalink, which comes from (index $attributes "src"). When the caller passes an absolute URL as src (e.g., for a remote image), this results in a srcset that mixes relative paths for the resized variants with an absolute URL for the full-resolution entry. While modern browsers can handle this, the inconsistency can cause unexpected behavior. The $permalink could be normalized to $resource.RelPermalink when the resource exists and has been processed from a remote URL (i.e., the locally cached version's relative path), or at least kept consistent in type with the other entries.

Suggested change

{{- $permalink := default $resource.RelPermalink (index $attributes "src") -}}

{{- $permalink := $resource.RelPermalink -}}

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

This reverts commit 22edce9.

CaiJimmy added 2 commits March 4, 2026 13:29

feat: create responsive-image helper

1f5ec88

feat: new responsive-image helper

b222466

CaiJimmy changed the title ~~feat: responsive image~~ feat: responsive image helper Mar 4, 2026

CaiJimmy mentioned this pull request Mar 4, 2026

Photoswipe: High resolution image always loaded even though a smaller images exist #939

Closed

CaiJimmy added 8 commits March 4, 2026 19:50

feat: Implement responsive image rendering in page content using a ne…

218f8da

…w partial and configure image processing widths.

feat: add sizes attribute for enhanced image responsiveness

8bee046

feat: add responsive image to page header too

16df4ff

Check for .Enabled before processing image

fc65337

style: remove wrong article-list--tile width and height

542b829

feat: add helper/thumbnail-image for responsive thumbnails

8e0b538

feat: enable content image processing and update responsive image `si…

9c8c2df

…zes` attributes for improved display.

fix: get src from the attributes so external image can work correctly

ce2d59c

CaiJimmy requested a review from Copilot March 4, 2026 21:26

Copilot started reviewing on behalf of CaiJimmy March 4, 2026 21:27 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

CaiJimmy and others added 3 commits March 4, 2026 22:38

fix: add missing data-title-escaped

9cb6ef4

Update layouts/_partials/article/components/header.html

b35add5

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

feat: remove default true for thumbnail resize parameter.

331f16f

CaiJimmy requested a review from Copilot March 4, 2026 21:41

Copilot started reviewing on behalf of CaiJimmy March 4, 2026 21:42 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

Comment thread layouts/_markup/render-image.html Outdated

Comment thread layouts/_partials/helper/thumbnail-image.html Outdated

CaiJimmy and others added 3 commits March 4, 2026 22:48

Update layouts/_markup/render-image.html

c8354ae

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update layouts/_partials/helper/thumbnail-image.html

9e2d807

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

add original width and height to thumbnail pictures, for case that re…

2bed4cb

…size is not enabled

CaiJimmy requested a review from Copilot March 4, 2026 21:52

Copilot started reviewing on behalf of CaiJimmy March 4, 2026 21:53 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

Update layouts/_partials/helper/thumbnail-image.html

6b37520

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

CaiJimmy changed the title ~~feat: responsive image helper~~ feat: add responsive image support Mar 4, 2026

CaiJimmy merged commit 22edce9 into master Mar 4, 2026
1 check passed

CaiJimmy deleted the responsive-image branch March 4, 2026 22:32

jin-li added a commit to jin-li/hugo-theme-stack that referenced this pull request Mar 5, 2026

Revert "feat: add responsive image support (CaiJimmy#1283)"

dadb911

This reverts commit 22edce9.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add responsive image support#1283

feat: add responsive image support#1283
CaiJimmy merged 17 commits into
masterfrom
responsive-image

CaiJimmy commented Mar 4, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{{- $resize := .Resize \| default true -}}
	{{- $resize := .Resize -}}
	{{- if eq $resize nil }}{{ $resize = true }}{{ end -}}

	{{- $permalink := default $resource.RelPermalink (index $attributes "src") -}}
	{{- $permalink := $resource.RelPermalink -}}

Uh oh!

Conversation

CaiJimmy commented Mar 4, 2026

Uh oh!

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

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages Bot commented Mar 4, 2026 •

edited

Loading