Skip to content

docs: add a render image hook #39768

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 4 commits into from
Apr 1, 2024
+14 −6
Merged

docs: add a render image hook #39768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea0791b
Add a render image hook
XhmikosR Mar 10, 2024
fe252aa
Merge branch 'main' into xmr/docs-render-img
XhmikosR Mar 15, 2024
e78915d
Merge branch 'main' into xmr/docs-render-img
XhmikosR Mar 18, 2024
e2cffa8
Merge branch 'main' into xmr/docs-render-img
XhmikosR Mar 20, 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
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/parcel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/vite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/webpack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
8 changes: 8 additions & 0 deletions site/layouts/_default/_markup/render-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" -}}
Copy link
Copy Markdown
Member

@julien-deramond julien-deramond Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you found any use cases needing to add this .d-block class? Doesn't seem to be useful in the current usage within the guides.

Copy link
Copy Markdown
Member Author

@XhmikosR XhmikosR Mar 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using d-block in blog and I'd swear at some point we needed d-block for some browser to work correctly, but maybe it was IE and SVG files.

Copy link
Copy Markdown
Member

@julien-deramond julien-deramond Mar 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, no problem. I don't mind keeping it for consistency or safety if you think it can be useful.

Copy link
Copy Markdown
Member Author

@XhmikosR XhmikosR Mar 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't mind dropping it, I just can't recall the reason we were using it. I think it was IE, but maybe @ffoodd or @mdo remembers.

Copy link
Copy Markdown
Contributor

@ffoodd ffoodd Apr 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My guess it allowed to drop bottom margin that came with inline and inline-block images in some cases, especially with img-fluid.

Could also relate to how images behave as flex children.

Not quite sure though 🤷 Would need some history digging.

Copy link
Copy Markdown
Member Author

@XhmikosR XhmikosR Apr 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to keep it for now, since it's easier to center an image if needed later.


<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">