WIP: External files: repeated image default styles

Browser: Chrome 127.0.6533.89
OS: Windows

Hi bricks team,

If we use the image element in the query loop, there are a lot of broken styles in the css section. But if the image is outside the query loop, the desired problem does not exist. Is this normal, or is there a problem?

Screenshot

Hi Hosein,
Thanks so much for your report!

As far as I can see, it’s unrelated to the loop. If you add an image to your header and/or footer template (or any other template using the template element on that page) and change its tag to, e.g., “figure” and do the same within a page, you’ll get this, using external files.

I agree it’s not optimal and created an improvement task for this. We’re also working on some other reports about “duplicated” CSS rules. All in all, it’s enormously complex…

Best regards,
timmse

thank you @timmse, Good luck🥂

With my reported duplicate, you mentioned it’s related to the figure tag. You said that changing to inline styles fixes the issue, but of course, that slows the site down without page specific css. Is there a solution that you can recommend, in the mean time, where we can still use figure tags and the external files? Just wondering if there is some CSS that you can tell us to use, that will “fix” this until a formal release addresses it?

The easiest way is to make your class a little more specific by chaining it with .brxe-image, or by adding a wrapper (div) to the image.

.cp-vid-content-48_bg-img.brxe-image { ... }