webp instead of svg for og:images

content/de/work/adapt.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ ADAPT"
 summary = "We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere. "
 date = "2022-01-24 12:00:00 +0200"
-images = ["adapt"]
+images = ["img/work/adapt.webp", "adapt"]
 tags = []
 categories = ["Branding", "Web Development", "Illustrations"]
 [links]

content/de/work/asciidoc.md

@@ -8,7 +8,7 @@ text = "#194954"
 title = "AsciiDoc"
 summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
 date = "2022-08-15 12:00:00 +0200"
-images = ["asciidoc"]
+images = ["img/work/asciidoc.webp", "asciidoc"]
 tags = []
 categories = ["Branding", "Interaction Design", "Layout Design"]
 [links]

content/de/work/calyxos.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "CalyxOS"
 summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
 date = "2022-03-24 12:00:00 +0200"
-images = ["calyxos"]
+images = ["img/work/calyxos.webp", "calyxos"]
 tags = []
 categories = ["Illustrations", "UX Research", "Accessibility"]
 [links]

content/de/work/censoredplanet.md

@@ -8,7 +8,7 @@ accent = "#000000"
 title = "Censored Planet"
 summary = "We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways."
 date = "2022-03-25 12:00:00 +0200"
-images = ["censoredplanet"]
+images = ["img/work/censoredplanet.webp", "censoredplanet"]
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/de/work/demoweek.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "PrototypeFund - Virtual Demo Week"
 summary = "Wir haben eine virtuelle Demo-Woche entwickelt, um Projekte aus den Runden 7-10 des deutschen Prototype Fund die Möglichkeit zu geben, ihre Arbeit in einer virtuellen Umgebung zu präsentieren."
 date = "2023-03-11 18:45:00 +0200"
-images = ["demoweek"]
+images = ["img/work/demoweek.webp", "demoweek"]
 tags = []
 categories = ["Branding", "Interaction Design", "Web Development"]
 [links]

content/de/work/i2p.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "I2P - The Invisible Internet Project"
 summary = "We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox."
 date = "2017-01-24 12:00:00 +0200"
-images = ["i2p"]
+images = ["img/work/i2p.webp", "i2p"]
 tags = []
 categories = ["Branding", "UX Research"]
 [links]

content/de/work/optima.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ OPTIMA"
 summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
 date = "2021-01-24 12:00:00 +0200"
-images = ["optima"]
+images = ["img/work/optima.webp", "optima"]
 tags = []
 categories = ["Branding", "Illustrations"]
 [links]

content/de/work/oxizide.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Oxidize - The Conference of embedded Rust"
 summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
 date = "2020-03-24 12:00:00 +0200"
-images = ["oxidize"]
+images = ["img/work/oxidize.webp", "oxidize"]
 tags = []
 categories = ["Branding", "Web Development"]
 [links]

content/de/work/stackspin.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Stackspin"
 summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
 date = "2022-03-25 12:00:00 +0200"
-images = ["stackspin"]
+images = ["img/work/stackspin.webp", "stackspin"]
 tags = []
 categories = ["Branding", "UX Research", "Illustrations", "Interaction Design"]
 [links]

content/de/work/thunderbird.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "Thunderbird"
 summary = "We created the new Thunderbird brand and helped the project with extensive usability research."
 date = "2019-01-24 12:00:00 +0200"
-images = ["thunderbird"]
+images = ["img/work/thunderbird.webp", "thunderbird"]
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/de/work/totem.md

@@ -8,7 +8,7 @@ text = "#064E3B"
 title = "Totem Project"
 summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
 date = "2022-08-08 12:00:00 +0200"
-images = ["totem"]
+images = ["img/work/totem.webp", "totem"]
 tags = []
 categories = ["Branding", "Illustrations", "Layout Design"]
 [links]

content/en/work/adapt.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ ADAPT"
 summary = "We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere. "
 date = "2022-01-24 12:00:00 +0200"
-images = ["adapt"]
+images = ["img/work/adapt.webp", "adapt"]
 tags = []
 categories = ["Branding", "Web Development", "Illustrations"]
 [links]

content/en/work/asciidoc.md

@@ -8,7 +8,7 @@ text = "#194954"
 title = "AsciiDoc"
 summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
 date = "2022-08-15 12:00:00 +0200"
-images = ["asciidoc"]
+images = ["img/work/asciidoc.webp", "asciidoc"]
 tags = []
 categories = ["Branding", "Interaction Design", "Layout Design"]
 [links]

content/en/work/calyxos.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "CalyxOS"
 summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
 date = "2022-03-24 12:00:00 +0200"
-images = ["calyxos"]
+images = ["img/work/calyxos.webp", "calyxos"]
 tags = []
 categories = ["Illustrations", "UX Research", "Accessibility"]
 [links]

content/en/work/censoredplanet.md

@@ -8,7 +8,7 @@ accent = "#000000"
 title = "Censored Planet"
 summary = "We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways."
 date = "2022-03-25 12:00:00 +0200"
