add mixin for lazyloading images

euryalus · May 30, 2017 · 13f653d · 13f653d
1 parent 5c752b1
commit 13f653d
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/templates/includes/imgSize.jade b/templates/includes/imgSize.jade
@@ -0,0 +1,13 @@
+mixin picture(path, title, alt)
+  - var img_size = imageSize("./contents" + path );
+  - var path_nosuffix = path.replace(/[.][a-z]{3}/,"")
+  - var width = img_size.width;
+  - var height = img_size.height;
+  - var ratio = "padding-bottom: " + (height/width)*100 + "%;";
+
+  picture(style=ratio).ratio-box.lazy-img
+    source(srcset="#{path_nosuffix}.webp" type="image/webp")
+    source(srcset="#{path_nosuffix}.png" type="image/png")
+    source(srcset="#{path_nosuffix}.jpg" type="image/jpeg")
+    img(src="#{path_nosuffix}.webp").img-small
+    img(data-src="#{path_nosuffix}.webp" title="#{title}" alt="#{alt}").img-large.lazyload