Images are presented inconsistently in docs

[mcoker]

Curious if we could normalize any of these. I'll also say that on top of these, there are a lot of images in the docs that are not within any kind of class/wrapper - so those are either left-aligned with the content if they're less than the width of the content wrapper, or they consume 100% of the content width with no max-width.

.ws-docs-content-img

• will only grow up to 700px
• centers itself horizontally
• centers its child horizontally (if the image inside is less than 700px)
• Button docs use this with a bunch of varied image sizes - https://www.patternfly.org/components/button/design-guidelines

patternfly-org/packages/documentation-site/patternfly-docs/content/design-guidelines/components/components.css

Lines 1 to 6 in b455d81

	.ws-docs-content-img {
	text-align: center;
	margin-inline: auto;
	width: 100%;
	max-width: 700px;
	}

.ws-image

• centers its child horizontally
• same as above but will grow to 100% of the available width instead of a max of 700px

patternfly-org/packages/documentation-framework/templates/mdx.css

Lines 19 to 21 in b455d81

	.ws-image {
	text-align: center;
	}

.ws-images

• centers itself horizontally
• has a max-width of 600px
• Same as the first one except 600px instead of 700px and it will not center its children, so if an image less than 600px wide is passed, it will be left aligned within the container.

patternfly-org/packages/site/src/content/get-started/get-started.css

Lines 5 to 8 in b455d81

	.ws-images {
	margin: auto;
	width: 600px;
	}

[mcoker]

cc @bekah-stephens @edonehoo @andrew-ronaldson do y'all have any feedback? I can provide screenshots/codepens with changes if needed.

I'll say that the easiest is probably just not have a special container for images. Only because then nobody has to remember to add a special wrapper around images to get the centered/max-width/etc effects.

Here are a couple that just have images and no special wrapper

• https://www.patternfly.org/components/about-modal/design-guidelines (wide images)
• https://www.patternfly.org/charts/about-charts (varied sizes)

[edonehoo]

Definitely +1 to standardizing

The max width has been helpful in certain instances where a full-width image would be too intrusive/blurry (for ex, chatbot images that are taller than they are wide) or for png screenshots (like in this tokens doc).

But maybe we can just standardize the frame width before exporting from Figma, and just let some images have larger white "margins"? Or, specify a width for individual images as needed (like on the parent div or img tag)

[mcoker]

@edonehoo thanks! I'd love to have something as simple as it can be for folks to use so there's less risk someone doesn't export in a special way or add the right classes or whatever when adding an image to docs. I imagine there is something folks will have to do, but the less the better IMO 👍

For the CSS/class that can do the centering/width manipulation, we can also draw a frame around the image if this is what you were referring to. We may also consider a relative max-width instead of a Like "80%" or so instead of "700px", so it could apply at all viewport widths (including mobile). I'm not necessarily recommending either, just showing something we could do with CSS.

Before:

After: