Transition to Hugo Image Processing (#173)

* Update layout to use Hugo Image Processing.

Created shortcode rimg that uses the srcset attribute to display responsive images.

* Copy Static images to assets folder.

* Add image processing to missing components + Update examples

* Fix rendering in https://themes.gohugo.io/

Co-authored-by: Emruz Hossain <emruz@appscode.com>

.gitignore

@@ -1,4 +1,5 @@
 .vscode/
 node_modules/
 .DS_Store
-.history/
+.history/
+resources/

archetypes/default.md

@@ -1,6 +1,6 @@
 ---
-hero: /assets/images/background/sunrise.jpg
+hero: /images/background/sunrise.jpg
 author:
     name: Md. Emruz Hossain
-    image: /assets/images/profile-image.jpg
+    image: /images/profile-image.jpg
 ---

assets/images/hugo-logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-width="27" aria-label="Logo" viewBox="0 0 1493 391">
+  <path fill="#ebb951" stroke="#fcd804" d="M1345.211 24.704l112.262 64.305a43 43 0 0 1 21.627 37.312v142.237a40 40 0 0 1-20.702 35.037l-120.886 66.584a42 42 0 0 1-41.216-.389l-106.242-61.155a57 57 0 0 1-28.564-49.4V138.71a64 64 0 0 1 31.172-54.939l98.01-58.564a54 54 0 0 1 54.54-.503z"/>
+  <path fill="#33ba91" stroke="#00a88a" d="M958.07 22.82l117.31 66.78a41 41 0 0 1 20.72 35.64v139.5a45 45 0 0 1-23.1 39.32L955.68 369.4a44 44 0 0 1-43.54-.41l-105.82-61.6a56 56 0 0 1-27.83-48.4V140.07a68 68 0 0 1 33.23-58.44l98.06-58.35a48 48 0 0 1 48.3-.46z"/>
+  <path fill="#0594cb" stroke="#0083c0" d="M575.26 20.97l117.23 68.9a40 40 0 0 1 19.73 34.27l.73 138.67a48 48 0 0 1-24.64 42.2l-115.13 64.11a45 45 0 0 1-44.53-.42l-105.83-61.6a55 55 0 0 1-27.33-47.53V136.52a63 63 0 0 1 29.87-53.59l99.3-61.4a49 49 0 0 1 50.6-.56z"/>
+  <path fill="#ff4088" stroke="#c9177e" d="M195.81 24.13l114.41 66.54a44 44 0 0 1 21.88 38.04v136.43a48 48 0 0 1-24.45 41.82L194.1 370.9a49 49 0 0 1-48.48-.23L41.05 310.48a53 53 0 0 1-26.56-45.93V135.08a55 55 0 0 1 26.1-46.8l102.8-63.46a51 51 0 0 1 52.42-.69z"/>
+  <path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
+</svg>

exampleSite/data/bn/sections/skills.yaml

@@ -13,38 +13,38 @@ section:
 # Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
-  icon: "/images/sections/skills/kubernetes.png"
+  logo: "/images/sections/skills/kubernetes.png"
   summary: "আমি Kubernetes এ অ্যাপ্লিকেশান পরিচালনা করতে সক্ষম । আমার  Kubernetes এ CRD এর জন্য কন্ট্রোলার লিখার অভিজ্ঞতা আছে ।"
   url: "https://kubernetes.io/"
 
 - name: Go ডেভেলপমেন্ট
-  icon: "/images/sections/skills/go.png"
+  logo: "/images/sections/skills/go.png"
   summary: "ডেভেলপমেন্টের জন্য প্রধান ভাষা হিসেবে ব্যবহার করছি। টেস্ট যোগ্য,  রক্ষণাবেক্ষণ যোগ্য কোড লিখতে সক্ষম।"
   url: "https://golang.org/"
 
 - name: ক্লাউড কম্পিউটিং
-  icon: "/images/sections/skills/cloud.png"
+  logo: "/images/sections/skills/cloud.png"
   summary: "GCP, AWS, Azure গুলোর মত বেশিরভাগ বড় বড় ক্লাউড নিয়ে কাজর অভিজ্ঞতা আছে।"
 
 - name: Docker
-  icon: "/images/sections/skills/docker.svg"
+  logo: "/images/sections/skills/docker.svg"
   summary: "বেশির ভাগ প্রোগ্রামেরই  Docker কন্টেইনার তৈরি করি। মাল্টি স্টেজ এবং মাল্টি আর্কিটেকচার কন্টেইনার নিয়ে অভিজ্ঞতা আছে।"
   url: "https://www.docker.com/"
 
 - name: Prometheus
-  icon: "/images/sections/skills/prometheus.png"
+  logo: "/images/sections/skills/prometheus.png"
   summary: "Prometheus metrics সেটআপ ও কনফিগার করতে সক্ষম। PromQL, AlertManager নিয়ে অভিজ্ঞতা আছে। Metric exporters লিখাতেও অভিজ্ঞতা আছে।"
   url: "https://prometheus.io/"
 
 - name: লিনাক্স
-  icon: "/images/sections/skills/linux.png"
+  logo: "/images/sections/skills/linux.png"
   summary: "প্রধান অপারেটিং সিস্টেম হিসেবে ব্যবহার করছি। bash/shell scripts লিখতে সক্ষম।"
 
 - name: গিট
-  icon: "/images/sections/skills/git.png"
+  logo: "/images/sections/skills/git.png"
   summary: "গিট ভিত্তিক ডেভেলপমেন্টের অভিজ্ঞতা আছে। বেশির ভাগ ক্ষেতরেই GitHub ব্যবহার করি তবে GitLab ব্যবহারেরও অভিজ্ঞতা আছে।"
   url: "https://git-scm.com/"
 
 - name: C++
-  icon: "/images/sections/skills/c++.png"
+  logo: "/images/sections/skills/c++.png"
   summary: "বেসিক C/C++ প্রোগ্রামিং জানি । প্রব্লেম সল্ভিং এবং কন্টেস্ট এর জন্য ব্যবহার করেছি।"

exampleSite/data/en/sections/skills.yaml

@@ -12,38 +12,38 @@ section:
 # Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
-  icon: "/images/sections/skills/kubernetes.png"
+  logo: "/images/sections/skills/kubernetes.png"
   summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs."
   url: "https://kubernetes.io/"
 
 - name: Go Development
-  icon: "/images/sections/skills/go.png"
+  logo: "/images/sections/skills/go.png"
   summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
   url: "https://golang.org/"
 
 - name: Cloud Computing
-  icon: "/images/sections/skills/cloud.png"
+  logo: "/images/sections/skills/cloud.png"
   summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc."
 
 - name: Docker
-  icon: "/images/sections/skills/docker.svg"
+  logo: "/images/sections/skills/docker.svg"
   summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process."
   url: "https://www.docker.com/"
 
 - name: Prometheus
-  icon: "/images/sections/skills/prometheus.png"
+  logo: "/images/sections/skills/prometheus.png"
   summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters."
   url: "https://prometheus.io/"
 
 - name: Linux
-  icon: "/images/sections/skills/linux.png"
+  logo: "/images/sections/skills/linux.png"
   summary: "Using as the main operating system. Capable of writing bash/shell scripts."
 
 - name: Git
-  icon: "/images/sections/skills/git.png"
+  logo: "/images/sections/skills/git.png"
   summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
   url: "https://git-scm.com/"
 
 - name: C++
-  icon: "/images/sections/skills/c++.png"
+  logo: "/images/sections/skills/c++.png"
   summary: "Know basic C/C++ programming. Used for contest programming and problem solving."

exampleSite/data/fr/sections/skills.yaml

@@ -13,38 +13,38 @@ section:
 # Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
-  icon: "/images/sections/skills/kubernetes.png"
+  logo: "/images/sections/skills/kubernetes.png"
   summary: "Capable de déployer, de gérer l'application sur Kubernetes. Expérimenté dans la rédaction de contrôleurs Kubernetes pour les CRD."
   url: "https://kubernetes.io/"
 
 - name: Go
-  icon: "/images/sections/skills/go.png"
+  logo: "/images/sections/skills/go.png"
   summary: "Utiliser comme langue principale pour le développement professionnel. Capable d'écrire des programmes évolutifs, testables et maintenables."
   url: "https://golang.org/"
 
 - name: Cloud Computing
-  icon: "/images/sections/skills/cloud.png"
+  logo: "/images/sections/skills/cloud.png"
   summary: "A travaillé avec la plupart des principaux nuages tels que GCP, AWS, Azure, etc."
 
 - name: Docker
-  icon: "/images/sections/skills/docker.svg"
+  logo: "/images/sections/skills/docker.svg"
   summary: "Inscrivez la plupart des programmes en tant que conteneur déchargé. Expérimenté dans le processus de construction en plusieurs étapes et en plusieurs arcs."
   url: "https://www.docker.com/"
 
 - name: Prometheus
-  icon: "/images/sections/skills/prometheus.png"
+  logo: "/images/sections/skills/prometheus.png"
   summary: "Capable d'installation, de configurer les métriques de Prometheus. Expérimenté avec PromQL, AlertManager. Expérimenté également dans la rédaction d'exportateurs de métriques."
   url: "https://prometheus.io/"
 
 - name: Linux
-  icon: "/images/sections/skills/linux.png"
+  logo: "/images/sections/skills/linux.png"
   summary: "Utilisé comme système d'exploitation principal. Capable d'écrire des scripts bash/shell."
 
 - name: Git
-  icon: "/images/sections/skills/git.png"
+  logo: "/images/sections/skills/git.png"
   summary: "Expérimenté dans le développement basé sur les GIT. Surtout, utilisez Github. Avoir également une expérience de travail avec GitLab."
   url: "https://git-scm.com/"
 
 - name: C++
-  icon: "/images/sections/skills/c++.png"
+  logo: "/images/sections/skills/c++.png"
   summary: "Connaître les bases de la programmation C/C++. Utilisé pour la programmation de concours et la résolution de problèmes."

exampleSite/data/id/sections/skills.yaml

@@ -12,38 +12,38 @@ section:
 # Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
-  icon: "/images/sections/skills/kubernetes.png"
+  logo: "/images/sections/skills/kubernetes.png"
   summary: "Mampu menerapkan, mengelola aplikasi di Kubernetes. Berpengalaman dalam menulis pengontrol Kubernetes untuk CRD."
   url: "https://kubernetes.io/"
 
 - name: Go Development
-  icon: "/images/sections/skills/go.png"
+  logo: "/images/sections/skills/go.png"
   summary: "Menggunakan sebagai bahasa utama untuk pengembangan profesional. Mampu menulis program yang dapat diskalakan, dapat diuji, dan dipelihara."
   url: "https://golang.org/"
 
 - name: Cloud Computing
-  icon: "/images/sections/skills/cloud.png"
+  logo: "/images/sections/skills/cloud.png"
   summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc."
 
 - name: Docker
-  icon: "/images/sections/skills/docker.svg"
+  logo: "/images/sections/skills/docker.svg"
   summary: "Tulis sebagian besar program sebagai kontainer docker. Berpengalaman dengan proses pembangunan multi-tahap dan multi-arch."
   url: "https://www.docker.com/"
 
 - name: Prometheus
-  icon: "/images/sections/skills/prometheus.png"
+  logo: "/images/sections/skills/prometheus.png"
   summary: "Mampu mengatur, mengkonfigurasi metrik Prometheus. Berpengalaman dengan PromQL, AlertManager. Juga, berpengalaman dengan eksportir menulis metrik."
   url: "https://prometheus.io/"
 
 - name: Linux
-  icon: "/images/sections/skills/linux.png"
+  logo: "/images/sections/skills/linux.png"
   summary: "Menggunakan sebagai sistem operasi utama. Mampu menulis skrip bash / shell."
 
 - name: Git
-  icon: "/images/sections/skills/git.png"
+  logo: "/images/sections/skills/git.png"
   summary: "Berpengalaman dengan pengembangan berbasis git. Kebanyakan, gunakan Github. Juga, miliki pengalaman bekerja dengan GitLab."
   url: "https://git-scm.com/"
 
 - name: C++
-  icon: "/images/sections/skills/c++.png"
+  logo: "/images/sections/skills/c++.png"
   summary: "Ketahui pemrograman C / C ++ dasar. Digunakan untuk pemrograman kontes dan pemecahan masalah."

exampleSite/data/it/sections/skills.yaml

@@ -12,38 +12,38 @@ section:
 # Fornisci una sintesi delle tue competenze per la sezione di sintesi.
 skills:
 - name: Kubernetes
-  icon: "/images/sections/skills/kubernetes.png"
+  logo: "/images/sections/skills/kubernetes.png"
   summary: "Capacità di distribuzione e gestione di applicazioni su Kubernetes. Esperienza nello sviluppo di controller CRD per Kubernetes."
   url: "https://kubernetes.io/"
 
 - name: Sviluppo Go
-  icon: "/images/sections/skills/go.png"
+  logo: "/images/sections/skills/go.png"
   summary: "Utilizzato come linguaggio principale per lo sviluppo professionale. Capacità di scrivere programmi scalabili, testabili e manutenibili."
   url: "https://golang.org/"
 
 - name: Cloud Computing
-  icon: "/images/sections/skills/cloud.png"
+  logo: "/images/sections/skills/cloud.png"
   summary: "Ha lavorato con la maggior parte dei principali sistemi cloud: GCP, AWS, Azure etc."
 
 - name: Docker
-  icon: "/images/sections/skills/docker.svg"
+  logo: "/images/sections/skills/docker.svg"
   summary: "Scittura di programmi come container dockerized. Esperienza con processi multi-stage e multi-arch."
   url: "https://www.docker.com/"
 
 - name: Prometheus
-  icon: "/images/sections/skills/prometheus.png"
+  logo: "/images/sections/skills/prometheus.png"
   summary: "Capacità di impostare e configurare metriche Prometheus. Esperienza con PromQL, AlertManager."
   url: "https://prometheus.io/"
 
 - name: Linux
-  icon: "/images/sections/skills/linux.png"
+  logo: "/images/sections/skills/linux.png"
   summary: "Utilizzato come principale sistema operativo. Capacità di scrivere script bash/shell."
 
 - name: Git
-  icon: "/images/sections/skills/git.png"
+  logo: "/images/sections/skills/git.png"
   summary: "Esperienza con lo sviluppo git, ed in particolare usando Github. Esperienza anche con GitLab."
   url: "https://git-scm.com/"
 
 - name: C++
-  icon: "/images/sections/skills/c++.png"
+  logo: "/images/sections/skills/c++.png"
   summary: "Conoscenza della programmazione di base C/C++, utilizzata per vari progetti di programmazione e problem solving."

layouts/404.html

@@ -7,9 +7,19 @@
 {{ end }}
 
 {{ define "content" }}
+{{/* not found image */}}
+{{ $notFoundImage := "/images/404.png" }}
+
+{{/* resize the image. don't resize svg because it is not supported */}}
+{{ $notFoundImage := resources.Get $notFoundImage}}
+{{ if and $notFoundImage (ne $notFoundImage.MediaType.SubType "svg") }}
+  {{ $notFoundImage = $notFoundImage.Resize "1500x" }}
+{{ end }}
+{{ $notFoundImage = $notFoundImage.RelPermalink}}
+
 <div class="container">
     <div class="notFound">
-        <img src="{{ "/assets/images/404.png" | relURL }}" alt="">
+        <img src="{{ $notFoundImage }}" alt="">
         <div class="message">
             <h1>404</h1>
             <h4>The page you are looking for is not there yet.</h4>

layouts/_default/single.html

@@ -35,13 +35,13 @@
   <div class="content">
     <div class="container p-0 read-area">
       <!--Hero Area-->
-      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . | relURL }});'>
+      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
       </div>
 
       <!--Content Start-->
       <div class="page-content">
         <div class="author-profile ml-auto align-self-lg-center">
-          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . | relURL }}'/>
+          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
         </div>

layouts/partials/cards/project.html

@@ -8,7 +8,13 @@
         <div>
           <div class="d-flex">
             {{ if .logo }}
-            <img class="card-img-xs" src="{{ .logo | relURL }}" alt="{{ .name }}" />
+
+            {{ $logoImage:= resources.Get .logo}}
+            {{ if $logoImage }}
+            {{ $logoImage := $logoImage.Fit "24x24" }}
+
+            <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+            {{ end }}
             {{ end }}
             <h5 class="card-title mb-0">{{ .name }}</h5>
           </div>

layouts/partials/cards/skill.html

@@ -2,8 +2,15 @@
   <a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}javascript:void(0){{ end }}">
     <div class="card">
       <div class="card-head d-flex">
-        {{ if .icon }}
+        {{ if .logo }}
-        <img class="card-img-xs" src="{{ .icon | relURL }}" alt="{{ .name }}" />
+          {{ $logoImage := resources.Get .logo }}
+
+          {{/*  svg don't support "Fit" operation   */}}
+          {{ if ne $logoImage.MediaType.SubType "svg" }}
+            {{ $logoImage := $logoImage.Fit "24x24" }}
+          {{ end }}
+
+          <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
         {{ end }}
         <h5 class="card-title">{{ .name }}</h5>
       </div>

layouts/partials/footer.html

@@ -16,6 +16,23 @@
   {{ end }}
 {{ end }}
 
+{{/*  footer logos  */}}
+{{ $themeLogo := "/images/theme-logo.png" }}
+{{ $hugoLogo := "/images/hugo-logo.svg" }}
+
+{{/* resize the logos. don't resize svg because it is not supported */}}
+{{ $themeLogo:= resources.Get $themeLogo}}
+{{ if and $themeLogo (ne $themeLogo.MediaType.SubType "svg") }}
+  {{ $themeLogo = $themeLogo.Resize "32x" }}
+{{ end }}
+{{ $themeLogo = $themeLogo.RelPermalink}}
+
+{{ $hugoLogo:= resources.Get $hugoLogo}}
+{{ if and $hugoLogo (ne $hugoLogo.MediaType.SubType "svg")}}
+  {{ $hugoLogo = $hugoLogo.Resize "32x" }}
+{{ end }}
+{{ $hugoLogo = $hugoLogo.RelPermalink}}
+
 <footer class="container-fluid text-center align-content-center footer pb-2">
   <div class="container pt-5">
     <div class="row text-left">
@@ -76,7 +93,7 @@
     <div class="row text-left">
       <div class="col-md-4">
         <a id="theme" href="https://github.com/hossainemruz/toha" target="#">
-          <img src="{{ "/assets/images/inverted-logo.png" | relURL }}">
+          <img src="{{ $themeLogo }}">
           Toha
         </a>
       </div>
@@ -84,7 +101,7 @@
       <div class="col-md-4 text-right">
         <a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
         <img
-          src="{{ "/assets/images/hugo-logo-wide.svg" | relURL }}"
+          src="{{ $hugoLogo }}"
           alt="Hugo Logo"
           height="18"
         />

layouts/partials/header.html

@@ -1,3 +1,18 @@
+{{/* default favicon */}}
+{{ $favicon := "/images/favicon.png" }}
+
+{{/* if favicon is provided in the config, then use that */}}
+{{ if site.Params.logo.favicon }}
+  {{ $favicon = site.Params.logo.favicon }}
+{{ end }}
+
+{{/* resize the favicon. don't resize svg because it is not supported */}}
+{{ $favicon := resources.Get $favicon }}
+{{ if and $favicon (ne $favicon.MediaType.SubType "svg") }}
+  {{ $favicon = $favicon.Resize "42x" }}
+{{ end }}
+{{ $favicon = $favicon.RelPermalink}}
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
@@ -13,7 +28,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
-<link rel="icon" type="image/png" href="{{ site.Params.logo.favicon | default "/assets/images/favicon.png" | relURL }}" />
+<link rel="icon" type="image/png" href="{{ $favicon }}" />
 
 <!--================= custom style overrides =========================-->
 <link rel="stylesheet" href="{{ "/assets/css/style.css" | relURL }}"/>

