Merge pull request #382 from nunocoracao/374-bug-disableimageoptimiza…

…tion-setting-is-ignored-for-cover-images

🐛 fix disableImageOptimization usage across all images in theme

exampleSite/config/_default/params.toml

@@ -94,7 +94,6 @@ defaultBackgroundImage = "/img/iceland.jpg"
   showTableOfContents = true
   cardView = false
 
-
 [term]
   showHero = true
   heroStyle = "background" # valid options: basic, big, background, thumbAndBackground

layouts/partials/article-link/card.html

@@ -1,3 +1,4 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 {{ with .Params.externalUrl }}
 <a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
   {{ else }}
@@ -13,8 +14,14 @@
       {{- $featured := $images.GetMatch "*feature*" -}}
       {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
       {{- with $featured -}}
-      {{ with .Fill "600x600" }}
-      <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+      {{ if $disableImageOptimization }}
+        {{ with . }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Fill "600x600"  }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
       {{ end }}
       {{- else -}}
       {{- with $.Site.Params.images }}

layouts/partials/article-link/simple.html

@@ -12,6 +12,8 @@
 {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
 {{ end }}
 
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
 {{ $articleInnerClasses := "" }}
 {{ if .Site.Params.list.showCards }}
 {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
@@ -32,9 +34,15 @@
     {{- $featured := $images.GetMatch "*feature*" -}}
     {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
     {{- with $featured -}}
-    {{ with .Fill "600x400" }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
+    {{ if $disableImageOptimization }}
+        {{ with . }}
+        <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Fill "600x400"  }}
+        <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ end }}
     {{- else -}}
     {{- with $.Site.Params.images }}
     <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}

layouts/partials/hero/background.html

@@ -1,3 +1,5 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
 {{- $images := .Resources.ByType "image" -}}
 {{- $featured := $images.GetMatch "*background*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
@@ -13,12 +15,21 @@
         (and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
     ) }}
 {{- with $featured -}}
-{{ with .Resize "1200x" }}
 {{ if $shouldAddHeaderSpace | default true}}
 <div id="hero" class="h-[150px] md:h-[200px]"></div>
 {{ end }}
-<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+{{ if $disableImageOptimization }}
+    {{ with . }}
+    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
+    {{ end }}
+{{ else }}
+    {{ with .Resize "1200x" }}
+    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    {{ end }}
+{{ end }}
+
     <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
     </div>
     <div
@@ -35,5 +46,4 @@
     });
 </script>
 {{ end }}
-{{ end }}
 {{- end -}}

layouts/partials/hero/basic.html

@@ -1,8 +1,16 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
 {{- $images := .Resources.ByType "image" -}}
 {{- $featured := $images.GetMatch "*feature*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
-    {{ with .Resize "1200x" }}
-        <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+    {{ if $disableImageOptimization }}
+        {{ with . }}
+            <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+    {{ else }}
+        {{ with .Resize "1200x" }}
+            <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
     {{ end }}
 {{- end -}}

layouts/partials/hero/big.html

@@ -1,8 +1,16 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
 {{- $images := .Resources.ByType "image" -}}
 {{- $featured := $images.GetMatch "*feature*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
-    {{ with .Resize "1200x" }}
+    {{ if $disableImageOptimization }}
+        {{ with . }}
         <img class="w-full rounded-lg single_hero_round nozoom" src="{{ .RelPermalink }}">
+        {{ end }}
+    {{ else }}
+        {{ with .Resize "1200x" }}
+        <img class="w-full rounded-lg single_hero_round nozoom" src="{{ .RelPermalink }}">
+        {{ end }}
     {{ end }}
 {{- end -}}

layouts/partials/hero/thumbAndBackground.html

@@ -1,3 +1,5 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
 {{- $images := .Resources.ByType "image" -}}
 {{- $background := $images.GetMatch "*background*" -}}
 {{- if not $background }}{{ with .Site.Params.defaultBackgroundImage }}{{ $background = resources.Get . }}{{ end }}{{ end -}}
@@ -14,12 +16,30 @@
     ) }}
 
 {{- with $featured -}}
+{{ if $disableImageOptimization }}
+{{ with . }}
+<div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+{{ else }}
 {{ with .Resize "1200x" }}
 <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
 {{ end }}
+{{ end }}
 {{- end -}}
 
 {{- with $background -}}
+
+{{ if $disableImageOptimization }}
+{{ with . }}
+<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+    </div>
+    <div
+        class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
+    </div>
+</div>{{ end }}
+{{ else }}
 {{ with .Resize "1200x" }}
 <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
@@ -28,8 +48,9 @@
     <div
         class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
     </div>
-</div>
+</div>{{ end }}
 {{ end }}
+
 {{- end -}}
 
 {{ if $shouldBlur | default false }}

layouts/partials/term-link/card.html

@@ -2,6 +2,8 @@
   <div
     class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
 
+    {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
     {{- with site.Params.images -}}
     {{- range first 6 . }}
     <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
@@ -10,9 +12,15 @@
     {{- $featured := $images.GetMatch "*feature*" -}}
     {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
     {{- with $featured -}}
-    {{ with .Fill "600x600" }}
-    <div class="w-full thumbnail_card_term nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
+    {{ if $disableImageOptimization }}
+        {{ with . }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Fill "600x600"  }}
+        <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ end }}
     {{- else -}}
     {{- with site.Params.images }}
     <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}