Make images wider than text

I am trying to make the text on pages less wide than images, but I can’t figure out how to hack this into existence.

For example, you’ll observe that the text at http://localhost:1313/2019/09/exhibition-review-lawn/ (code at is just as wide as the images.

The issue is that Hugo (or more properly, its markdown renderer) is rendering text directly in <p> tags, and rendering images also in <p> tags. There’s therefore no way (that I can tell) to write CSS to make the text less wide without also making image less wide.

I could have some JS that runs onload and looks for <p> tags which only contain images and does something funny with them, but I’d like to avoid that if possible!

Is there a Right Way to accomplish this?

I don’t think the limitation is from Hugo, but rather the theme layout.

The Simplicity theme uses an {{< image >}} shortcode to achieve this. I recommend looking at the code to see how it achieves this.

Thanks for the reply!

Do you have an example of a demo page which achieves this? I looked through the Simplicity demo and I can’t find one.

For example the source code for this page has the same HTML structure as above, and the text is just as wide as the image. I don’t think one could do something different except with JS, although who knows.

The one I noticed was where it had full=true. The image itself is broken on that page, but in safari you I can see the placeholder is full width.

This has nothing to do with Hugo and everything to do with the CSS in your theme.

This is the relevant CSS in the The Simplicity theme: