update webp mixin and blog imgs to webp

euryalus · May 31, 2017 · 7bc13ef · 7bc13ef
1 parent 4530231
commit 7bc13ef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/templates/blog.jade b/templates/blog.jade
@@ -42,7 +42,8 @@ block main
       div.Grid.Grid--1of2.Grid--gutters-lg
         each article, i in articles.slice(1)
 
-          - var img_src = (article.metadata.featured_img_thumb ? article.metadata.featured_img_thumb : "https://placehold.it/800x600")
+          - var img_thumb = article.metadata.featured_img_thumb
+          - var img_src = (img_thumb ? img_thumb : "https://placehold.it/800x600")
 
             div.Grid-cell
 
@@ -56,8 +57,8 @@ block main
 
               else
                 a(href=article.url)
-                  div.Feature-image--blog-archive--wrapper.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight
-                    +picture(img_src)
+                  //- div.Feature-image--blog-archive--wrapper.Grid--center.Grid--justifyCenter.Grid-cell--fillHeight
+                  +picture(img_thumb, article.title, article.title)
                     //- div(src=img_src style="background-image: url('"+img_src+"');").Background-img--blog-archive.Background-img-contain
 
               a(href=article.url)

diff --git a/templates/includes/blog_webp.jade b/templates/includes/blog_webp.jade
@@ -1,16 +1,10 @@
 mixin picture(path, title, alt)
-  - var img_path = path.replace(/([.]{2}\/){4}/, "");
-  - var updated_path = "../../contents/"+img_path
 
-  - var img_size = imageSize( 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 + "%;";
+  - var path_nosuffix = path.replace(/[.][a-z]{3}/, "");
 
-  picture(style=ratio).ratio-box.lazy-img
+  picture(style="height:30vh;").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-webp.lazyload
+    img(src="#{path_nosuffix}.webp" style="object-fit:contain;height:30vh;padding-bottom:3em;").img-small
+    img(data-src="#{path_nosuffix}.webp" title="#{title}" alt="#{alt}" style="object-fit:contain;height:30vh;padding-bottom:3em;").img-large-webp.lazyload