layouts/partials/helpers/get-author-image.html

@@ -2,11 +2,14 @@
 {{ if (index site.Data site.Language.Lang).author }}
   {{ $author = (index site.Data site.Language.Lang).author }}
 {{ end }}
-{{ $authorImage:= "/assets/images/default-avatar.png" }}
+
+{{/* default author image */}}
+{{ $authorImage:= "/images/default-avatar.png" }}
 {{ if $author.image }}
   {{ $authorImage = $author.image }}
 {{ end }}
 
+{{/* if author image is provided in author's data, then use that */}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
     {{ with .Params.author }}
         {{ if .image }}
@@ -14,4 +17,13 @@
         {{ end }}
     {{ end }}
 {{ end }}
-{{ return $authorImage }}
+
+{{/* apply image processing. don't use "Fit" in svg because its not supported */}}
+{{ $authorImage:= resources.Get $authorImage}}
+{{ if and $authorImage (ne $authorImage.MediaType.SubType "svg") }}
+  {{ $authorImage := $authorImage.Fit "120x120" }}
+{{ end }}
+
+{{/*  return the author image link  */}}
+{{ return $authorImage.RelPermalink }}
+

layouts/partials/helpers/get-hero.html

@@ -1,5 +1,19 @@
-{{ $heroImage:= "/assets/images/default-hero.jpg"}}
+{{/* check if there is any hero image in the same folder as the markdown file */}}
-{{ if  .Params.hero }}
+{{ $heroImage := .Page.Resources.GetMatch "hero.{jpg,png,svg}"}}
-    {{ $heroImage = .Params.hero }}
+{{ .Scratch.Set "heroScratch" $heroImage }}
+
+{{/* if hero image is not provided, then use the default hero image */}}
+{{ if not $heroImage }}
+  {{ $heroImage := resources.Get "images/default-hero.jpg"}}
+  {{ .Scratch.Set "heroScratch" $heroImage }}
 {{ end }}
-{{ return $heroImage }}
+
+{{ $heroImage := .Scratch.Get "heroScratch" }}
+
+{{/* resize hero image. don't resize if the image is an svg */}}
+{{ if and $heroImage (ne $heroImage.MediaType.SubType "svg") }}
+  {{ $heroImage := $heroImage.Resize "148x" }}
+{{ end }}
+
+{{/*  return the hero image  */}}
+{{ return $heroImage.RelPermalink }}

layouts/partials/navigators/navbar-2.html

@@ -1,19 +1,36 @@
-{{ $mainLogo:="/assets/images/main-logo.png" }}
+{{/* default logos  */}}
-{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+{{ $mainLogo := "/images/main-logo.png" }}
+{{ $invertedLogo := "/images/inverted-logo.png" }}
+
+{{/* if custom logo has been provided in the config file, then use them */}}
 {{ if site.Params.logo.main }}
   {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
+
 {{ if site.Params.logo.inverted }}
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
 
+{{/* resize the logos. don't resize svg because it is not supported */}}
+{{ $mainLogo := resources.Get $mainLogo}}
+{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
+  {{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ end }}
+{{ $mainLogo = $mainLogo.RelPermalink}}
+
+{{ $invertedLogo := resources.Get $invertedLogo}}
+{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg") }}
+  {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ end }}
+{{ $invertedLogo = $invertedLogo.RelPermalink}}
+
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">
       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
       <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $mainLogo | relURL }}">
+      <img src="{{ $mainLogo  }}">
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
@@ -29,6 +46,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
+  <img src="{{ $mainLogo  }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $invertedLogo  }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,5 +1,8 @@
-{{ $mainLogo:="/assets/images/main-logo.png" }}
+{{/*  default logos  */}}
-{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+{{ $mainLogo := "/images/site/main-logo.png" }}
+{{ $invertedLogo := "/images/inverted-logo.png" }}
+
+{{/*  if custom logo is used, them  */}}
 {{ if site.Params.logo.main }}
   {{ $mainLogo = site.Params.logo.main }}
 {{ end }}
@@ -7,7 +10,20 @@
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
 
-{{ $sections:= site.Data.sections }}
+{{/* resize the logos. don't resize svg because it is not supported */}}
+{{ $mainLogo := resources.Get $mainLogo}}
+{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
+  {{ $mainLogo = $mainLogo.Resize "42x" }}
+{{ end }}
+{{ $mainLogo = $mainLogo.RelPermalink}}
+
+{{ $invertedLogo := resources.Get $invertedLogo}}
+{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
+  {{ $invertedLogo = $invertedLogo.Resize "42x" }}
+{{ end }}
+{{ $invertedLogo = $invertedLogo.RelPermalink}}
+
+{{ $sections := site.Data.sections }}
 {{ if (index site.Data site.Language.Lang).sections }}
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
@@ -15,7 +31,7 @@
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $invertedLogo | relURL }}" id="logo">
+      <img src="{{ $invertedLogo }}" id="logo">
       {{- site.Title -}}
     </a>
     <button
@@ -72,6 +88,6 @@
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/sections/achievements/entry.html

@@ -1,6 +1,18 @@
-<div
+{{ $achievementImage := resources.Get .image }}
+{{ $achievementImageLg := ""}}
+{{ $achievementImageSm := ""}}
+
+{{/* resize the images. don't resize svg image because its not supported */}}
+{{ if $achievementImage }}
+  {{ $achievementImageSm = $achievementImage.Resize "x300" }}
+  {{ $achievementImageSm =  $achievementImageSm.RelPermalink }}
+  {{ $achievementImageLg = $achievementImage.Resize "x1500" }}
+  {{ $achievementImageLg =  $achievementImageLg.RelPermalink }}
+{{ end }}
+{{/*  don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
+<div 
   class="achievement-entry text-center"
-  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
+  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
@@ -8,4 +20,6 @@
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
   </div>
+  <span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
+<span  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
 </div>

layouts/partials/sections/home.html

@@ -15,23 +15,97 @@
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
-{{ $backgroundImage:= "/assets/images/default-background.jpg" }}
+{{ $backgroundImage:= "/images/default-background.jpg" }}
 {{ if site.Params.background }}
   {{ $backgroundImage = site.Params.background }}
 {{ end }}
 
-{{ $authorImage:= "/assets/images/default-avatar.png" }}
+
+{{ $authorImage:= "/images/default-avatar.png" }}
 {{ if $author.image }}
   {{ $authorImage = $author.image }}
 {{ end }}
+{{ $authorImage := resources.Get $authorImage }}
+{{ $authorImage := $authorImage.Fit "148x148" }}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := resources.Get $backgroundImage }}
+
+{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
+
+{{ $tinyw := default "500x" }}
+{{ $smallw := default "800x" }}
+{{ $mediumw := default "1200x" }}
+{{ $largew := default "1500x" }}
+
+{{/* resize the src image to the given sizes */}}
+
+{{ $tiny := $src.Resize $tinyw }}
+{{ $small := $src.Resize $smallw }}
+{{ $medium := $src.Resize $mediumw }}
+{{ $large := $src.Resize $largew }}
+
+{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
+{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
+
+{{ if lt $src.Width "500" }}
+  {{ $tiny := $src}}
+  {{ $small := $src}}
+  {{ $medium := $src}}
+  {{ $large := $src}}
+{{ end }}
+
+{{ if lt $src.Width "800" }}
+  {{ $small := $src}}
+  {{ $medium := $src}}
+  {{ $large := $src}}
+{{ end }}
+
+{{ if lt $src.Width "1200" }}
+  {{ $medium := $src}}
+  {{ $large := $src}}
+{{ end }}
+
+{{ if lt $src.Width "1500" }}
+  {{ $large := $src}}
+{{ end }}
 
 <div class="container-fluid home" id="home">
+  <style>
+    /* 0 to 299 */
+    #homePageBackgroundImageDivStyled {
+      /*background-image: url('{{ $tiny.RelPermalink }}'); This does not work on https://themes.gohugo.io/ */
+      background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}');
+    }
+    /* 300 to X */
+    @media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $small.RelPermalink }}');
+        }
+    }
+    @media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $medium.RelPermalink }}');
+        }
+    }
+    @media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $large.RelPermalink }}');
+        }
+    }
+    @media (min-width: 1501px) { /* or 301 if you want really the same as previously.  */
+      #homePageBackgroundImageDivStyled {   
+          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}');
+        }
+    }
+    </style>
+    <span class="on-the-fly-behavior"></span>
   <div
