After migrating the blog from Hugo Even theme to the Astro-based Slate theme, the existing multi-image layout functionality needed re-adaptation due to the new theme’s different HTML structure.
In the Hugo Even theme, Markdown images are rendered as <a> tags wrapped in <p> tags, while the Slate theme uses <div class="rehype-figure-container"> wrapping <figure class="rehype-figure"> elements.
/* Two-image columns */.rehype-figure-container:has(> .rehype-figure:nth-child(2)) { column-count: 2; column-gap: 8px; margin: 6px 0;}
/* Three-image columns */.rehype-figure-container:has(> .rehype-figure:nth-child(3)) { column-count: 3; column-gap: 8px; margin: 6px 0;}
/* Four-image columns */.rehype-figure-container:has(> .rehype-figure:nth-child(4)) { column-count: 4; column-gap: 8px; margin: 6px 0;}
/* Five-image columns */.rehype-figure-container:has(> .rehype-figure:nth-child(5)) { column-count: 5; column-gap: 8px; margin: 6px 0;}
/* Six-image columns */.rehype-figure-container:has(> .rehype-figure:nth-child(6)) { column-count: 4; column-gap: 8px; margin: 6px 0;}
/* Image display handling */.rehype-figure-container:has(> .rehype-figure:nth-child(2)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(3)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(4)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(5)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(6)) .rehype-figure { display: block; margin-bottom: 8px; break-inside: avoid;}
.rehype-figure-container:has(> .rehype-figure:nth-child(2)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(3)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(4)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(5)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(6)) img { width: 100%; height: auto; display: block; margin: 0;}
/* Responsive design */@media (max-width: 768px) { .rehype-figure-container:has(> .rehype-figure:nth-child(2)), .rehype-figure-container:has(> .rehype-figure:nth-child(3)), .rehype-figure-container:has(> .rehype-figure:nth-child(4)), .rehype-figure-container:has(> .rehype-figure:nth-child(5)), .rehype-figure-container:has(> .rehype-figure:nth-child(6)) { column-count: 1; column-gap: 0; }}Usage rules remain the same as the Hugo Even theme. Images can have line breaks between them but not blank lines — CSS automatically adjusts column count based on the number of images in the container. Supports automatic 2-6 image columns.
Four-image demo:
For more image demos, see Hugo Multi-Image Layout for the Even Theme.
Add the CSS above to the Slate theme’s style file. The exact location may vary by theme configuration — typically src/assets/style/common.css, or create a new style file and import it in the theme config.