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

.gitignore

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

layouts/404.html

@@ -13,7 +13,7 @@
 {{/* 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 "42x" }}
+  {{ $notFoundImage = $notFoundImage.Resize "1500x" }}
 {{ end }}
 {{ $notFoundImage = $notFoundImage.RelPermalink}}
 

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 }}
+
+{{/* 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,9 +17,13 @@
         {{ end }}
     {{ end }}
 {{ end }}
+
+{{/* apply image processing. don't use "Fit" in svg because its not supported */}}
 {{ $authorImage:= resources.Get $authorImage}}
-{{ if $authorImage }}
-{{ $authorImage := $authorImage.Fit "120x120" }}
-{{ return $authorImage.RelPermalink }}
+{{ 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

@@ -4,7 +4,7 @@
 
 {{/* if hero image is not provided, then use the default hero image */}}
 {{ if not $heroImage }}
-  {{ $heroImage:= resources.Get "images/default-hero.jpg"}}
+  {{ $heroImage := resources.Get "images/default-hero.jpg"}}
   {{ .Scratch.Set "heroScratch" $heroImage }}
 {{ end }}
 

layouts/partials/navigators/navbar-2.html

@@ -1,22 +1,28 @@
-{{ $mainLogo:="/images/main-logo.png" }}
-{{ $invertedLogo:="/images/inverted-logo.png" }}
+{{/* default logos  */}}
+{{ $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 }}
-{{ $mainLogo:= resources.Get $mainLogo}}
-{{ if $mainLogo }}
-{{ $mainLogo = $mainLogo.Resize "42x" }}
+
+{{/* 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:= resources.Get $invertedLogo}}
-{{ if $invertedLogo }}
-{{ $invertedLogo = $invertedLogo.Resize "42x" }}
 {{ $invertedLogo = $invertedLogo.RelPermalink}}
-{{ end }}
 
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">

layouts/partials/navigators/navbar.html

@@ -11,19 +11,19 @@
 {{ end }}
 
 {{/* resize the logos. don't resize svg because it is not supported */}}
-{{ $mainLogo:= resources.Get $mainLogo}}
+{{ $mainLogo := resources.Get $mainLogo}}
 {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
   {{ $mainLogo = $mainLogo.Resize "42x" }}
 {{ end }}
 {{ $mainLogo = $mainLogo.RelPermalink}}
 
-{{ $invertedLogo:= resources.Get $invertedLogo}}
+{{ $invertedLogo := resources.Get $invertedLogo}}
 {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
   {{ $invertedLogo = $invertedLogo.Resize "42x" }}
 {{ end }}
 {{ $invertedLogo = $invertedLogo.RelPermalink}}
 
-{{ $sections:= site.Data.sections }}
+{{ $sections := site.Data.sections }}
 {{ if (index site.Data site.Language.Lang).sections }}
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}

layouts/partials/sections/achievements/entry.html

@@ -1,16 +1,18 @@
-{{ $achievementImage:= resources.Get .image}}
+{{ $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 }}
+  {{ $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('{{ $achievementImageSm }}');"
+  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>
@@ -18,6 +20,6 @@
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
   </div>
-  <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
-<span  style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
+  <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

@@ -49,50 +49,53 @@
 {{/* 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}}
+  {{ $tiny := $src}}
+  {{ $small := $src}}
+  {{ $medium := $src}}
+  {{ $large := $src}}
+{{ end }}
 
-{{ end }}
 {{ if lt $src.Width "800" }}
-{{ $small := $src}}
-{{ $medium := $src}}
-{{ $large := $src}}
+  {{ $small := $src}}
+  {{ $medium := $src}}
+  {{ $large := $src}}
 {{ end }}
+
 {{ if lt $src.Width "1200" }}
-{{ $medium := $src}}
-{{ $large := $src}}
+  {{ $medium := $src}}
+  {{ $large := $src}}
 {{ end }}
+
 {{ if lt $src.Width "1500" }}
-{{ $large := $src}}
+  {{ $large := $src}}
 {{ end }}
 
 <div class="container-fluid home" id="home">
   <style>
     /* 0 to 299 */
     #homePageBackgroundImageDivStyled {
-        background-image: url('{{ $tiny.RelPermalink }}'); 
+      /*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('{{ $small.RelPermalink }}');
+          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('{{ $medium.RelPermalink }}');
+          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('{{ $large.RelPermalink }}');
+          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('{{ $src.RelPermalink }}');
+          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}');
         }
     }
     </style>