Images: Fix images not rendering in preview (#403)

Author: nginx-jack

exampleSite/content/_index.md

@@ -1,9 +1,9 @@
 ---
 title: Example Site for NGINX Hugo Theme
-description: 
+description:
 ---
 
-## NGINX Hugo Theme Documentation 
+## NGINX Hugo Theme Documentation
 Documentation for hugo theme
 {{<card-section>}}
   {{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes"  isLanding="true">}}
@@ -12,8 +12,7 @@ Documentation for hugo theme
   {{<card title="Test Nested Product" titleUrl="/nested/product" icon="test-tubes"  isLanding="true">}}
     Test nested product path
   {{</card >}}
-  {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg"  isLanding="true">}}
+  {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon.svg"  isLanding="true">}}
     See a live example of theme components
   {{</card >}}
 {{</card-section>}}
-

exampleSite/content/nginx/installing-nginx-open-source.md

@@ -10,8 +10,7 @@ weight: 200
 nd-reading-time: true
 ---
 
-![hero-graphic](/hero-graphic.webp)
-
+{{<img src="hero-graphic.webp" alt="hero graphic">}}
 ```nginx
 
 # Global Configuration

layouts/_default/list.html

@@ -10,7 +10,11 @@
         {{ end }}
         </div>
         <div class="list-header-container">
-          <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
+          {{ $logo := .Params.logo | default "NGINX-product-icon.svg"}}
+          {{ with printf "images/icons/%s" $logo }}
+          <img src="{{. | absURL}}">
+          {{ end }}
+
           <div class="list-header-title">
             <h1>{{ .Title }}</h1>
             {{ if index .Params "nd-subtitle" }}

layouts/partials/favicon.html

@@ -1 +1 @@
-<link rel="shortcut icon" type="image/x-icon" href="{{ "/images/favicon-48x48.ico" | absURL }}">
+<link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon-48x48.ico" | absURL }}">

layouts/partials/footer-v2.html

@@ -1,6 +1,6 @@
 <div class="footer-layout">
     <div class="footer-f5-trademark" data-testid="footer-f5-trademark">
-        <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
+        <img class="f5-logo-footer" src="{{ "images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
         <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
     </div>
     <div class="footer-useful-links" data-testid="footer-useful-links">

layouts/partials/header.html

@@ -24,7 +24,7 @@
 
       <div class="header__logo" data-testid="header__logo">
           <a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
-              <img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
+              <img class="header__img" src="{{ "images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
           </a>
       </div>
 

layouts/partials/lucide.html

@@ -1,3 +1,7 @@
 {{- /* Usage: */ -}}
 {{- /* (dict "context" . "icon" "circle") */ -}}
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="lucide" style="{{ .style | safeCSS }}"><use href="/images/lucide-sprite.svg#{{ .icon }}"></use></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="lucide" style="{{ .style | safeCSS }}">
+  {{ with printf "images/lucide-sprite.svg#%s" .icon }}
+  <use href="{{. | absURL}}"></use>
+  {{ end }}
+</svg>

layouts/partials/meta.html

@@ -24,14 +24,14 @@
 {{ end }}
 
 <meta property="article:publisher" content="https://www.facebook.com/nginxinc" />
-<meta property="og:image" content="{{ "/images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
+<meta property="og:image" content="{{ "images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
 <meta property="og:image:width" content="500" />
 <meta property="og:image:height" content="300" />
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" content="{{.Page.Description}}" />
 <meta name="twitter:title" content="{{.Page.Title}}" />
 <meta name="twitter:site" content="@nginx" />
-<meta name="twitter:image" content="{{ "/images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
+<meta name="twitter:image" content="{{ "images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
 <meta name="twitter:creator" content="@nginx" />
 {{ if .Page.Lastmod }}
 <meta http-equiv="last-modified" content="{{ .Page.Lastmod.Format "02/01/2006" }}" />
@@ -66,4 +66,4 @@
 <!-- Coveo metadata-->
 <meta name="product" content="{{ .Site.Title }}">
 <meta name="version" content="{{ .Site.Params.currentVersion }}">
-<meta name="doc_type" content="Manual">
+<meta name="doc_type" content="Manual">

layouts/shortcodes/card.html

@@ -1,5 +1,5 @@
 {{- $title := .Get "title" -}}
-{{- $titleUrl := .Get "titleUrl" | default "." -}} 
+{{- $titleUrl := .Get "titleUrl" | default "." -}}
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
 {{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
@@ -41,7 +41,9 @@
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
-          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
+          {{ with printf "images/icons/%s" $brandIcon }}
+          <img class="card-brand-icon" src="{{. | absURL}}">
+          {{ end }}
         {{- else if $icon -}}
           {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}
@@ -57,4 +59,4 @@ <h2 class="card-title">{{- $title -}}</h2>
 </a>
 {{- else -}}
   {{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
-{{- end -}}
+{{- end -}}