docs: add a new partial for responsive images and use `imageConfig` (#39779)

This way the dimensions are not hardcoded

6 files changed, 55 insertions, 38 deletions

diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 3175c55c0..427ee76c8 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -28,29 +28,9 @@
     <div class="container-xxl bd-gutter">
       {{ .Content }}
 
-      {{ if eq .Title "Examples" }}
-        <hr class="my-5">
-        <div class="container">
-          <div class="text-center">
-            <div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
-              {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
-            </div>
-            <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
-            <p class="col-md-10 col-lg-8 mx-auto lead">
-              Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
-            </p>
-            <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
-          </div>
-          <img class="d-block img-fluid mt-3 mx-auto"
-               srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
-                       /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
-               src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
-               alt="Bootstrap Themes"
-               width="1150"
-               height="320"
-               loading="lazy">
-        </div>
-      {{ end }}
+      {{ if eq .Title "Examples" -}}
+        {{ partial "examples/bs-themes" . }}
+      {{- end }}
     </div>
   </main>
 {{ end }}
diff --git a/site/layouts/partials/examples/bs-themes.html b/site/layouts/partials/examples/bs-themes.html
new file mode 100644
index 000000000..b426d0723
--- /dev/null
+++ b/site/layouts/partials/examples/bs-themes.html
@@ -0,0 +1,17 @@
+<hr class="my-5">
+<div class="container">
+  <div class="text-center">
+    <div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
+      {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
+    </div>
+    <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
+    <p class="col-md-10 col-lg-8 mx-auto lead">
+      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+  </div>
+  {{ partial "responsive-img" (dict "context" .
+    "imgPath" "/assets/img/bootstrap-themes-collage.png"
+    "alt" "Bootstrap Themes"
+    "classes" "d-block mt-3") }}
+</div>
diff --git a/site/layouts/partials/home/icons.html b/site/layouts/partials/home/icons.html
index 5cc7f1417..7ec81764e 100644
--- a/site/layouts/partials/home/icons.html
+++ b/site/layouts/partials/home/icons.html
@@ -15,9 +15,9 @@
     </p>
   </div>
   <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
-                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
-                                          alt="Bootstrap Icons" width="700" height="425" loading="lazy">
+    {{ partial "responsive-img" (dict "context" .
+      "imgPath" "/assets/img/bootstrap-icons.png"
+      "alt" "Bootstrap Icons"
+      "classes" "d-block mt-3") }}
   </div>
 </section>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index d4ec0c026..4fb36f62f 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -10,13 +10,11 @@
           <svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
         </span>
       </a>
-      <img class="d-none d-sm-block mx-auto mb-3"
-           srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
-                   /docs/{{ .Site.Params.docs_version }}/assets/brand/[email protected] 2x"
-           src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
-           alt="Bootstrap"
-           width="200"
-           height="165">
+      {{ partial "responsive-img" (dict "context" .
+        "imgPath" "/assets/brand/bootstrap-logo-shadow.png"
+        "alt" "Bootstrap"
+        "classes" "d-none d-sm-block mb-3"
+        "lazyload" false) }}
       <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
       <p class="lead mb-4">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
diff --git a/site/layouts/partials/home/themes.html b/site/layouts/partials/home/themes.html
index 3e286f267..add1a3583 100644
--- a/site/layouts/partials/home/themes.html
+++ b/site/layouts/partials/home/themes.html
@@ -15,9 +15,9 @@
     </p>
   </div>
   <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
-                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
-                                          alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+    {{ partial "responsive-img" (dict "context" .
+      "imgPath" "/assets/img/bootstrap-themes.png"
+      "alt" "Bootstrap Themes"
+      "classes" "d-block mt-3") }}
   </div>
 </section>
diff --git a/site/layouts/partials/responsive-img.html b/site/layouts/partials/responsive-img.html
new file mode 100644
index 000000000..06aafb6aa
--- /dev/null
+++ b/site/layouts/partials/responsive-img.html
@@ -0,0 +1,22 @@
+{{- /*
+  Accepts context, classes, imgPath, alt and lazyload
+*/ -}}
+
+{{- $lazy := .lazyload | default true -}}
+{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
+
+{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
+{{- $basename := path.BaseName .imgPath -}}
+{{- $ext := path.Ext .imgPath -}}
+{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
+{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
+
+{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
+<img class="{{ delimit $classes " " }}"
+     srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
+     src="{{ $imgPath }}"
+     alt="{{ $.alt }}"{{ if eq $lazy true }}
+     loading="lazy"{{ end }}
+     width="{{ .Width }}"
+     height="{{ .Height }}">
+{{- end }}