Make images wider than text

support
1

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 https://raw.githubusercontent.com/jlebar/caroline-portfolio/master/content/blog/from-blogger/Exhibition%20Review%3A%20LAWN.md) 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?

2

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.

3

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 https://themes.gohugo.io//theme/simplicity/2017/03/11/images/ 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.

4

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.

5

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: