Skip to content

Commit

Permalink
docs: add a new partial for responsive images and use imageConfig (#…
Browse files Browse the repository at this point in the history
…39779)

This way the dimensions are not hardcoded
  • Loading branch information
XhmikosR committed Apr 1, 2024
1 parent 2ba7dae commit 4093ed3
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 38 deletions.
26 changes: 3 additions & 23 deletions site/layouts/_default/single.html
Expand Up @@ -28,29 +28,9 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<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/bootstrap-themes-collage@2x.png 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 }}
17 changes: 17 additions & 0 deletions 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>
8 changes: 4 additions & 4 deletions site/layouts/partials/home/icons.html
Expand Up @@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
</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/bootstrap-icons@2x.png 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>
12 changes: 5 additions & 7 deletions site/layouts/partials/home/masthead.html
Expand Up @@ -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/bootstrap-logo-shadow@2x.png 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.
Expand Down
8 changes: 4 additions & 4 deletions site/layouts/partials/home/themes.html
Expand Up @@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
</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/bootstrap-themes@2x.png 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>
22 changes: 22 additions & 0 deletions 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 }}

0 comments on commit 4093ed3

Please sign in to comment.