theme: adjust aspect ratios on image comparison sliders (#110)

This commit is contained in:
Tyler Wilding
2022-04-27 00:45:20 -04:00
committed by GitHub
parent 116b32b45f
commit 899ceaed6c

View File

@@ -10,6 +10,7 @@
}
</script>
{{- partial "head.html" . -}}
<body>
<div class="d-flex flex-column min-vh-100">
{{- partial "navbar.html" . -}}
@@ -28,7 +29,16 @@
<script src="/js/vendor/vanilla-lazyload@17.5.1/lazyload.min.js"></script>
<script src="/js/vendor/cookieconsent@3.1.1/cookieconsent.min.js"></script>
<script>
const lazyLoadInstance = new LazyLoad({});
const lazyLoadInstance = new LazyLoad({
callback_loaded: (imgElem) => {
// Fix image comparison aspect-ratios, has to be done here as the image hasn't loaded yet
if ($(imgElem).parent().hasClass("img-compare-container")) {
let aspectRatio = imgElem.naturalWidth / imgElem.naturalHeight;
// jQuery does not yet support .css'ing this option, looks pretty new
$(imgElem).parent().attr("style", `aspect-ratio: ${aspectRatio};`);
}
},
});
function loadGoogleAds() {
$.getScript("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0996284081546238", () => {