Skip to content

fix(docs-framework): update webpack to handle all images the same way#4843

Merged
mcoker merged 3 commits intopatternfly:mainfrom
wise-king-sullyman:remove-responsive-loader
Oct 28, 2025
Merged

fix(docs-framework): update webpack to handle all images the same way#4843
mcoker merged 3 commits intopatternfly:mainfrom
wise-king-sullyman:remove-responsive-loader

Conversation

@wise-king-sullyman
Copy link
Collaborator

Closes #4842

Removes responsive-loader because we don't appear to be using that functionality, and it's causing issues with bundled images not being accessible in css files.

@patternfly-build
Copy link
Collaborator

patternfly-build commented Oct 23, 2025

Preview: https://pf-org--pr-4843-site.surge.sh

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

According to https://www.npmjs.com/package/responsive-loader, you'd import an image and you can reference a bunch of data about it (src, width, height, srcSet, etc)

Looks like it was added here - #2075

I poked around for any reference of .src or .srcset and I think this is the only place https://github.com/wise-king-sullyman/patternfly-org/blob/6a14e6fe3ae6851f5b6d2d49ed3d95a7a4ad6843/packages/documentation-framework/components/example/example.js#L198

AFAICT that creates the thumbnail for full page examples/demos, which you can see broken on this branch if you go to a page like https://www.patternfly.org/components/modal/html-demos/

Assuming that's the only place, looks like there could be at least a couple of fixes. Easiest would be just hard code the width/height (that isn't even needed) and reference thumbnail directly for the src like this.

-              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
+              <img src={thumbnail} width="800" height="450" alt={`${title} screenshot`} />

The width/height looks to be consistently generated as 800x450. But it isn't necessary, either - it's probably just helping with perceived page load by making the image take up its default dimension before the image finishes loading, so the page doesn't jump around as it's loading.

The other is we could add back the responsive-loader, and modify the test parameter to include /(html|html-demos|react|react-demos)/ before the file extension. The filenames that are loaded look to follow this pattern, depending on whether its in core or react and an example or demo.

import srcImportbasic from './html/basic.png';
import srcImportcustomalert from './html/custom-alert.png';
import srcImportcustomtitle from './html/custom-title.png';
...

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

🚀

@mcoker mcoker merged commit 26cbb75 into patternfly:main Oct 28, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - image imports from CSS files don't work

3 participants