Skip to content

Commit 4093ed3

Browse files
XhmikosRXhmikosR
authored
docs: add a new partial for responsive images and use imageConfig (#39779)
This way the dimensions are not hardcoded
1 parent 2ba7dae commit 4093ed3

File tree

6 files changed

+55
-38
lines changed

6 files changed

+55
-38
lines changed

Diff for: ‎site/layouts/_default/single.html

+3-23
Original file line numberDiff line numberDiff line change
@@ -28,29 +28,9 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
2828
<div class="container-xxl bd-gutter">
2929
{{ .Content }}
3030

31-
{{ if eq .Title "Examples" }}
32-
<hr class="my-5">
33-
<div class="container">
34-
<div class="text-center">
35-
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
36-
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
37-
</div>
38-
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
39-
<p class="col-md-10 col-lg-8 mx-auto lead">
40-
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.
41-
</p>
42-
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
43-
</div>
44-
<img class="d-block img-fluid mt-3 mx-auto"
45-
srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
46-
/docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
47-
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
48-
alt="Bootstrap Themes"
49-
width="1150"
50-
height="320"
51-
loading="lazy">
52-
</div>
53-
{{ end }}
31+
{{ if eq .Title "Examples" -}}
32+
{{ partial "examples/bs-themes" . }}
33+
{{- end }}
5434
</div>
5535
</main>
5636
{{ end }}

Diff for: ‎site/layouts/partials/examples/bs-themes.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<hr class="my-5">
2+
<div class="container">
3+
<div class="text-center">
4+
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
5+
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
6+
</div>
7+
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
8+
<p class="col-md-10 col-lg-8 mx-auto lead">
9+
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.
10+
</p>
11+
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
12+
</div>
13+
{{ partial "responsive-img" (dict "context" .
14+
"imgPath" "/assets/img/bootstrap-themes-collage.png"
15+
"alt" "Bootstrap Themes"
16+
"classes" "d-block mt-3") }}
17+
</div>

Diff for: ‎site/layouts/partials/home/icons.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
1515
</p>
1616
</div>
1717
<div class="col-lg-6">
18-
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
19-
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
20-
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
21-
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
18+
{{ partial "responsive-img" (dict "context" .
19+
"imgPath" "/assets/img/bootstrap-icons.png"
20+
"alt" "Bootstrap Icons"
21+
"classes" "d-block mt-3") }}
2222
</div>
2323
</section>

Diff for: ‎site/layouts/partials/home/masthead.html

+5-7
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,11 @@
1010
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
1111
</span>
1212
</a>
13-
<img class="d-none d-sm-block mx-auto mb-3"
14-
srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
15-
/docs/{{ .Site.Params.docs_version }}/assets/brand/[email protected] 2x"
16-
src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
17-
alt="Bootstrap"
18-
width="200"
19-
height="165">
13+
{{ partial "responsive-img" (dict "context" .
14+
"imgPath" "/assets/brand/bootstrap-logo-shadow.png"
15+
"alt" "Bootstrap"
16+
"classes" "d-none d-sm-block mb-3"
17+
"lazyload" false) }}
2018
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
2119
<p class="lead mb-4">
2220
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 for: ‎site/layouts/partials/home/themes.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
1515
</p>
1616
</div>
1717
<div class="col-lg-6">
18-
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
19-
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
20-
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
21-
alt="Bootstrap Themes" width="700" height="500" loading="lazy">
18+
{{ partial "responsive-img" (dict "context" .
19+
"imgPath" "/assets/img/bootstrap-themes.png"
20+
"alt" "Bootstrap Themes"
21+
"classes" "d-block mt-3") }}
2222
</div>
2323
</section>

Diff for: ‎site/layouts/partials/responsive-img.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{{- /*
2+
Accepts context, classes, imgPath, alt and lazyload
3+
*/ -}}
4+
5+
{{- $lazy := .lazyload | default true -}}
6+
{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
7+
8+
{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
9+
{{- $basename := path.BaseName .imgPath -}}
10+
{{- $ext := path.Ext .imgPath -}}
11+
{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
12+
{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
13+
14+
{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
15+
<img class="{{ delimit $classes " " }}"
16+
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
17+
src="{{ $imgPath }}"
18+
alt="{{ $.alt }}"{{ if eq $lazy true }}
19+
loading="lazy"{{ end }}
20+
width="{{ .Width }}"
21+
height="{{ .Height }}">
22+
{{- end }}

0 commit comments

Comments
 (0)