rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Add a render image hook (#39768)

Browse Source 
Images are now lazyloaded, they have width and height attributes and the classes are centralized.

Only applies to Markdown images
This commit is contained in:
XhmikosR 2024-04-01 21:48:31 +03:00 committed by GitHub
parent 24cc552343
commit 2ba7dae3c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/content/docs/5.3/getting-started/parcel.md
View File

@ -111,7 +111,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)
In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
@ -150,7 +150,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png)
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

4
site/content/docs/5.3/getting-started/vite.md
View File

@ -135,7 +135,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
![Vite dev server running](/assets/img/guides/vite-dev-server.png)
In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
@ -175,7 +175,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png)
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

4
site/content/docs/5.3/getting-started/webpack.md
View File

@ -141,7 +141,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
![Webpack dev server running](/assets/img/guides/webpack-dev-server.png)
In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
@ -244,7 +244,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
![Webpack dev server running with Bootstrap](/assets/img/guides/webpack-dev-server-bootstrap.png)
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

8
site/layouts/_default/_markup/render-image.html Normal file
View File

@ -0,0 +1,8 @@
{{- $originalSrc := .Destination | safeURL -}}
{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
{{- $config := imageConfig $localImgPath -}}
{{- $classes := "d-block img-fluid" -}}
<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">