[WIP] Upgrade Hugo & use native webp

bertytech/layouts/_default/_markup/render-image.html

@@ -8,28 +8,32 @@
 {{ $width := "" }}
 {{ $height := "" }}
 {{ $url := "" }}
+{{ $image := "" }}
 
 {{ if $is_remote }}
   {{ $layout = "fill" }}
   {{ $width = "1000" }}
   {{ $height = "500" }}
   {{ $url = $destination }}
 {{ else }}
-  {{ $image := (.Page.Resources.GetMatch $destination) }}
+  {{ $image = (.Page.Resources.GetMatch $destination) }}
   {{ if ne $image nil }}
     {{ $layout = "intrinsic" }}
     {{ if in $resizable $image.MediaType.SubType }}
     {{ $image = cond (gt $image.Width 970) ($image.Resize "970x q100 Lanczos") ($image.Resize (print $image.Width "x q100 Lanczos")) }}
     {{ end }}
     {{ $width = $image.Width }}
     {{ $height = $image.Height }}
-    {{ $url = $image.RelPermalink }}
   {{ end }}
 {{ end }}
 
 {{- if not (eq $url nil) -}}
 <figure class="md-image text-center {{ if $is_remote }}contain{{ end }}">
-  {{ partial "img" (dict "src" $url "width" $width "height" $height "layout" $layout "alt" .PlainText "title" (.Title | markdownify | plainify )) }}
+  {{ if $is_remote }}
+  <img class="img-fluid" src="{{$url}}" alt="{{.PlainText}}" title="{{(.Title | markdownify | plainify )}}" />
+  {{else}}
+  {{ partial "img" (dict "src" $image "width" $width "height" $height "layout" $layout "alt" .PlainText "title" (.Title | markdownify | plainify )) }}
+  {{end}}
   <figcaption>{{ .Title | markdownify }}</figcaption>
 </figure>
 {{ end }}

bertytech/layouts/_default/about.html

@@ -15,7 +15,7 @@
 						<div class="text-center">
 							<div class="img-icon">
 								{{ $img := $.Page.Resources.GetMatch .image }}
-								{{ partial "img" (dict "ctx" . "src" $img.RelPermalink "width" "120" "height" "120") }}
+								{{ partial "img" (dict "ctx" . "src" $img "width" "120" "height" "120") }}
 							</div>
 							<h4>{{ .title }}</h4>
 						</div>
@@ -48,7 +48,7 @@ <h3>{{ .title }}</h3>
 					<div class="col-md-5">
 						<div class="block-mixed-img">
 							{{ $img := .Page.Resources.GetMatch .Params.section_2.image }}
-							{{ partial "img" (dict "ctx" . "class" "img-blob-photo" "src" $img.RelPermalink "layout" "responsive" "width" "200" "height" "300") }}
+							{{ partial "img" (dict "ctx" . "class" "img-blob-photo" "src" $img "layout" "responsive" "width" "200" "height" "300") }}
 						</div>
 					</div>
 				</div>
@@ -63,7 +63,7 @@ <h3>{{ .title }}</h3>
 				<div class="row">
 					<div class="col-md-4">
 						<div class="block-mixed-img">
-						{{ partial "img" (dict "ctx" . "class" "img-open-source" "src" .Params.section_3.image "layout" "responsive" "width" "70" "height" "70") }}
+						{{ partial "img" (dict "ctx" . "class" "img-open-source" "src" (resources.Get .Params.section_3.image) "layout" "responsive" "width" "70" "height" "70") }}
 						</div>
 					</div>
 					<div class="col-md-7">

bertytech/layouts/index.html

@@ -7,15 +7,15 @@
 		<img src="/img/wave_blue.svg" class="img img-wave">
 		<div class="container">	
 			<div class="img img-planet-purple">