+    id="homePageBackgroundImageDivStyled"
     class="background container-fluid"
-    style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $backgroundImage | relURL }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ $authorImage | relURL }}"
+    <img src="{{ $authorImage.RelPermalink }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
     <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>

layouts/shortcodes/rimg.html

@@ -0,0 +1,53 @@
+{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := resources.GetMatch (.Get "src") }}
+
+{{ if in (.Get "src") "http" }}
+  <img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
+{{ else }}
+  {{ if in (.Get "src") ".gif" }}
+    <img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
+  {{ else }}
+    {{/* set image sizes, these are hardcoded for now */}}
+
+    {{ $tinyw := default "500x" }}
+    {{ $smallw := default "800x" }}
+    {{ $mediumw := default "1200x" }}
+    {{ $largew := default "1500x" }}
+
+    {{/* resize the src image to the given sizes */}}
+
+    {{ $tiny := $src.Resize $tinyw }}
+    {{ $small := $src.Resize $smallw }}
+    {{ $medium := $src.Resize $mediumw }}
+    {{ $large := $src.Resize $largew }}
+
+    {{/* add the processed images to the scratch */}}
+
+
+    {{/* only use images smaller than or equal to the src (original) image size */}}
+    <img
+    {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
+          srcset='
+          {{ if ge $src.Width "500" }}
+            {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
+          {{ end }}
+          {{ if ge $src.Width "800" }}
+            {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
+          {{ end }}
+          {{ if ge $src.Width "1200" }}
+            {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
+          {{ end }}
+          {{ if ge $src.Width "1500" }}
+            {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
+          {{ end }}'
+          {{ if .Get (print $medium) }}
+            src="{{ $medium.RelPermalink }}"
+          {{ else }}
+            src="{{ $src.RelPermalink }}"
+          {{ end }}
+
+          {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
+    {{ end }}
+{{ end }}

static/assets/js/home.js

@@ -329,6 +329,19 @@ var projectCards;
           this.parentElement.classList.toggle("col-lg-12");
           this.parentElement.classList.toggle("col-md-12");
           this.parentElement.classList.toggle("col-sm-12");
+          if (this.children["SmallImage"].hasAttribute("active")) {
+            let mainLogo = this.children["LargeImage"].getAttribute("Style");
+            this.children["LargeImage"].setAttribute("active",true);
+            this.children["SmallImage"].removeAttribute("active");
+
+            this.setAttribute("Style", mainLogo);
+          } else {
+            let mainLogo = this.children["SmallImage"].getAttribute("Style");
+            this.children["SmallImage"].setAttribute("active",true);
+            this.children["LargeImage"].removeAttribute("active");
+            this.setAttribute("Style", mainLogo);
+          }
+         
           if (this.children["caption"] != undefined) {
             this.children["caption"].classList.toggle("hidden");
           }