Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
XhmikosR merged 6 commits into from
Apr 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2d71791
docs: add a new partial for responsive images and use imageConfig
XhmikosR Mar 12, 2024
4844426
Merge branch 'main' into xmr/docs-imgconfig
XhmikosR Mar 22, 2024
53b6c82
Update responsive-img.html
XhmikosR Mar 22, 2024
ad2d538
Update responsive-img.html
XhmikosR Mar 25, 2024
838d183
Merge branch 'main' into xmr/docs-imgconfig
XhmikosR Apr 1, 2024
32481fd
Update responsive-img.html
XhmikosR Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 3 additions & 23 deletions site/layouts/_default/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}