WIP: Image element styling 'tag'

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

Since upgrading to Bricks 1.9.6 I am seeing classes appearing on all figure/picture elements which are not attached to the actual elements, (‘tag’ styles) are being added to just the first image element and overriding my styles.

I can see Tony (Boldfish) posted ages ago about this, but I’m not sure why I’m seeing this just since upgrading to 1.9.6 - or what the tag is doing, but it wasn’t there on the previous version so it’s a little puzzling.

I am having to create manual style overrides to be more specific than the ‘tag’ ones on all my classes attached to images, in order to get the styles to not be over-riden.

Ref: Uncorking fresh creative notes for an extraordinary local vineyard - White Space Advertising - you can see my styles I have added .tag to the Bricks CSS panel on that URL.

Thanks

Please see:

Screenshot 2024-02-12 at 11.13.58

Hi Rob,
Thanks so much for your report!

As soon as the tag is changed in the image element, the .tag class is added. This has actually been the case for ages, and not just since Bricks 1.9.6. Maybe you never changed the tag before? :thinking:

However, the class is only added if you use the setting in the image element. Alternatively, you can wrap the image manually with a div and change its tag to picture or figure. Although this is an additional step, it allows you to address the tag and the image separately (and you prevent automatically adding the default styles for the tag).

Actually, your class should override the default styles (even without making them more specific), but due to the loading order, it does not do this because it comes before the default styles. Therefore it would be interesting to know if the order is different with e.g. Bricks 1.9.5.

Best regards,
timmse

1 Like

Thanks Stefan, really good reply so thank you.

Yes I think that was my concern, and maybe you’re right there, in that the order on the latest Bricks update means that the CSS rules don’t override the .tag - as I noticed this then changed and applied that to all the instances I had sitewide.

Like I say, I’ve updated this for now to be more specific, but I assume if this is a bug, it can be flagged and resolved for the next update right?

Did you ever look at this at all Stefan? Still finding anything I’m adding CSS wise or styles to any image elements are being over-riden by the .tag class added. Thanks :slight_smile:

Hi Rob,
no… I think I was hoping for your help to check if it was the same in older versions, sorry :smiley:

Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Then, I can look at where the styles come from that are output far too low and possibly reproduce the problem so that it can be fixed.

Sorry once again for the delay!

Hey Rob,
Thanks so much for the login credentials!

As already suspected, it is the loading order that is not correct. We are working on it!

I’m still having this issue in 1.9.9 but only when I add an image to my banner template that I am calling in with the bricks_after_header hook. Then that’s template’s default tag code overwrites my images on the rest of the page.

Hi Joshua,
Welcome to the forum!

Unfortunately, we are still working on this complex problem. The only option for now is to make your styles more specific (using custom CSS, or an !important statement, if possible).

1 Like