How To Fix Image Galleries in Older Themes

Themes
1

As I revive and build upon some older themes I often want to fix the appearance of the image gallery to be more responsive, as it appears in the Casper theme.

fixed-gallery-example
fixed-gallery-example1035×860 183 KB

To do this, I add the following CSS to the Site Header Code Injection:

<style>
.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;
}
</style>

I also add this Javascript in the Site Footer Code Injection:

<script>
!(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);
</script>