Adding Full Width Images to the Blog
This month, I added a new post template for longer writing that has more images included. I wanted a way to add full-width images for accents and more flexibility in how the images were laid out. Josh Comeau has a great article on setting up a grid for full-bleed images. CSS grids also allow named grid lines and I'm pretty sure I saw a Kevin Powell video where he built a layout using named lines, but I can't find the link right now. I used both ideas to get my grid set up.
I added a new class to my CSS rules that looks like this:
.single-col {
display: grid;
grid-template-columns: [full-start] 1fr [wide-start] 1fr [content-start] 5fr [content-end] 1fr [wide-end] 1fr [full-end]
/* rest of the rules */
}
This gives me a five-column grid with the widest section being the post content itself. The full and wide line names will break content outside of the main column for accent images, quotes, or other fancypants things I want to do.
An example post is our trip to the Adirondak Mountains last year. The heading includes a nice, wide image at the top as a feature. The .featured class takes care of placing the image correctly:
.single-col > .featured {
grid-column: full;
}
The grid-column property is smart enough to know that it goes inside the full-start and full-end line names, stretching it across the broswer. Any other content without a specific class like .full or .wide falls within the content gridlines.
This entire blog is written in Markdown and converted to HTML with Pelican. Markdown specifies that every new line is wrapped in a paragraph tag, including images. To get full width images working, I needed one more rule and this is one of the first times the :has() selector has come in handy for me.
I wanted the full class on the image tag because that's what I'm writing. I don't wrap images in paragraphs when I'm writing my HTML. Using the :has() selector, I can write the HTML the way I want and CSS will find images with the full class in the post body and apply the rule correctly.
.single-col > p:has(img.full) {
grid-column: full;
}
I'm really happy with this result and it gives a great visual cue as to the type of writing...more magazine/travel/storytime thing rather than my shorter posts. It also makes me more intentional about taking pictures thinking ahead about the kind of writing I'll want to do. I'd like to start experimenting with more post customizations with specifc stylesheets and rules per post rather than category templates, but that'll come later.
Comments