-images = ["censoredplanet"]
+images = ["img/work/censoredplanet.webp", "censoredplanet"]
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/en/work/demoweek.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "PrototypeFund - Virtual Demo Week"
 summary = "We developed a virtual demo week experience to enable projects from Rounds 7-10 of the German Prototype Fund to showcase their work in a virtual setting."
 date = "2023-03-11 18:45:00 +0200"
-images = ["demoweek"]
+images = ["img/work/demoweek.webp", "demoweek"]
 tags = []
 categories = ["Branding", "Interaction Design", "Web Development"]
 [links]

content/en/work/i2p.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "I2P - The Invisible Internet Project"
 summary = "We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox."
 date = "2017-01-24 12:00:00 +0200"
-images = ["i2p"]
+images = ["img/work/i2p.webp", "i2p"]
 tags = []
 categories = ["Branding", "UX Research"]
 [links]

content/en/work/optima.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ OPTIMA"
 summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
 date = "2021-01-24 12:00:00 +0200"
-images = ["optima"]
+images = ["img/work/optima.webp", "optima"]
 tags = []
 categories = ["Branding", "Illustrations"]
 [links]

content/en/work/oxizide.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Oxidize - The Conference of embedded Rust"
 summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
 date = "2020-03-24 12:00:00 +0200"
-images = ["oxidize"]
+images = ["img/work/oxidize.webp", "oxidize"]
 tags = []
 categories = ["Branding", "Web Development"]
 [links]

content/en/work/stackspin.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Stackspin"
 summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
 date = "2022-03-25 12:00:00 +0200"
-images = ["stackspin"]
+images = ["img/work/stackspin.webp", "stackspin"]
 tags = []
 categories = ["Branding", "UX Research", "Illustrations", "Interaction Design"]
 [links]

content/en/work/thunderbird.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "Thunderbird"
 summary = "We created the new Thunderbird brand and helped the project with extensive usability research."
 date = "2019-01-24 12:00:00 +0200"
-images = ["thunderbird"]
+images = ["img/work/thunderbird.webp", "thunderbird"]
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/en/work/totem.md

@@ -8,7 +8,7 @@ text = "#064E3B"
 title = "Totem Project"
 summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
 date = "2022-08-08 12:00:00 +0200"
-images = ["totem"]
+images = ["img/work/totem.webp", "totem"]
 tags = []
 categories = ["Branding", "Illustrations", "Layout Design"]
 [links]

layouts/_default/list.html

@@ -14,8 +14,8 @@
               {{ range .Pages }}
               <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
                   <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.svg" alt="{{ .Title }}">
-                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="{{ .Title }}">
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" alt="{{ .Title }}">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="{{ .Title }}">
                   </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
               </div>

layouts/_default/probono.html

@@ -55,8 +55,8 @@
                 {{ range first 3 (where (where .Site.RegularPages "Type" "work") "Params.lab" "=" true) }}
                 <div class="col-xl-4 col-lg-12 col-12 pb-xl-0 pb-4 d-flex flex-column work">
                     <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.svg" alt="">
-                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="">
+                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" alt="">
+                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="">
                     </a>
                     <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
                     <p class="mb-0">

layouts/index.html

@@ -22,8 +22,8 @@
                 {{ range first 2 (where (where .Site.RegularPages "Type" "work") "Params.featured" "=" true) }}
                 <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-4 d-flex flex-column work">
                     <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Page.Params.images }}{{ index . 0 }}{{ end -}}.svg" width="636px" height="357px" alt="">
-                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Page.Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="">
+                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Page.Params.images }}{{ index . 1 }}{{ end -}}.svg" width="636px" height="357px" alt="">
+                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Page.Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="">
                     </a>
                     {{ $path := printf "/%s/%s" "img/work" .Params.image }}
                     <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>

layouts/work/list.html

@@ -34,8 +34,8 @@
               {{ range first 2 ($work) }}
               <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-5 work">
                   <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.svg" width="636px" height="357px" alt="">
-                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="">
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="636px" height="357px" alt="">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="">
                   </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                   <p class="mb-0">
@@ -53,8 +53,8 @@
               {{ range after 2 ($work) }}
               <div class="col-xl-4 col-lg-12 col-12 pb-5 work">
                   <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.svg" width="416px" height="234px" alt="">
-                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="">
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="416px" height="234px" alt="">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="">
                   </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                   <p class="mb-0">
@@ -73,8 +73,8 @@
           {{ range ($work) }}
             <div class="col-xl-4 col-lg-12 col-12 mb-4 mt-0 work tabcontentservice {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ replaceRE " " "-" $e | lower }}{{- end -}}">
                 <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                  <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.svg" width="416px" height="234px" alt="">
-                  <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 0 }}{{ end -}}.webp" alt="">
+                  <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="416px" height="234px" alt="">
+                  <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" alt="">
                 </a>
                 <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                 <p class="mb-0">