Skip to content

Commit f3e40fd

Browse files
XhmikosRXhmikosR
committed
docs: add a new partial for responsive images and use imageConfig
This way the dimensions are not hardcoded
1 parent 3150c69 commit f3e40fd

6 files changed

Lines changed: 57 additions & 38 deletions

File tree

‎site/layouts/_default/single.html‎

Lines changed: 3 additions & 23 deletions
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/bootstrap-themes-collage@2x.png 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 }}

‎site/layouts/partials/examples/bs-themes.html‎

Lines changed: 17 additions & 0 deletions
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>

‎site/layouts/partials/home/icons.html‎

Lines changed: 4 additions & 4 deletions
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>

‎site/layouts/partials/home/masthead.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@
55
<strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
66
<span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
77
</a>
8-
<img class="d-none d-sm-block mx-auto mb-3"
9-
srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
10-
/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow@2x.png 2x"
11-
src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
12-
alt="Bootstrap"
13-
width="200"
14-
height="165">
8+
{{ partial "responsive-img" (dict "context" .
9+
"imgPath" "/assets/brand/bootstrap-logo-shadow.png"
10+
"alt" "Bootstrap"
11+
"classes" "d-none d-sm-block mb-3"
12+
"lazyload" false) }}
1513
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
1614
<p class="lead mb-4">
1715
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.

‎site/layouts/partials/home/themes.html‎

Lines changed: 4 additions & 4 deletions
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>

‎site/layouts/partials/responsive-img.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
{{- /* $imageBasePath is the path without the extension */ -}}
9+
{{- $imageBasePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
10+
{{- $basename := path.BaseName .imgPath -}}
11+
{{- $ext := path.Ext .imgPath -}}
12+
{{- /* We construct the filenames for the normal and 2x images */ -}}
13+
{{- $imgPath := path.Join $imageBasePath (printf "%s%s" $basename $ext) -}}
14+
{{- $imgPath2x := path.Join $imageBasePath (printf "%s@2x%s" $basename $ext) -}}
15+
16+
{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
17+
<img class="{{ delimit $classes " " }}"
18+
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
19+
src="{{ $imgPath }}"
20+
alt="{{ $.alt }}"
21+
width="{{ .Width }}"
22+
height="{{ .Height }}"
23+
{{ if eq $lazy true }}loading="lazy"{{ end }}>
24+
{{- end }}

0 commit comments

Comments
 (0)