Templarian

design.develop.deploy[.drink]

Ghost CSS Formatting Images

I recently switched to using the awesome Ghost blogging platform and while styling I was stuck finding a way to format images next to each other in a grid pattern. I came up with a quick solution that looks like:

Ghost Image Columns

In my site I wanted to pull the images to the left and right 10px outside of the <p> element. This makes them standout a bit more from the text that has a 20px margin.

Ghost Grid

Using the markdown syntax ![]() place each image on their own line (up to 4 in a row) for them to resize into a neat column format. Preview an example in my Microsoft Build 2016 post.

.post p {
    position: relative;
}

.post p * {
    box-sizing: border-box;
}

/* One Image */
.post p img:first-child:nth-last-child(1) {
    width: calc(100% + 20px);
    border: 1px solid #DDD;
    margin: 5px -10px 0 -10px;
}

/* Two Images */
.post p img:first-child:nth-last-child(2),
.post p img:first-child:nth-last-child(2) ~ img {
    width: calc(50% + 4px);
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(2) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(2) ~ img {
    position: absolute;
    right: -10px;
}

/* Three Images */
.post p img:first-child:nth-last-child(3),
.post p img:first-child:nth-last-child(3) ~ img {
    width: 33.3333%;
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(3) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(3) ~ img:nth-child(2) {
    position: absolute;
    right: 33.3333%;
}
.post p img:first-child:nth-last-child(3) ~ img {
    position: absolute;
    right: -10px;
}

/* Four Images */
.post p img:first-child:nth-last-child(4),
.post p img:first-child:nth-last-child(4) ~ img {
    width: calc(25% - 3px);
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(4) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(4) ~ img:nth-child(2) {
    position: absolute;
    left: calc(25% - 4px);
}
.post p img:first-child:nth-last-child(4) ~ img:nth-child(3) {
    position: absolute;
    right: calc(25% - 4px);
}
.post p img:first-child:nth-last-child(4) ~ img {
    position: absolute;
    right: -10px;
}