-				{{ partial "img" (dict "ctx" . "src" "/img/planet_purple.png" "layout" "fill")}}
+				{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/planet_purple.png") "layout" "fill" "width" "400")}}
 			</div>
 			<div class="img img-planet-pink">
-				{{ partial "img" (dict "ctx" . "src" "/img/planet_pink.png" "layout" "fill")}}
+				{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/planet_pink.png") "layout" "fill" "width" "700")}}
 			</div>
 		</div><!-- /.container -->
 		<img src="/img/wave_bottom.svg" class="img img-wave-bottom">
 		<div class="img img-planet-orange">
-			{{ partial "img" (dict "ctx" . "src" "/img/planet_orange.png" "layout" "fill")}}
+			{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/planet_orange.png") "layout" "fill")}}
 		</div>
 	</div><!-- /.header-bg -->
 	<div class="section-content">

bertytech/layouts/jobs/list.html

@@ -19,9 +19,9 @@ <h3 class="text-shadow subtitle">{{.Params.Subtitle}}</h3>
             {{- with $.Params.image_bg -}}
             {{- $img := $.Page.Resources.GetMatch $.Params.image_bg -}}
             {{- $resize := $img.Resize "300x" -}}
-            {{ partial "img" (dict "ctx" $ "src" $resize.RelPermalink "width" $resize.Width "height" $resize.Height) }}
+            {{ partial "img" (dict "ctx" $ "src" $resize "width" $resize.Width "height" $resize.Height) }}
             {{- else -}}
-            {{ partial "img" (dict "ctx" $ "class" "img-rounded" "src" "/img/paris.png" "width" "255" "height" "120") }}
+            {{ partial "img" (dict "ctx" $ "class" "img-rounded" "src" (resources.Get "/img/paris.png") "width" "255" "height" "120") }}
             {{- end -}}
           </div><!-- /.col -->
           <div class="col-md-5">

bertytech/layouts/newsletter/list.html

@@ -19,9 +19,9 @@ <h3 class="text-shadow subtitle">{{.Params.Subtitle}}</h3>
             {{- with $.Params.image -}}
             {{- $img := $.Page.Resources.GetMatch $.Params.image -}}
             {{- $resize := $img.Resize "300x" -}}
-            {{ partial "img" (dict "ctx" $ "src" $resize.RelPermalink "width" $resize.Width "height" $resize.Height) }}
+            {{ partial "img" (dict "ctx" $ "src" $resize "width" $resize.Width "height" $resize.Height) }}
             {{- else -}}
-            {{ partial "img" (dict "ctx" $ "class" "img-rounded" "src" "/img/newsletter.png" "width" "255" "height" "120") }}
+            {{ partial "img" (dict "ctx" $ "class" "img-rounded" "src" (resources.Get "/img/newsletter.png") "width" "255" "height" "120") }}
             {{- end -}}
           </div><!-- /.col -->
           <div class="col-md-6">

bertytech/layouts/partials/block_early_look.html

@@ -1,6 +1,6 @@
       <div class="block block-wi text-center bg-white">
 		<div class="block-wi-img s">
-			{{ partial "img" (dict "ctx" . "src" "/img/icon_early_look.svg" "width" "120" "height" "120") }}
+			{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/icon_early_look.svg") "width" "120" "height" "120") }}
 		</div><!-- /.block-wi-img -->
 		<h2>Early look</h2>
 		<p>Access to github repositories, download a preview version of the app...</p>

bertytech/layouts/partials/block_help.html

@@ -1,6 +1,6 @@
 <div class="block block-wi text-center bg-white">
 	<div class="block-wi-img s">
-		{{ partial "img" (dict "ctx" . "src" "/img/icon_support.svg" "width" "120" "height" "120") }}
+		{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/icon_support.svg") "width" "120" "height" "120") }}
 	</div><!-- /.block-f-img -->
 	<h2>Help & Support</h2>
 	<p>Need help with your app ?<br/>Consult our online guides</p>

bertytech/layouts/partials/block_press.html

@@ -1,6 +1,6 @@
 <div class="block block-wi text-center bg-white">
 	<div class="block-wi-img s">
-		{{ partial "img" (dict "ctx" . "src" "/img/icon_press.svg" "width" "120" "height" "120") }}
+		{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/icon_press.svg") "width" "120" "height" "120") }}
 	</div><!-- /.block-f-img -->
 	<h2>Press & Media</h2>
 	<p>Get press contact, consult press releases, download assets...</p>

bertytech/layouts/partials/footer.html

@@ -5,7 +5,7 @@
 		<div class="container">
 			<div class="row row-top">
 				<div class="col-md-5">
-					{{ partial "img" (dict "ctx" . "class" "img-fluid img-bt" "src" "/img/berty_technologies_logo.png" "alt" "Berty Technologies" "width" "352" "height" "145") }}
+					{{ partial "img" (dict "ctx" . "class" "img-fluid img-bt" "src" (resources.Get "/img/berty_technologies_logo.png") "alt" "Berty Technologies" "width" "352" "height" "145") }}
 					<br />
 					{{ $url := relLangURL "/about" }}
 					<p>The Berty app is developed by the NGO <a href="{{ cond $is_404 (absURL $url) $url }}">Berty Technologies</a>.</p>

bertytech/layouts/partials/img.html

@@ -1,17 +1,25 @@
 {{ $layout := .layout | default "responsive" }}
+
+{{- $canConvert := in (slice "jpg" "jpeg" "png") .src.MediaType.SubType -}}
+{{- $mainImg := .src -}}
+{{- if $canConvert -}}
+    {{/*  Have to use resize to convert to webp. See issue: https://discourse.gohugo.io/t/image-conversion-without-resizing/32429  */}}
+    {{- $mainImg = .src.Resize (printf "%sx webp" (string .width | default "500")) -}}
+{{- end -}}
+
 <amp-img
-    class="_to-webp {{ with .class }}{{.}}{{end}}"
+    class="{{ with .class }}{{.}}{{end}}"
     {{ with .title }}title="{{.}}"{{end}}
     {{ with .alt }}alt="{{.}}"{{end}}
-    {{ with .src }}src="{{ . }}"{{end}}
+    src="{{$mainImg.RelPermalink}}"
     {{ with .width }}width="{{.}}"{{end}}
     {{ with .height }}height="{{.}}"{{end}}
     layout="{{ $layout }}">
     <amp-img 
         fallback
         {{ with .title }}title="{{.}}"{{end}}
         {{ with .alt }}alt="{{.}}"{{end}}
-        {{ with .src }}src="{{ . }}"{{end}}
+        {{ with .src }}src="{{ .RelPermalink }}"{{end}}
         {{ with .width }}width="{{.}}"{{end}}
         {{ with .height }}height="{{.}}"{{end}}
         layout="{{ $layout }}">

bertytech/layouts/partials/navbar.html

@@ -3,7 +3,7 @@
 <nav class="navbar navbar-expand-md navbar-dark{{with .Scratch.Get "navbar-class"}} {{.}}{{end}}">
     <div class="container">
         <a class="navbar-brand" href="{{ cond $is_404 (absURL `/`) `/` }}">
-            {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" "/img/berty_mono.svg")}}  
+            {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" (resources.Get "/img/berty_mono.svg"))}}  
         </a>
         <button on="tap:sidebar.open" class="navbar-toggler" type="button" data-target="#navbar-links" aria-controls="navbar-links" aria-expanded="false" aria-label="Toggle navigation">
             <i class="far fa-bars"></i>

bertytech/layouts/partials/navbar_old.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-light{{with .Scratch.Get "navbar-class"}} {{.}}{{end}}">
     <div class="container">
         <a class="navbar-brand" href="/">
-            {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" .Site.Params.navbarLogo)}}
+            {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" (resources.Get .Site.Params.navbarLogo))}}
         </a>
         <button on="tap:sidebar.open" class="navbar-toggler" type="button" data-target="#navbar-links" aria-controls="navbar-links" aria-expanded="false" aria-label="Toggle navigation">
             <i class="far fa-bars"></i>

bertytech/layouts/partials/picture.html

@@ -1,7 +1,17 @@
-<picture class="_to-webp {{ .class }}">
+{{- $canConvert := in (slice "jpg" "jpeg" "png") .src.MediaType.SubType -}}
+{{- $mainImg := .src -}}
+{{- if $canConvert -}}
+    {{/*  Have to use resize to convert to webp. See issue: https://discourse.gohugo.io/t/image-conversion-without-resizing/32429  */}}
+    {{- $mainImg = .src.Resize (printf "%sx webp" (string .width | default "500")) -}}
+{{- end -}}
+
+<picture class="{{ .class }}">
     <source 
-        {{with .src}}data-srcset="{{.}}"{{end}} 
-        type="{{.mimeType}}"/> 
+        {{with .src}}data-srcset="{{$mainImg.RelPermalink}}"{{end}} 
+        type="{{$mainImg.MediaType}}"/> 
+    <source 
+        {{with .src}}data-srcset="{{.RelPermalink}}"{{end}} 
+        {{with .src}}type="{{.MediaType}}"{{end}}/> 
     <img 
         class="lazyload"
         {{with .src}}data-src="{{.}}"{{end}}

bertytech/layouts/partials/post_card.html

@@ -9,24 +9,22 @@
   {{ if ne $img.MediaType.SubType "gif" }}
   {{ $img = $img.Resize "350x" }}
   {{ end }}
-  {{ $scratch.Set "img_path" $img.RelPermalink }}
+  {{ $scratch.Set "img" $img }}
   {{ $scratch.Set "img_width" $img.Width }}
   {{ $scratch.Set "img_height" $img.Height }}
-  {{ $scratch.Set "img_mime" $img.MediaType }}
 {{ else }}
   {{ $img := resources.Get "/img/avatar_staff.png" }}
-  {{ $scratch.Set "img_path" $img.RelPermalink }}
+  {{ $scratch.Set "img" $img }}
   {{ $scratch.Set "img_width" "350" }}
   {{ $scratch.Set "img_height" "200" }}
-  {{ $scratch.Set "img_mime" $img.MediaType }}
 {{ end }}
 
 {{ if .useAmpImg }}
-  {{ $scratch.Set "author_img" (partial "img" (dict "ctx" . "class" "avatar" "src" $authorImg.RelPermalink "width" "36" "height" "36")) }}
-  {{ $scratch.Set "card_img" (partial "img" (dict "ctx" . "src" ($scratch.Get "img_path") "width" ($scratch.Get "img_width") "height" ($scratch.Get "img_height"))) }}
+  {{ $scratch.Set "author_img" (partial "img" (dict "ctx" . "class" "avatar" "src" $authorImg "width" "36" "height" "36")) }}
+  {{ $scratch.Set "card_img" (partial "img" (dict "ctx" . "src" ($scratch.Get "img") "width" ($scratch.Get "img_width") "height" ($scratch.Get "img_height"))) }}
 {{ else }}
-  {{ $scratch.Set "author_img" (partial "picture" (dict "src" $authorImg.RelPermalink "mimeType" $authorImg.MediaType "class" "avatar")) }}
-  {{ $scratch.Set "card_img" (partial "picture" (dict "src"  ($scratch.Get "img_path") "mimeType" ($scratch.Get "img_mime") ))}}
+  {{ $scratch.Set "author_img" (partial "picture" (dict "src" $authorImg "class" "avatar")) }}
+  {{ $scratch.Set "card_img" (partial "picture" (dict "src"  ($scratch.Get "img") ))}}
 {{ end }}
 
 <a class="block bg-white post-card" href="{{.ctx.RelPermalink}}">

bertytech/layouts/partials/post_footer.html

@@ -8,7 +8,7 @@
   <div class="row">
     <div class="col-md-6">
       <div class="post-avatar">
-        {{ partial "img" (dict "ctx" . "class" "avatar" "src" $authorImg.RelPermalink "width" "60" "height" "60") }}
+        {{ partial "img" (dict "ctx" . "class" "avatar" "src" $authorImg "width" "60" "height" "60") }}
       </div><!-- /.blockpost-avatar -->
       <div class="post-author">
 	<span class="author-name">{{ $authorName }}</span>

bertytech/layouts/partials/post_header.html

@@ -9,11 +9,11 @@
 <amp-video width="700" height="400" layout="responsive" autoplay loop>
 	<source src="{{ ($current.Resources.GetMatch $current.Params.video).RelPermalink }}" type="video/mp4" />
 	<div fallback>
-		{{ partial "img" (dict "ctx" $current "class" "rounded" "src" $img.RelPermalink "width" $img.Width "height" $img.Height) }}
+		{{ partial "img" (dict "ctx" $current "class" "rounded" "src" $img "width" $img.Width "height" $img.Height) }}
 	</div>
 </amp-video>
 {{ else }}
-	{{ partial "img" (dict "ctx" $current "class" "rounded" "src" $img.RelPermalink "width" $img.Width "height" $img.Height) }}
+	{{ partial "img" (dict "ctx" $current "class" "rounded" "src" $img "width" $img.Width "height" $img.Height) }}
 {{ end }}
 
 {{- end -}}

bertytech/layouts/partials/project_card.html

@@ -4,9 +4,9 @@
     {{- with $.Params.image -}}
     {{- $img := $.Page.Resources.GetMatch $.Params.image -}}
     {{- $resize := $img.Resize "1312x" -}}
-    {{ partial "img" (dict "ctx" $ "src" $resize.RelPermalink "width" $resize.Width "height" $resize.Height) }}
+    {{ partial "img" (dict "ctx" $ "src" $resize "width" $resize.Width "height" $resize.Height) }}
     {{- else -}}
-    {{ partial "img" (dict "ctx" $ "src" "/img/avatar_staff.png" "width" "350" "height" "200") }}
+    {{ partial "img" (dict "ctx" $ "src" (resources.Get "/img/avatar_staff.png") "width" "350" "height" "200") }}
     {{- end -}}
   </div>
   <div class="pc-middle">

bertytech/layouts/partials/section_features.html

@@ -5,7 +5,7 @@
 				<div class="col-lg-3 col-md-6">
 					<div class="block-wi text-center">
 						<div class="block-wi-img s c-yellow">
-							{{ partial "img" (dict "ctx" . "src" "/img/icon_private.svg" "width" "120" "height" "120") }}
+							{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/icon_private.svg") "width" "120" "height" "120") }}
 						</div><!-- /.block-wi-img -->
 						<h2>Private</h2>
 						<ul class="list-unstyled">
@@ -33,7 +33,7 @@ <h2>Secure</h2>
 				<div class="col-lg-3 col-md-6">
 					<div class="block-wi text-center">
 						<div class="block-wi-img s c-blue">
-							{{ partial "img" (dict "ctx" . "src" "/img/icon_distributed.svg" "width" "120" "height" "120") }}
+							{{ partial "img" (dict "ctx" . "src" (resources.Get "/img/icon_distributed.svg") "width" "120" "height" "120") }}
 						</div><!-- /.block-wi-img -->
 						<h2>Distributed</h2>
 						<ul class="list-unstyled">

bertytech/layouts/partials/section_whitepaper.html

@@ -44,7 +44,7 @@ <h3>
         <div class="col-lg-4 col-md-12">
           <div class="block block-wp block-wp-center text-center">
             <br />
-            {{ partial "img" (dict "ctx" . "class" "img-bty" "alt" "Berty Technologies" "src" "/img/berty_logo_square.svg" "width" "200" "height" "216") }}
+            {{ partial "img" (dict "ctx" . "class" "img-bty" "alt" "Berty Technologies" "src" (resources.Get "/img/berty_logo_square.svg") "width" "200" "height" "216") }}
             <br />
             <br />
             <br />

bertytech/layouts/partials/sidebar.html

@@ -1,6 +1,6 @@
 <amp-sidebar id="sidebar" layout="nodisplay" side="left">
     <a class="nav-brand" href="/">
-        {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" "/img/berty_logo.svg")}}  
+        {{ partial "img" (dict "ctx" . "class" "img-berty" "width" "150" "height" "45" "alt" "Berty Technologies" "src" (resources.Get "/img/berty_logo.svg"))}}  
     </a>
     <ul class="nav flex-column">
         <!--<li class="nav-section">