Render smaller images

pindab0ter · Oct 21, 2023 · d92f0ad · d92f0ad
1 parent bcfd15c
commit d92f0ad
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 31 deletions.
diff --git a/layouts/contact/single.html b/layouts/contact/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
   <main class="bg-beige lg:py-16">
-    {{- partial "contact-form.html" (dict "showPictureMobile" true) -}}
+    {{- partial "contact-form.html" -}}
   </main>
 {{ end }}
diff --git a/layouts/faq/single.html b/layouts/faq/single.html
@@ -2,7 +2,7 @@
   <main>
     <div class="bg-beige">
       <div class="mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
-        {{ with (resources.Get "photos/yuki-ginny-balcony.png").Process "webp" }}
+        {{ with (resources.Get "photos/yuki-ginny-balcony.png").Process "resize 640x webp" }}
           <img
             src="{{ .RelPermalink }}"
             alt="Yuki en Ginny op het balkon"

diff --git a/layouts/index.html b/layouts/index.html
@@ -49,7 +49,7 @@ <h1 class="mb-8 text-start">Over ons</h1>
       <div class="grid grid-cols-1 lg:grid-cols-3">
         <div
           class="bg-[position-x:40%] aspect-video bg-cover bg-right lg:aspect-square"
-          {{ with (resources.Get "photos/yuki-ginny-balcony.png").Process "webp" }}
+          {{ with (resources.Get "photos/yuki-ginny-balcony.png").Process "resize 427x webp" }}
             style="background-image: url('{{ .RelPermalink }}');
             background-position-x: 40%;"
           {{ end }}
@@ -67,7 +67,7 @@ <h1 class="mb-8 text-start">Over ons</h1>
 
         <div
           class="aspect-video bg-cover lg:aspect-square"
-          {{ with (resources.Get "photos/ginny-kitten.jpg").Process "webp" }}
+          {{ with (resources.Get "photos/ginny-kitten.jpg").Process "resize 427x webp" }}
             style="background-image: url('{{ .RelPermalink }}');"
           {{ end }}
         >
@@ -84,7 +84,7 @@ <h1 class="mb-8 text-start">Over ons</h1>
 
         <div
           class="aspect-video bg-cover bg-[center_top_50%] lg:aspect-square"
-          {{ with (resources.Get "photos/yuki-ginny-together-on-bed.jpg").Process "webp" }}
+          {{ with (resources.Get "photos/yuki-ginny-together-on-bed.jpg").Process "resize 427x webp" }}
             style="background-image: url('{{ .RelPermalink }}');"
           {{ end }}
         >

diff --git a/layouts/kittenbeleid/single.html b/layouts/kittenbeleid/single.html
@@ -2,7 +2,7 @@
   <main>
     <div class="bg-beige">
       <div class="mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
-        {{ with (resources.Get "photos/avatar-kitten-portret.jpg").Process "webp" }}
+        {{ with (resources.Get "photos/avatar-kitten-portret.jpg").Process "resize 640x webp" }}
           <img
             src="{{ .RelPermalink }}"
             alt="Jonge Ginny"

diff --git a/layouts/kittens/section.html b/layouts/kittens/section.html
@@ -39,7 +39,7 @@ <h1 class="mt-0">De kittens van Hamana</h1>
         <div class="flex flex-col">
           {{ with .Resources.Get "photo" }}
             <img
-              src="{{ (.Process "webp drawing").RelPermalink }}"
+              src="{{ (.Process "resize 512x webp drawing").RelPermalink }}"
               alt="{{ .Title }}"
               class="mx-auto mb-8 mt-16 h-full w-full object-cover lg:max-w-lg"
             />

diff --git a/layouts/nieuws/section.html b/layouts/nieuws/section.html
@@ -11,7 +11,7 @@ <h1>Nieuws</h1>
           <div class="bg-white lg:hidden">
             {{ with .Resources.Get "photo" }}
               <img
