templates: use imageConfig (#428)

twbs · Mar 14, 2024 · d6bd01a · d6bd01a
1 parent 65d2591
commit d6bd01a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/layouts/partials/author-info.html b/src/layouts/partials/author-info.html
@@ -3,12 +3,19 @@
 {{- $author := .context.Page.Params.author -}}
 {{- $date := .context.Date -}}
 <div class="d-flex align-items-center mb-4 text-muted author-info">
-  <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/{{ $author }}" target="_blank" rel="noopener">
+  {{ $author_url := urls.JoinPath "https://github.com" $author -}}
+  <a class="d-flex align-items-center text-muted text-decoration-none" href="{{ $author_url }}" target="_blank" rel="noopener">
     {{ $avatar_width := 32 -}}
     {{- $avatar_width_2x := mul $avatar_width 2 -}}
-    <img class="mb-0 me-2 rounded-2" srcset="https://github.com/{{ $author }}.png?size={{ $avatar_width }}, https://github.com/{{ $author }}.png?size={{ $avatar_width_2x }} 2x"
-                                     src="https://github.com/{{ $author }}.png?size={{ $avatar_width }}"
-                                     alt="" width="{{ $avatar_width }}" height="{{ $avatar_width }}"{{ if eq .lazyload true }} loading="lazy"{{ end }}>
+    {{- $img_url := printf "%s%s%d" $author_url ".png?size=" $avatar_width -}}
+    {{- $img_url_2x := printf "%s%s%d" $author_url ".png?size=" $avatar_width_2x -}}
+    <img class="mb-0 me-2 rounded-2"
+         srcset="{{ $img_url }}, {{ $img_url_2x }} 2x"
+         src="{{ $img_url }}"
+         alt=""
+         width="{{ $avatar_width }}"
+         height="{{ $avatar_width }}"
+         {{ if eq .lazyload true }}loading="lazy"{{ end }}>
     <span>@{{ $author }}</span>
   </a>
   <span class="d-flex align-items-center ms-3" title="{{ $date | dateFormat "02 Jan 06 15:04 MST" }}">

diff --git a/src/layouts/partials/hero.html b/src/layouts/partials/hero.html
@@ -1,10 +1,16 @@
 <div class="masthead py-5">
   <div class="mb-4 text-center text-lg-start">
     <a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
-      <img srcset="/assets/brand/bootstrap-logo-shadow.png, /assets/brand/[email protected] 2x"
-           src="/assets/brand/bootstrap-logo-shadow.png"
-           width="200" height="165" alt="Bootstrap"
-           class="bd-booticon d-block mx-auto mb-3 mx-lg-0">
+      {{ $img_path := "/assets/brand/bootstrap-logo-shadow.png" -}}
+      {{- $img_path_2x := "/assets/brand/[email protected]" -}}
+      {{- with (imageConfig (path.Join "/src/static" $img_path)) -}}
+        <img class="bd-booticon d-block mx-auto mb-3 mx-lg-0"
+             srcset="{{ $img_path }}, {{ $img_path_2x }} 2x"
+             src="{{ $img_path }}"
+             alt="Bootstrap"
+             width="{{ .Width }}"
+             height="{{ .Height }}">
+        {{- end }}
     </a>
     <div class="ms-3 ms-lg-0">
       <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1>