update images to new webp mixin

euryalus · Jun 1, 2017 · e38ad6f · e38ad6f
1 parent c97ca98
commit e38ad6f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/templates/blog.jade b/templates/blog.jade
@@ -37,14 +37,15 @@ block main
 
     div.Site-content-container
 
-      include includes/blog_webp
+      include includes/webp-img
 
       div.Grid.Grid--1of2.Grid--gutters-lg
         each article, i in articles.slice(1)
 
           - var img_thumb = article.metadata.featured_img_thumb
           - var img_src = (img_thumb ? img_thumb : "https://placehold.it/800x600")
 
+
             div.Grid-cell
 
               if article.metadata.tag
@@ -56,10 +57,9 @@ block main
                         div.Caption-tag= article.metadata.tag.caption
 
               else
+
                 a(href=article.url)
-                  //- 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
+                  +webp-img(img_thumb, article.title, article.title, "height:30vh;", "object-fit:contain;height:30vh;padding-bottom:3em;")
 
               a(href=article.url)
                 h2.Blog-article-title= article.title

diff --git a/templates/home.jade b/templates/home.jade
@@ -23,7 +23,7 @@ block main
         h1.Background-img-caption Open source eye tracking.
         //- h2.Background-img--caption-h2 
 
-    include includes/imgSize
+    include includes/webp-img
     //- pupil intro row
     div(id="content-top" class="Site-content-container")
       div.Feature-container-column
@@ -40,7 +40,7 @@ block main
                 p All hardware is designed, developed, and assembled in our Berlin office and ships worldwide. Check out products on our #[a(href="/store" title="Pupil Labs store") store]. 
               div.Grid-cell
                 figure.Feature-figure.u-padBottom--1
-                  +picture("/media/images/home/platform/eye_debug_01_opaque.png", "Binocular 3D gaze mapper", "Binocular 3D gaze mapper")
+                  +webp-img("/media/images/home/platform/eye_debug_01_opaque.png", "Binocular 3D gaze mapper", "Binocular 3D gaze mapper")
 
     //- oss motivation row
     div.Site-gray-bkg

diff --git a/templates/pupil.jade b/templates/pupil.jade
@@ -164,7 +164,8 @@ block main
               h4 Navigate to the #[a(href='/store#pupil' title='Pupil Store - pupil configurator') store] to check all configurations,  technical specs, and download sample videos.
 
 
-      include includes/imgSize
+      include includes/webp-img
+
     //- open source
     div.Site-gray-bkg
       div.Site-content-container
@@ -181,7 +182,7 @@ block main
           div.Grid-cell
             div.Feature
               figure.Feature-figure
-                +picture("/media/images/pupil_page/web/pupil_source_code.png", "Pupil Plugin screenshot" , "Pupil Plugin screenshot")
+                +webp-img("/media/images/pupil_page/web/pupil_source_code.png", "Pupil Plugin screenshot" , "Pupil Plugin screenshot")
 
     //- design
     div.Site-content-container
@@ -197,7 +198,7 @@ block main
           div.Grid-cell
             div.Feature
               figure.Feature-figure
-                +picture("/media/images/pupil_page/web/frame_flex.jpg", "Pupil Headset" , "Pupil Headset")
+                +webp-img("/media/images/pupil_page/web/frame_flex.jpg", "Pupil Headset" , "Pupil Headset")
 
     //- Modular & Hackable
     div.Site-gray-bkg    
@@ -209,7 +210,7 @@ block main
             div.Feature
               figure.Feature-figure
                 figure.Feature-figure
-                  +picture("/media/images/pupil_page/web/dev_explo_transp.png", "DIY Pupil Headset" , "DIY Pupil Headset")
+                  +webp-img("/media/images/pupil_page/web/dev_explo_transp.png", "DIY Pupil Headset" , "DIY Pupil Headset")
 
           div.Grid-cell
             div.Feature

diff --git a/templates/vr-ar.jade b/templates/vr-ar.jade
@@ -41,7 +41,8 @@ block main
               p You can use the VR or AR hardware you already own, and augment it with our tool-free, drop-in eye tracking hardware. 
               p You can use our software platform, or roll your own. With our open source software and direct access to the raw eye video feeds you are never locked into a platform.
 
-    include includes/imgSize
+    include includes/webp-img
+
     //- additional products
     section.Site-content-container
       div.Feature-container-column
@@ -54,14 +55,14 @@ block main
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  +picture("/media/images/store_vr_ar/htcviveb.png", 
+                  +webp-img("/media/images/store_vr_ar/htcviveb.png", 
                   "HTC Vive Binocular Add-on", 
                   "HTC Vive Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store HTC Vive Binocular Add-on") HTC Vive Binocular Add-on]
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  +picture("/media/images/store_vr_ar/addon_hololens.jpg", 
+                  +webp-img("/media/images/store_vr_ar/addon_hololens.jpg", 
                   "Microsoft Hololens Binocular Add-on", 
                   "Microsoft Hololens Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store Microsoft Hololens Binocular Add-on") Microsoft Hololens Binocular Add-on]
@@ -70,14 +71,14 @@ block main
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  +picture("/media/images/store_vr_ar/addon_epson_bt300b.jpg", 
+                  +webp-img("/media/images/store_vr_ar/addon_epson_bt300b.jpg", 
                   "Epson BT-300 Add-on", 
                   "Epson BT-300 Add-on")
                   p #[a(href="/store#vr-ar" title="Pupil Labs Store Epson BT-300 add-on") Epson BT-300 Add-on]
               div.Grid-cell
                 div.Feature
                 figure.Feature-figure
-                  +picture("/media/images/store_vr_ar/oculusdk2m.png", 
+                  +webp-img("/media/images/store_vr_ar/oculusdk2m.png", 
                   "Oculus Rift DK2 Binocular Add-on", 
                   "Oculus Rift DK2 Binocular Add-on")
                   p #[a(href="/store#vr-ar" title="Oculus Rift DK2 Binocular Add-on") Oculus Rift DK2 Binocular Add-on]