rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +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 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. 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: 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. 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 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. 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: 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. 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 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. 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: 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. 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">