Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Using Balzy module with Gin theme, producing media image rendering issue. Due to conflict in css, image is visually hidden in media gallery with grid format.
Steps to reproduce
- Enable Blazy module with Gin admin theme
- Visit: /admin/content/media-grid
Proposed resolution
I see, Blazy has added conflict css with bootstrap with is giving issue with GIn theme
/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */
.blazy .media {
display: block;
position: relative; //This css os conflicting with the Gin theme, added to fix conflict for Bootstrap css
}| Comment | File | Size | Author |
|---|---|---|---|
| #10 | media-css-fix-3285374-6.patch | 388 bytes | AgathaCrystal |
| #5 | media-css-fix-3285329-5.patch | 301 bytes | djsagar |
| |||
| #4 | media-css-fix-3285329-1.patch | 405 bytes | vinitk |
| #2 | Screenshot 1944-03-23 at 15.41.41.png | 2.55 MB | vinitk |
| #2 | media-css-fix-3285329-1.patch | 560 bytes | vinitk |
Comments
Comment #2
vinitk CreditAttribution: vinitk at OpenSense Labs commentedUpdated css to fix conflict with Gin theme.
Before
After
Comment #3
gausarts CreditAttribution: gausarts commentedThank you.
IMHO, supporting or playing nice with themes other than the core default one is more a support or feature than a bug. Otherwise considering thousand themes would be a terrible work for any projects :)
Also I would not recommend letting Blazy enter admin pages for reasons like this. Blazy is crafted as a frontend module.
It has even an option to disable its own backend stylings at Blazy UI, leaving it without styles at all.
Unless it is elaborately targeted for admin pages like Slick Browser where it is responsible to address some compatibility with some major themes.
As noted in the doc comment, that CSS rule is required to play nice with a frontend theme like Bootstrap. If gone, it might introduce such compatibility issue.
However I just checked, the conflict is "position: relative" so it is the only one to be removed. The other rule is required.
I haven't rechecked any potential regressions with that change, so I am leaving it for others till I can manage to get back to it.
Feel free to update your patch as noted above for reviews.
Comment #4
vinitk CreditAttribution: vinitk at OpenSense Labs commented@gausarts yes.. removing only "position: relative" will work. Adding the updated patch.
Comment #5
djsagar CreditAttribution: djsagar at OpenSense Labs commentedJust re-rolled the patch.
Comment #7
gausarts CreditAttribution: gausarts commentedI don't know if this would have by-product issues.
Feel free to re-open if any.
Committed. Thank you for contribution and patience.
Comment #9
esteban.arias CreditAttribution: esteban.arias at ParallelDevs commentedThis issue is still happening.
Comment #10
AgathaCrystalFirst time creating a patch - I tested it manually on d10 and d9, but I couldn't figure out, how to properly test it.
Edit: This patch only works with the standard color theme.