Problem: Images on static pages overflow on the bootstrap 5 theme

[anvit]

Current Behavior

Steps to reproduce the behavior

1. Create a static page.
2. Add a large image to it. For e.g. add this to a static page:

<div>
    <p>Hello World</p>
    <p><img src="http://placekitten.com/1920/600" alt="a cat" /></p>
</div>

3. Notice how the image goes outside the bounds.

Expected Behavior

Image should not grow outside the container.

Possible Solution

This likely stems from Bootstrap 5 removing the max-width: 100% style from the img tag. It probably doesn't show up in other places because the classes applied to images elsewhere take care of this.

A temporary way to fix this on static pages in the meantime would be to add a class="img-fluid" to any images to fix this.

Version used

AtoM 2.7.2

[fiver-watson]

Just as an FYI, depending on how you address this: there are 2 places in the docs that should probably be reviewed in light of however you proceed. One option is simply to document the recommendation to use the img-fluid class - there are similar BS2 classes suggested in the docs for styling currently.

The Manage Static Pages documentation page includes a section on formatting. This covers some basic HTML examples that can be used on static pages, and the Images subsection includes some BS2 classes that may no longer be relevant:

• https://www.accesstomemory.org/docs/2.7/user-manual/administer/static-pages/#images

This whole section also links to the Formatting documentation page on Markdown use:

• https://www.accesstomemory.org/docs/2.7/user-manual/add-edit-content/formatting/

[jraddaoui]

To avoid changing all existing static pages, we could add some default CSS rules to all images in all static pages (body.staticpage img) to keep the same behavior as in Bootstrap 2.

[anvit]

Thanks @fiver-watson! Will review the docs and update them. A lot of those existing classes seem to still be valid, but it would be good to document image classes for Bootstrap 5.

@jraddaoui Yup! That's the plan for the next release. The img-fluid class is only a temporary workaround we could suggest for users currently on a BS5 theme.

[anvit]

Created a PR for AtoM docs updates for changes related to BS5 classes: artefactual/atom-docs#223