CHANGE image handling, ADD partials to reuse structure, REFACTOR

2025-04-17 16:22:33 +02:00 · 2025-04-17 16:22:33 +02:00 · 01dcf04b8a
commit 01dcf04b8a
parent 1265491dee
36 changed files with 1181 additions and 864 deletions
--- a/layouts/partials/components/button.html
+++ b/layouts/partials/components/button.html
@ -1,7 +1,6 @@
-{{ $outlined := "outlined"}}
-<a class="{{if eq .type $outlined}} button-outlined {{else}} button-filled {{end}}" href="{{ .url }}">
+<a id="{{ .id }}" class='button {{ .type | default "filled" }}' href="{{ .url }}">
  {{ with .icon }}
    <i class="icon-{{ . }}"></i>
  {{ end }}
  {{ .text }}
-</a>
+</a>
--- a/layouts/partials/components/icon.html
+++ b/layouts/partials/components/icon.html
@ -0,0 +1,9 @@
+<!--
+type: string - default: link
+text: string (optional)
+url: string
+-->
+<a href="{{ .url }}" rel="{{ .rel }}">
+  <i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>
+  {{ if .text }} {{ .text }}{{ end }}
+</a>
--- a/layouts/partials/components/image.html
+++ b/layouts/partials/components/image.html
@ -0,0 +1,90 @@
+<!--
+id: string
+style: string - default empty
+url: string
+alt: string
+caption: string
+width: int
+height: int
+-->
+{{ $sizes := slice "320" "640" "960" "1280" }}
+{{ $mediaWidthControl := "(max-width: 360px) 320px, (max-width: 680px) 640px, (max-width: 1100px) 960px, 1280px" }}
+
+{{ $id := .id }}
+{{ $style := .style }}
+{{ $alt := .alt }}
+{{ $caption := .caption }}
+{{ $width := .width }}
+{{ $height := .height }}
+
+{{ $img := .Page.Resources.GetMatch .url }}
+{{ if not $img }}
+  {{ $img = resources.Get .url }}
+  {{ if not $img }}
+    {{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
+  {{ end }}
+{{ end }}
+
+{{ with $img }}
+  {{ $url := .RelPermalink }}
+  {{ $type := .MediaType.SubType }}
+  {{ $ext := path.Ext $url }}
+  {{ $name := path.Base (replace $url $ext "") }}
+  {{ $dir := path.Dir $url }}
+
+  {{ if eq $type "svg" }}
+    <img 
+      id="{{ $id }}"
+      class="{{ $style }}" 
+      src="{{ $url }}"
+      alt="{{ $alt }}" 
+      loading="lazy"
+      decoding="async"
+    >
+  {{ else }}
+  <picture>
+    <source 
+      type="image/avif"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
+        {{ end }}
+        {{ $url }}.avif {{ $width | default .Width }}w
+      "
+      sizes="{{ $mediaWidthControl }}"
+    />
+    <source 
+      type="image/webp"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
+        {{ end }}
+        {{ $url }}.webp {{ $width | default .Width }}w
+      "
+      sizes="{{ $mediaWidthControl }}"
+    />
+    <img 
+      id="{{ $id }}"
+      class="{{ $style }}" 
+      width="{{ $width | default .Width }}" 
+      height="{{ $height | default .Height }}"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w, 
+        {{ end }}
+        {{ $url }} {{ $width | default .Width }}w
+      "
+      src="{{ $url }}"
+      alt="{{ $alt }}" 
+      loading="lazy"
+      decoding="async"
+    >
+  </picture>
+  {{ end }}
+  {{ if $caption }}
+    <p class="caption">{{ $caption }}</p>
+  {{ end }}
+{{ end }}
+
+
+{{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}
--- a/layouts/partials/components/title.html
+++ b/layouts/partials/components/title.html
@ -0,0 +1,4 @@
+<div class="title">
+  <h1 class="content-title">{{ . }}</h1>
+  <div class="divider"></div>
+</div>
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@ -1,22 +1,19 @@
-{{- $contact := .contact }}
-{{- $content := .content }}
-{{- $id := "contact"}}
-{{if $contact.id}}
-    {{- $id = $contact.id}}
-{{else if .id}}
-    {{- $id = .id }}
+{{- $contact := .contact }} {{- $content := .content }} {{- $id := "contact"}}
+{{if $contact.id}} {{- $id = $contact.id}} {{else if .id}} {{- $id = .id }}
 {{end}}
 <div id="{{ $id }}" class="section section-highlight">
-    <div class="section-content contact">
-        <div class="contact-text">
-            <h1>{{ $contact.title }}</h1> 
-            {{ if $contact.subtitle }}
-              <h3>{{ $contact.subtitle }}</h3>
-            {{ end }}
-            <p>{{ $content }}</p>
-        </div>
-        <div class="contact-button-container">
-            <a class="contact-button" href="{{ $contact.button.url }}">{{ $contact.button.text }}</a>
-        </div>
+  <div class="section-content contact">
+    <div class="contact-text">
+      <h1>{{ $contact.title }}</h1>
+      {{ if $contact.subtitle }}
+      <h3>{{ $contact.subtitle }}</h3>
+      {{ end }}
+      <p>{{ $content }}</p>
    </div>
+    <div class="contact-button-container">
+      {{ with $contact.button }}
+        {{ partial "components/button.html" . }}
+      {{ end }}
+    </div>
+  </div>
 </div>
--- a/layouts/partials/default.html
+++ b/layouts/partials/default.html
@ -9,10 +9,7 @@
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
    <div class="section-content funding">
        {{ with $params.title }}
-        <div class="title">
-            <h1 class="content-title">{{ . }}</h1>
-            <div class="divider"></div>
-        </div>
+          {{ partial "components/title.html" . }}
        {{ end }}
        {{ .content }}
    </div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,4 +1,5 @@
 {{- $footer := .Site.Params.footer }}
+{{ if $footer.enabled }}
 {{- $social := index $footer "social" }}
 {{- $links := index $footer "links" }}
 {{ $template := resources.Get "scss/footer.scss" }}
@ -10,9 +11,11 @@
    <div class="social-media-footer">
        <span>
            {{- range $social}}
-            <a href="{{ .url }}"><i class="icon-{{ .type }}"></i></a>
+              {{ partial "components/icon.html" . }}
            {{- end }}
-            <a href="/posts/index.xml"><i class="icon-rss"></i></a>
+            {{ if $footer.rss }}
+              {{ partial "components/icon.html" (dict "type" "rss" "url" "/posts/index.xml") }}
+            {{ end }}
        </span>
    </div>
    <div>
@ -26,5 +29,6 @@
        © {{ dateFormat "2006" now }} {{ $footer.copyright }}</a>
    </div>
 </footer>
-<a class="totop hide" id="totop" href="#"><i class="icon-angle-up"></i></a>
-<script src="/js/totop.js"></script>
+{{ end }}
+{{ partial "components/button.html" (dict "id" "totop" "type" "fab hide" "url" "#" "icon" "angle-up") }}
+<script src="/js/totop.js"></script>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,44 +1,50 @@
-{{- $header     := .Site.Params.header }}
-{{- $links      := index $header "links" }}
-{{ $template := resources.Get "scss/header.scss" }}
-{{ if $template }}
-{{ $index := $template | resources.ExecuteAsTemplate "css/header.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
-<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
-{{ end }}
+{{- $header := .Site.Params.header }}
+{{- $links := index $header "links" }}
 {{ $template := resources.Get "scss/progressbar.scss" }}
 {{ if $template }}
-{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
+{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict
+"outputStyle" "compressed") | fingerprint }}
 <link rel="stylesheet" type="text/css" href="{{ $progressbar.RelPermalink }}">
 {{ end }}
 <div class="progress"></div>
+{{ if $header.enabled }}
+{{ $template := resources.Get "scss/header.scss" }}
+{{ if $template }}
+{{ $index := $template | resources.ExecuteAsTemplate "css/header.scss" . | resources.ToCSS (dict "outputStyle"
+"compressed") | fingerprint }}
+<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
+{{ end }}
 <header class="header" id="header">
-    <div class="header-container">
-        <a class="home" href="/#"><img id="logo" class="logo" src="{{ .Site.Params.logo }}" alt="Logo"></a>
-        <div class="header-items" id="header-items">
-            {{- range $links}}
-                {{ if .links }}
-                    <div class="header-item dropdown">
-                        <button class="dropbtn">{{ .text }} 
-                            <i class="icon-caret-down"></i>
-                        </button>
-                        <div class="dropdown-content">
-                            {{- range .links}}
-                                <a href="{{ .url }}">{{ .text }}</a>
-                            {{- end }}
-                        </div>
-                    </div>
-                {{ else }}
-                    <a class="header-item" href="{{ .url }}">{{ .text }}</a>
-                {{ end }}
-            {{- end }}
-            {{ if $header.button }}
-                {{- range $header.button }}
-                    {{ partial "components/button.html" . }}
-                {{- end }}
-            {{ end }}
+  <div class="header-container">
+    <a class="home" href="/#">
+      {{- partial "components/image.html" (dict "id" "logo" "style" "logo" "url" .Site.Params.logo "alt" "Logo") -}}
+    </a>
+    <div class="header-items" id="header-items">
+      {{- range $links}}
+      {{ if .links }}
+      <div class="header-item dropdown">
+        <button class="dropbtn">{{ .text }}
+          <i class="icon-caret-down"></i>
+        </button>
+        <div class="dropdown-content">
+          {{- range .links}}
+          <a href="{{ .url }}">{{ .text }}</a>
+          {{- end }}
        </div>
+      </div>
+      {{ else }}
+      <a class="header-item" href="{{ .url }}">{{ .text }}</a>
+      {{ end }}
+      {{- end }}
+      {{ if $header.button }}
+      {{- range $header.button }}
+      {{ partial "components/button.html" . }}
+      {{- end }}
+      {{ end }}
    </div>
-    <a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="unfoldHeader()">&#9776;</a>
+  </div>
+  <a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="unfoldHeader()">&#9776;</a>
 </header>
 <script src="/js/header.js"></script>
-<script src="/js/progress.js"></script>
+{{ end }}
+<script src="/js/progress.js"></script>
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@ -4,32 +4,33 @@
 {{- $odd := .odd }}
 {{- $id := "hero"}}
 {{if $hero.id}}
-    {{- $id := $hero.id}}
+{{- $id := $hero.id}}
 {{else if .id}}
-    {{- $id := .id }}
+{{- $id := .id }}
 {{end}}
 {{ $template := resources.Get "scss/hero.scss" }}
 {{ if $template }}
-{{ $index := $template | resources.ExecuteAsTemplate "css/hero.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
+{{ $index := $template | resources.ExecuteAsTemplate "css/hero.scss" . | resources.ToCSS (dict "outputStyle"
+"compressed") | fingerprint }}
 <link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
 {{ end }}
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}} row hero">
-    <div class="section-content services">
-        <div class="hero-description col-5">
-            <div class="title">
-                <h1 class="content-title">{{ $hero.title }}</h1>
-                <div class="divider"></div>
-            </div>
-            <p>{{ $content }}</p>
-            <br />
-            {{ with $hero.button }}
-                {{- range .}}
-                    {{ partial "components/button.html" . }}
-                {{- end }}
-            {{ end }}
-        </div>
-        <div class="hero-icon-container col-7">
-            <img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}">
-        </div>
+  <div class="section-content services">
+    <div class="hero-description col-5">
+      {{ with $hero.logo }}
+      {{- partial "components/image.html" (dict "type" .type "style" .style "url" .url "alt" .alt "width" .width "height" .height) -}}
+      {{ end }}
+      {{ partial "components/title.html" $hero.title }}
+      <p>{{ $content }}</p>
+      <br />
+      {{ with $hero.button }}
+      {{- range .}}
+      {{ partial "components/button.html" . }}
+      {{- end }}
+      {{ end }}
    </div>
-</div>
+    <div class="side-image col-7">
+      {{- partial "components/image.html" $hero.image -}}
+    </div>
+  </div>
+</div>
--- a/layouts/partials/links.html
+++ b/layouts/partials/links.html
@ -10,10 +10,7 @@
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
  <div class="section-content">
    {{ with $links.title }}
-      <div class="title">
-        <h1 class="content-title">{{ . }}</h1>
-        <div class="divider"></div>
-      </div>
+      {{ partial "components/title.html" . }}
    {{ end }}
    <div class="cardList">
      {{- range $links.links}}
@ -21,13 +18,14 @@
          <a href="{{ .url }}">
            <div class="cardContent">
              {{ if .image }}
-                <img class="cardImage {{ if eq .image.cover false }} noCover {{ end }}" alt="{{ .image.alt }}" src="{{ .image.url }}" />
+              {{ $style := "cardImage {{if ne .Params.image.cover }} noCover {{ end }}" }}
+                {{- partial "components/image.html" (dict "style" $style "url" .image.url "alt" .image.alt) -}}
              {{ else if .icon }}
                <div class="cardImage">
-                  <i class="icon-{{ .icon }} cardIcon"></i>
+                  <i class="icon-{{ .icon }}"></i>
                </div>
              {{ else }}
-                <img class="cardImage" alt="default image" src="{{ $defaultimage }}"  />
+                {{- partial "components/image.html" (dict "style" "cardImage" "url" $defaultimage "alt" "Placeholder") -}}
              {{ end }}
              <div class="cardTitle">{{ .title }}</div>
            </div>
@ -36,4 +34,4 @@
      {{- end}}
    </div>
  </div>
-</div>
+</div>
--- a/layouts/partials/logos.html
+++ b/layouts/partials/logos.html
@ -9,15 +9,14 @@
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
    <div class="section-content funding">
        {{ with $logos.title }}
-        <div class="title">
-            <h1 class="content-title">{{ . }}</h1>
-            <div class="divider"></div>
-        </div>
+          {{ partial "components/title.html" . }}
        {{ end }}
        <div class="funding-logos">
            {{- range $logos.logos}}
-            <a href="{{ .url }}"><img class="funding-logo" src="{{ .logo }}" alt="{{ .text }}"></a>
+            <a href="{{ .url }}">
+              {{- partial "components/image.html" (dict "style" "funding-logo" "url" .logo "alt" .text) -}}
+            </a>
            {{- end}}
        </div>
    </div>
-</div>
+</div>
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@ -1,37 +1,40 @@
 {{- $posts := .posts }}
 {{- $pages := .pages }}
-{{- $defaultimage := .defaultimage }}
-{{- $odd     := .odd }}
-{{- $id := "posts"}}
+{{- $defaultimage := .defaultimage }} 
+{{- $odd := .odd }} 
+{{- $id := "posts"}} 
 {{if $posts.id}}
-    {{- $id = $posts.id}}
-{{else if .id}}
-    {{- $id = .id }}
+  {{- $id = $posts.id}} 
+{{else if .id}} 
+  {{- $id = .id }} 
 {{end}}
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
-    <div class="section-content posts">
-        <div class="title">
-            <h1 class="content-title">{{ $posts.title }}</h1>
-            <div class="divider"></div>
-        </div>
-        <div class="cardList">
-            {{ range first 3 $pages }}
-                <div class="card">
-                    <a href="{{.Permalink}}">
-                        <div class="cardContent">
-                            {{ if .Params.image }}
-                                <img class="cardImage {{ if eq .Params.image.cover false }} noCover {{ end }}" alt="{{ .Params.image.alt }}" src="{{ .Params.image.url }}" />
-                            {{ else }}
-                                <img class="cardImage" src="{{ $defaultimage }}" alt="Defaul Image" />
-                            {{ end }}
-                            <div class="cardTitle">{{.Title}}</div>
-                            <div class="cardDescription">{{ .Summary | safeHTML | truncate 320 }}</div>
-                            <div class="cardDetail">{{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten</div>
-                        </div>
-                    </a>
-                </div>
+  <div class="section-content posts">
+    {{ partial "components/title.html" $posts.title }}
+    <div class="cardList">
+      {{ range first 3 $pages }}
+      <div class="card">
+        <a href="{{.Permalink}}">
+          <div class="cardContent">
+            {{ if .Params.image }}
+              {{ $style := "cardImage {{if ne .Params.image.cover }} noCover {{ end }}" }}
+              {{- partial "components/image.html" (dict "style" $style "url" .image.url "alt" .image.alt) -}}
+            {{ else }}
+              {{- partial "components/image.html" (dict "style" "cardImage" "url" $defaultimage "alt" "Placeholder") -}}
            {{ end }}
-        </div>
-        <div class="more-button"><a href="{{ $posts.id }}"> {{ $posts.moretext }} </a></div>
+            <div class="cardTitle">{{.Title}}</div>
+            <div class="cardDescription">
+              {{ .Summary | safeHTML | truncate 320 }}
+            </div>
+            <div class="cardDetail">
+              {{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten
+            </div>
+          </div>
+        </a>
+      </div>
+      {{ end }}
    </div>
-</div>
+    {{ partial "components/button.html" (dict "type" "text block" "url"
+    $posts.id "text" ($posts.more | default "More")) }}
+  </div>
+</div>
--- a/layouts/partials/service.html
+++ b/layouts/partials/service.html
@ -10,16 +10,13 @@
 <div id="{{$id}}" class="section {{if eq $odd 0}} section-even {{end}} row">
    <div class="section-content services">
        {{if and ($service.image) (eq $service.image.direction "left")}}
-        <div class="service-icon-container col-5">
-            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
+        <div class="side-image col-5">
+          {{- partial "components/image.html" $service.image -}}
        </div>
        {{end}}
        <div class="service-description {{if $service.image}} col-7 {{end}}">
            {{ with $service.title }}
-              <div class="title">
-                <h1 class="content-title">{{ . }}</h1>
-                <div class="divider"></div>
-              </div>
+              {{ partial "components/title.html" . }}
            {{ end }}
            <p>{{ $content }}</p>
            <br />
@ -30,8 +27,8 @@
            {{ end }}
        </div>
        {{if and ($service.image) (eq $service.image.direction "right")}}
-        <div class="service-icon-container col-5">
-            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
+        <div class="side-image col-5">
+          {{- partial "components/image.html" $service.image -}}
        </div>
        {{end}}
    </div>
--- a/layouts/partials/slider.html
+++ b/layouts/partials/slider.html
@ -23,7 +23,7 @@
    <div class="slides">
        {{- range $index, $slide := $slider.images}}
        <div class="slide">
-            <img src="{{ $slide }}" alt="{{ $index }}">
+            {{- partial "components/image.html" (dict "url" $slide "alt" $index) -}}
            {{ if gt $length 1}}
            <span class="slider-navigation-right" onclick="scrollToNextSlideNr({{$index}})">
                <i class="icon-angle-right"></i>
@ -41,4 +41,4 @@
 <script>
    window.setInterval(scrollToNextSlide, 10000)
 </script>
-{{ end }}
+{{ end }}
--- a/layouts/partials/team.html
+++ b/layouts/partials/team.html
@ -10,18 +10,15 @@
 {{end}}
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
    <div class="section-content team">
-        <div class="title">
-            <h1 class="content-title">{{ $team.title }}</h1>
-            <div class="divider"></div>
-        </div>
-        <div class="team-list">
+        {{ partial "components/title.html" $team.title }}
+        <div class="list">
            {{- range first 4 ((where $pages "Params.leaveDate" "==" nil).ByParam "startDate") }}
            <a href="{{.Permalink}}">
-                <div class="teammember">
+                <div class="member">
                    {{ if .Params.image }}
-                        <img class="avatar" src="{{ .Params.image }}" alt="{{ .Params.name }} Avatar">
+                        {{- partial "components/image.html" (dict "style" "avatar" "url" .Params.image "alt" .Params.name) -}}
                    {{ else }}
-                        <img class="avatar" src="{{ $defaultimage }}" alt="Default Avatar">
+                        {{- partial "components/image.html" (dict "style" "avatar" "url" $defaultimage "alt" "Placeholder") -}}
                    {{ end }}
                    <h1 class="teammember-title">{{ .Params.name }}</h1>
                    {{- range .Params.jobs }}
@ -30,17 +27,18 @@
                    <div class="social-media">
                        <span>
                            {{- range .Params.social}}
-                            <a href="{{ .url }}"><i class="icon-{{ .type }}"></i></a>
+                              {{ partial "components/icon.html" . }}
                            {{- end}}
-                            {{if .Params.mail}}
-                            <a href="mailto:{{ .Params.mail }}"><i class="icon-at"></i></a>
-                            {{end}}
+                            {{ if .Params.mail }}
+                              {{ $mailto := "mailto:{{ .Params.mail }}" }}
+                              {{ partial "components/icon.html" (dict "type" "at" "url" $mailto) }}
+                            {{ end }}
                        </span>
                    </div>
                </div>
            </a>
            {{- end }}
        </div>
-        <div class="more-button"><a href="{{ $team.id }}"> {{ $team.moretext }} </a></div>
+        {{ partial "components/button.html" (dict "type" "text block" "url" $team.id "text" ($team.more | default "More")) }}
    </div>
-</div>
+</div>