Stefanowitsch Posted 5 hours ago Posted 5 hours ago Hi Peter! I just discovered (I am using 1.1.950) that there is a css file that is loaded in the frontend of my page: /site/modules/MediaHub/assets/css/media-hub-rte-content.css By looking into this file its seems the styles are used for embedding elements: /** * MediaHub — RTE image alignment + YouTube/Vimeo embed wrappers. * * Loaded on the live site and inside TinyMCE via content_css (see MediaHub.module.php). * Class names match ProcessWire ProcessPageEditImageSelect defaults. */ Is there an option to disable the loading of this file?
Peter Knight Posted 4 hours ago Posted 4 hours ago Hi @Stefanowitsch Thanks for the note. I will look into it.
Peter Knight Posted 1 hour ago Posted 1 hour ago Hey @Stefanowitsch I have created an issue for this. So it seems like the following might be the best approach and has two parts. Any of these float your boat? Part 1: Remove alignment rules from MediaHub's stylesheet. The float left/right/centre CSS for images should not be MediaHub's responsibility. Developers who need it add it to their theme CSS, the same way they always have with any ProcessWire site. The end result in a future release will be that MediaHub will strip those rules out and stop trying to own them. I think thats sensible for the first part and more in keeping with ProcessWire's unopinionated output which we all love. Part 2: Only inject the stylesheet when it's actually needed. This is where I'd value developer input, because there are a few ways to handle it and I want to make the right call. A bit of context first: Quote MediaHub video embeds are not simply a URL. When you pick a YouTube or Vimeo asset from the MediaHub library and insert it into a rich text field, MediaHub stores the actual embed player in the page content — a responsive wrapper div containing the iframe — along with a preview thumbnail and usage tracking. The CSS that makes that player display at the correct 16:9 ratio and fill its container properly is what needs to be handled. We also need to keep front-end editing working correctly for editors using ProcessWire's front-end editor on the live site. The four options I'd love your input on are below. Option A:Smart injection (stylesheet, only when needed) MediaHub only injects the stylesheet on pages where a MediaHub video embed is actually present in the rendered content. Pages with no embeds get nothing in their source. Pages with video embeds get one small stylesheet added automatically. No developer action required. Developers who want to manage the CSS themselves — for example, bundling it into their own Sass build — can disable the injection with a single ProcessWire hook in ready.php. Option B: Inline styles, no stylesheet Instead of a separate CSS file MediaHub writes the responsive video embed styles directly onto the HTML elements at render time, similar to how ProcessWire's own video embed module works. Nothing is added to <head>. The styles travel with the content. Developers who want to override the appearance use the pkd-mh-embed-wrap class in their own stylesheet. The trade-off is that this approach involves processing page HTML at render time, which may interact with full-page caching tools like ProCache. Option 😄 No injection, developer-managed MediaHub stops injecting anything on the frontend entirely. The CSS file ships with the module and its path is documented, so developers who use MediaHub video embeds include it in their theme CSS themselves. Out of the box, embeds would display as a collapsed empty box until the developer adds the stylesheet. Somewhat of a broken experience / expectation IMHO. Option D : Auto-inject with a module setting to disable MediaHub auto-injects the embed stylesheet only on pages that actually contain a MediaHub video embed, same as Option A. The difference is that there is a checkbox in the MediaHub module configuration to turn this off entirely. When a developer unchecks it, a note appears in the config screen telling them exactly which CSS file they need to include in their own theme and where it lives. No code or hooks required to opt out. Just a setting. Cheers P
Stefanowitsch Posted 1 hour ago Author Posted 1 hour ago Oh I see four options and have to make a decision? 😄 Well, for me personally option A or option D are the best. I would say that option D is even better! But that depends on the user and the use case. Since I don't use the embed video feature at all I have no need for this stylesheet at the moment.
Peter Knight Posted 47 minutes ago Posted 47 minutes ago 23 minutes ago, Stefanowitsch said: Oh I see four options and have to make a decision? 😄 Well, for me personally option A or option D are the best. I would say that option D is even better! But that depends on the user and the use case. Since I don't use the embed video feature at all I have no need for this stylesheet at the moment. Yes, you're the first to discover the issue so it's your call. 🙂 Actually, I am thinking along the same lines. I'll make it happen and get you an updated version.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now