Make the width of Markdown images configurable (fixed at 760px)

Open Beginner friendly
  • Is something wrong?
#3,355 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
html, hugo
Domain
content

Research direction

Read modules/blox/layouts/_markup/render-image.html lines 45-52 where the img tag's sizes and Fit size are fixed at 760. Add site param hugoblox.content.image_width defaulting to 760 and use it there, also raising the largest srcset candidate. Done means images follow the config width with existing sites unchanged.

Written by the indexing model from the issue text.

Description

Prerequisites
  • I have searched for duplicate or closed feature requests
  • I am mindful of the project scope
Proposal

Make the display width of Markdown images configurable, instead of the fixed 760px in modules/blox/layouts/_markup/render-image.html:

{{- $img_md := $img.Fit "760x760 webp" -}}
...
sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px"

For example, a site parameter that sets both the Fit size and the last sizes value, defaulting to 760 so nothing changes for existing sites:

hugoblox:
  content:
    image_width: 896

It would also help if the largest srcset candidate went up to twice that width (or the original width, whichever is smaller), so images stay sharp on high-density screens.

Motivation and context

On my blog the article column is 896px wide, so every Markdown image (mostly screenshots of profiler output and code) is 136px narrower than the text around it, and small text in the screenshots is harder to read than it needs to be.

Today the only way to change this is to copy the whole render-image.html into the site and edit two lines, then keep that copy in step with every theme update. The template also declares $max_width, $width and $height but always sets them to "", so there is no hook for this either.

Dominant language
HTML
Stars
9.8k
Forks
2.9k
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from HugoBlox/kit

All issues in HugoBlox/kit

Similar issues

More Content issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.