Fix Image Galleries Layout
Galleries and their images sometimes don't layout correctly in older Ghost themes. Here is a fix I use...
CSS - Put in Site Header Code Injection between <style></style> tags:
.kg-gallery-container {
position: relative;
padding: 0.75em;
}
.kg-gallery-image,
.kg-gallery-row,
img.kg-image,
.kg-embed-card {
display: flex;
}
.kg-image-card {
margin: 0 auto 20px;
width: fit-content;
width: -moz-fit-content;
}
img.kg-image {
width: auto;
margin: 0 auto;
max-width: 100%;
height: auto;
max-height: 60vh;
}
figure.kg-card.kg-gallery-card.kg-width-wide {
margin: 20px 3px;
padding: 0;
border: none;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0;
}
.kg-gallery-card + .kg-gallery-card,
.kg-gallery-card + .kg-image-card,
.kg-image-card + .kg-gallery-card {
margin-top: 0.75em;
}
.kg-gallery-card.kg-card-hascaption + .kg-gallery-card,
.kg-gallery-card.kg-card-hascaption + .kg-image-card,
.kg-image-card.kg-card-hascaption + .kg-gallery-card {
margin-top: 1.75em;
}
JS - Put in Site Footer Code Injection between <script></script> tags:
!function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),a=e.attributes.width.value/e.attributes.height.value;t.style.flex=a+" 1 0%"})})}(window,document);