I’ve always loved photography. It’s rare that I take a really good photo though, but for when I do, I want to share it. I like Instagram and all that, but sometimes I want to share a photo that isn’t square and locked at a tiny resolution of 612px. So, this weekend, I decided to add a photo layout to this blog.
The idea is basically to let images grow outside the bounds of the main wrapper element, which centres everything else. It’s a common technique and layout.
Note: The styles below are directly lifted from this blog, so you may need to change some things to make them work for your blog.
Ghost has always has tags, so I use those. For a photo post, I add the tag of
Photo, depending on how many images there are.
post.hbs file, make sure the wrapper still has the tags helper.
That results in this.
I should add here that images are wrapped in
tags, which means slightly more verbose CSS.
So what’s going on here? Let’s use the 1400px media wuery as an example.
When the screen is at least 1400px wide, make the image 1300px wide, then pull it left 300px.
Because the wrapper of this site is 700px, the image is an extra 600px wider than the wrapper, so to make it central, we pull it left. For smaller screens, the image is less wide, so we pull it left a smaller amount.
Here’s a visual explanation, and an example!