Skip to content

Responsive Image Handling in Carousel & Gallery Shortcode #2786

@richtefee

Description

@richtefee

Issue Check

  • I have checked existing Issues and I feel this feature request has not been raised

Is your feature request related to a problem?

If I understand the current implementation correctly, both the carousel and gallery shortcodes output images using their original file size without Hugo resizing or compression.
This is suboptimal for image heavy websites, especially on low-bandwidth connection or limited data plans.

It might therefore be beneficial to consider adding optional responsive image processing to both shortcodes.

Describe the solution you'd like

From quick and dirty testing using Hugo image processing, for example:

{{ $small := $imgResource.Resize "400x" }}
{{ $large := $imgResource.Resize "1200x" }}
<img
src="{{ $large.RelPermalink }}"
srcset="{{ $small.RelPermalink }} 400w,
{{ $large.RelPermalink }} 1200w"
sizes="(max-width: 600px) 100vw, 1200px"

it appears that generating resized variants significantly reduces file size and improves loading performance.

Describe the alternatives you've considered

No response

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions