Hugo Multi-Image Layout for the Even Theme
When building a personal blog with Hugo, image layout issues are common — especially when mixing portrait and landscape images. Hugo’s default layout leaves large whitespace flanking portrait images, which looks unattractive. Additionally, Markdown doesn’t natively support side-by-side images (unless using inline HTML, which has too many issues; I tried and gave up).
I previously referenced a Hugo multi-image layout tutorial, but following it didn’t produce the expected results. Other users in the comments had similar issues, with no answer from the author.
After investigation, I found the issue: the theme wraps Markdown images in <a> tags for click-to-preview functionality, which doesn’t match the original tutorial’s CSS selectors. Here’s the adapted solution.
/* Multi-image column styles */.post-content p:has(> a:nth-child(2)) { column-count: 2; column-gap: 8px; margin: 6px 0;}.post-content p:has(> a:nth-child(3)) { column-count: 3; }.post-content p:has(> a:nth-child(4)) { column-count: 4; }.post-content p:has(> a:nth-child(5)) { column-count: 5; }.post-content p:has(> a:nth-child(6)) { column-count: 4; }
/* Image display handling */.post-content p:has(> a:nth-child(2)) a { display: block; margin-bottom: 8px; break-inside: avoid;}
/* Spacing for 6-image mode */.post-content p:has(> a:nth-child(6)) a { margin-bottom: 8px;}
/* Ensure images fill container */.post-content p a img { width: 100%; height: auto; display: block;}For the Even theme, append this code to Blog/themes/even/assets/sass/_partial/_post/_content.scss. Note that different Hugo themes may have different content file directories — adjust the path accordingly.
Usage Rules
Same as the original tutorial. Images can have line breaks between them but not blank lines — CSS automatically adjusts column count based on the number of <img> tags within a <p> element. For example:
#### More images, mixed orientations
Results
Two images
Three images
Four images
More images, mixed orientations
Column heights may vary, but this is acceptable.