Convert and resize images with Hugo's image processing (#424)

rotationalio · Nov 15, 2024 · 90dd14d · 90dd14d
1 parent b853a9f
commit 90dd14d
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 15 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -16,7 +16,8 @@ jobs:
       - name: Install Hugo
         uses: peaceiris/actions-hugo@v2
         with:
-          hugo-version: "0.113.0"
+          hugo-version: "0.138.0"
+          extended: true
 
       - name: Build Hugo Site
         env:

diff --git a/config.toml b/config.toml
@@ -6,7 +6,7 @@ title = "Rotational Labs"
 removePathAccents = true
 enableEmoji = true  # allow emojification of things like :heart:
 post_share = true   # Share button on individual posts
-paginate = "9"      # Number of posts per page in blog listing
+pagerSize = "9"      # Number of posts per page in blog listing
 summaryLength = "1" # Length of excerpt for post descriptions
 enableRobotsTXT = true
 rssLimit = 20
@@ -90,29 +90,52 @@ weight = 7
 
 [[Languages.en.menu.main]]
 name = 'AI Assessments'
-pageRef = '/ai-assessments'
+pageRef = 'AI Assessments'
 parent = 'Services'
 weight = 1
 
 [[Languages.en.menu.main]]
 name = 'AI Product Development'
-pageRef = '/ai-product-development'
+pageRef = 'AI Product Development'
 parent = 'Services'
 weight = 2
 
 [[Languages.en.menu.main]]
 name = 'AI Ops & Data Foundations'
-pageRef = '/ai-ops-and-data-foundations'
+pageRef = 'AI Ops and Data Foundations'
 parent = 'Services'
 weight = 3
 
 ## English Language
 [Languages.en]
 languageName = "En"
 languageCode = "en-us"
-contentDir = "content/en"
 weight = 1
 
+## Mounts configuration
+[module]
+  [[module.mounts]]
+    source = 'content/en'
+    target = 'content'
+  [[module.mounts]]
+    source = 'static'
+    target = 'assets'
+  [[module.mounts]]
+    source = 'layouts'
+    target = 'layouts'
+  [[module.mounts]]
+    source = 'data'
+    target = 'data'
+  [[module.mounts]]
+    source = 'assets'
+    target = 'assets'
+  [[module.mounts]]
+    source = 'i18n'
+    target = 'i18n'
+  [[module.mounts]]
+    source = 'archetypes'
+    target = 'archetypes'
+
 [Languages.en.params]
 home = "Home"
 copyright = "Copyright &copy; Rotational Labs, Inc. 2021&ndash;{year} &middot; All Rights Reserved"

diff --git a/layouts/_default/article.html b/layouts/_default/article.html
@@ -1,6 +1,12 @@
 <div class="flex flex-col h-full">
     <a href="{{ .Permalink }}">
-        <img loading="lazy" src="{{ .Params.image }}" alt="" class="rounded-t-xl object-cover" style="height:212px;width:100%"/>
+        {{ $image := .Params.image }}
+        {{ $img := resources.Get $image }}
+        {{ $img := $img.Resize "640x" }}
+
+        {{ $webp := $img.Process "resize 640x webp q80" }}    
+        <img loading="lazy" src="{{ if ne $img.MediaType.SubType "webp" }}{{ $webp.RelPermalink }}{{ else }}{{ $img.RelPermalink }}{{ end }}" 
+              alt="" class="rounded-t-xl object-cover" style="height:212px;width:100%" />
     </a>
     <div class="px-4 pt-4">
         <ul class="flex flex-wrap">
@@ -24,15 +30,18 @@ <h3 class="text-xl font-extrabold sm:h-36">
     <div class="flex justify-between mt-auto items-center border-t px-4 py-3 h-16">
         <div class="flex items-center">
             {{ $profile := .Params.profile }}
+            {{ $profile := resources.Get $profile }}
+            {{ $profile := $profile.Process "resize 40x40 webp q80" }}
+
             {{ if eq .Params.authors 1 }}
             {{ range .Params.authors }}
             <a href="/authors/{{ . | urlize }}" class="flex items-center">
-                <img loading="lazy" src="{{ $profile }}" alt="" class="rounded-full h-10 w-10">
+                <img loading="lazy" src="{{ $profile.RelPermalink }}" alt="" class="rounded-full">
                 <span class="ml-4 font-extralight">{{ . }}</span>
             </a>
             {{ end }}
             {{ else }}
-            <img loading="lazy" src="{{ $profile }}" alt="" class="rounded-full h-10 w-10">
+            <img loading="lazy" src="{{ $profile.RelPermalink }}" alt="" class="rounded-full">
             <ul class="flex flex-wrap ml-4">
                 {{ range $key, $value := .Params.authors }}
                 <li class="font-extralight">

diff --git a/layouts/authors/list.html b/layouts/authors/list.html
@@ -19,7 +19,9 @@
         <div class="w-full md:w-1/2">
             <div class="">
                 {{ if .Params.profile }}
-                <img src="{{ .Params.profile | absURL}}" alt="" class='rounded-t-xl covatar w-full object-cover' />
+                {{ $img := resources.Get .Params.profile }}
+                {{ $img := $img.Process "webp q80" }}
+                <img src="{{ $img.RelPermalink }}" alt="" class='rounded-t-xl covatar w-full object-cover' />
                 {{ else }}
                 <img src="/img/authors-butterfly.svg" alt="" class="w-56"  />
                 {{ end }}

diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -12,8 +12,15 @@
 {{ define "main" }}
 <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
   <div class="mt-14">
+    {{ $image := .Params.image }}
+    {{ $img := resources.Get $image }}
+    {{ $img := $img.Resize "640x" }}
+
+    {{ $webp := $img.Process "resize 640x webp q80" }}
+
     <div class="blog-img">
-      <img src="{{ .Params.image | absURL }}" alt="{{ .Title }}" class="mx-auto object-cover">
+      <img src="{{ if ne $img.MediaType.SubType "webp" }} {{ $webp.RelPermalink }} {{ else }} {{ $img.RelPermalink }} {{ end }}" 
+          alt="{{ .Title }}" class="mx-auto object-cover">
     </div>
 
 

diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
@@ -27,7 +27,17 @@ <h1 class="font-extrabold text-3xl md:text-5xl *:block">{{ . | markdownify }}</h
                   {{ end }}
               </div>
               <div class="mx-auto">
-                <img src="img/vertical-logo.png" alt="Rotational Labs logo" class="mt-4 sm:mt-[4.5rem] h-16 sm:h-40 md:h-64 w-auto">
+                <picture>
+                    {{ $logo := resources.Get "img/vertical-logo.png" }}
+                    {{ $logo := $logo.Process "webp q80" }}
+
+                    {{ $tiny := $logo.Resize "x64" }}
+                    {{ $small := $logo.Resize "x160" }}
+                    {{ $medium := $logo.Resize "x256" }}
+                    <source srcset="{{ $medium.RelPermalink }}" media="(min-width: 768px)">
+                    <source srcset="{{ $small.RelPermalink }}" media="(min-width: 640px)">
+                    <img src="{{ $tiny.RelPermalink }}" alt="Rotational Labs logo" class="mt-4 sm:mt-[4.5rem] w-auto">
+                </picture>
               </div>
           </div>
         </div>
@@ -111,7 +121,15 @@ <h1 class="font-bold text-3xl uppercase lg:text-5xl">{{ .Title }}</h1>
                 {{ end }}
             </div>
             <div class="md:mx-auto">
-                <img src="img/vertical-logo.png" alt="Rotational Labs logo" class="sm:mt-4 md:mt-16 h-16 sm:h-40 w-auto">
+                <picture>
+                    {{ $logo := resources.Get "img/vertical-logo.png" }}
+                    {{ $logo := $logo.Process "webp q80" }}
+
+                    {{ $tiny := $logo.Resize "x64" }}
+                    {{ $small := $logo.Resize "x160" }}
+                    <source srcset="{{ $small.RelPermalink }}" media="(min-width: 640px)">
+                    <img src="{{ $tiny.RelPermalink }}" alt="Rotational Labs logo" class="sm:mt-4 md:mt-16 w-auto">
+                </picture>
             </div>
         </div>
     </div>

diff --git a/layouts/partials/site-nav.html b/layouts/partials/site-nav.html
@@ -1,7 +1,9 @@
 <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 py-5" aria-label="Global">
     <div class="relative max-w-7xl w-full flex flex-wrap lg:flex-nowrap items-center justify-between mx-auto">
         <a href="/">
-            <img src="img/rototational-white-text-only.png" alt="Rotational" class="h-6 w-auto">
+            {{ $img := resources.Get "img/rototational-white-text-only.png" }}
+            {{ $img := $img.Process "resize x24 webp q80" }}
+            <img src="{{ $img.RelPermalink }}" alt="Rotational" class="h-6 w-auto">
         </a>
         <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-dropdown" aria-expanded="false">
             <span class="sr-only">Open main menu</span>

diff --git a/layouts/partials/team.html b/layouts/partials/team.html
@@ -18,7 +18,11 @@ <h3 class="py-2 text-2xl md:text-4xl font-extrabold">{{ with .title }} {{ . }} {
                     {{"<!-- team member -->" | safeHTML}}
                     <a href="{{.bioLink}}">
                         <li class="mt-6 sm:mt-0 bg-[#ECF6FF] rounded-xl h-full">
-                            <img src="{{ .image | absURL }}" alt="{{ .name }}" class="rounded-t-xl covatar">
+                            {{ $img := resources.Get .image }}
+                            {{ $img := $img.Resize "x430" }}
+                            {{ $webp := $img.Process "resize x430 webp q80"}}
+                            <img loading="lazy" src="{{ if ne $img.MediaType.SubType "webp" }}{{ $webp.RelPermalink }}{{ else }}{{ $img.RelPermalink }}{{ end }}" 
+                                 alt="{{ .name }}" class="rounded-t-xl covatar">
                             <div class="">
                                 <div class="px-6 pt-8 pb-5">
                                     <h4 class="text-base font-bold text-[#1D65A6]">{{ .designation | markdownify}}</h4>

diff --git a/static/img/humans-and-ai-together.webp b/static/img/humans-and-ai-together.webp
diff --git a/static/img/security_and_privacy.webp b/static/img/security_and_privacy.webp