-                src="{{ (.Process "webp").RelPermalink }}"
+                src="{{ (.Process "resize 576x webp").RelPermalink }}"
                 alt="{{ .Title }}"
                 class="h-full w-full object-cover"
               />
@@ -46,7 +46,7 @@ <h2 class="text-center">
 
             {{ with .Resources.Get "photo" }}
               <img
-                src="{{ .RelPermalink }}"
+                src="{{ (.Process "resize 576x webp").RelPermalink }}"
                 alt="{{ .Title }}"
                 class="h-full w-full object-cover"
               />

diff --git a/layouts/onze-poezen/section.html b/layouts/onze-poezen/section.html
@@ -2,7 +2,7 @@
   <main class="bg-beige lg:pb-16">
     <div class="flex aspect-square h-48 w-full text-white lg:aspect-auto">
       <div class="absolute aspect-auto h-48 w-full">
-        {{ with (resources.Get "photos/yuki-ginny-close-up.jpg").Process "webp" }}
+        {{ with (resources.Get "photos/yuki-ginny-close-up.jpg").Process "resize 1024x webp" }}
           <img
             src="{{ .RelPermalink }}"
             alt="Yuki and Ginny close up"
@@ -24,7 +24,7 @@ <h1 class="text-white">Onze poezen</h1>
       <div class="max-w-screen-xl lg:grid lg:grid-cols-2">
         {{ range sort .Paginator.Pages.Reverse }}
           <div class="lg:hidden">
-            {{ with (.Resources.Get "photo").Process "webp" }}
+            {{ with (.Resources.Get "photo").Process "resize 576x webp" }}
               <img
                 src="{{ .RelPermalink }}"
                 alt="{{ .Title }}"
@@ -43,7 +43,7 @@ <h2 class="mt-0 text-center">{{ .Title }}</h2>
 
           <div class="mx-8 mb-10 hidden h-full bg-white lg:block">
             <div>
-              {{ with (.Resources.Get "photo").Process "webp" }}
+              {{ with (.Resources.Get "photo").Process "resize 576x webp" }}
                 <img
                   src="{{ .RelPermalink }}"
                   alt="{{ .Title }}"

diff --git a/layouts/partials/contact-form.html b/layouts/partials/contact-form.html
@@ -1,25 +1,17 @@
 <div class="grid grid-cols-1 bg-white lg:grid-cols-2">
-  {{ if .showPictureMobile }}
-    {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "webp" }}
-      <div class="mb-16 mt-8 flex content-center bg-white lg:hidden">
-        <img
-          src="{{ .RelPermalink }}"
-          alt="Yuki and Ginny looking outside from the balcony together"
-          class="w-100 aspect-[16/9] object-cover"
-          style="object-position: 100% 30%"
-        />
-      </div>
-    {{ end }}
+  {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "webp" }}
+    <div class="mb-16 mt-8 flex content-center bg-white lg:hidden">
+      <img
+        src="{{ .RelPermalink }}"
+        alt="Yuki and Ginny looking outside from the balcony together"
+        class="w-100 aspect-[16/9] object-cover"
+        style="object-position: 100% 30%"
+      />
+    </div>
   {{ end }}
 
 
-  <div
-    class="{{ if (not .showPictureMobile) }}
-      py-24
-    {{ else }}
-      pb-24
-    {{ end }}lg:px-10 lg:px-20"
-  >
+  <div class=" pb-24 lg:px-10 lg:px-20">
     <h1 class="mt-0 text-center">Contact</h1>
     <div class="flex justify-center">
       <div class="mx-2 h-5 w-5">
@@ -87,7 +79,7 @@ <h1 class="mt-0 text-center">Contact</h1>
   </div>
 
   <div class="hidden content-center bg-white lg:flex">
-    {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "webp" }}
+    {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "resize 640x fit webp" }}
       <img
         src="{{ .RelPermalink }}"
         alt="Yuki and Ginny looking outside from the balcony together"