WIP: Add Image To ::before Psuedo Class

Bugs
1

Hey All,

Not sure if I am doing it wrong or it’s a bug, but I am looking to add an image before a rich text element (quote).

So I selected the rich text element added ::before which then revels the content box, inside the content box i put the following:

url(/wp-content/uploads/2022/05/pink-quotation-mark-top.png);

But it does not show up inside the builder or on the frontend. :face_with_raised_eyebrow:

Should the above have worked or do i need something else?

Many thanks!

2 Likes
2

Hey @Michael , you are right it doesn’t work in 1.4 RC :cry:

1 Like
3

Thanks @HeroRox for confirming, I will move it over to bugs for them to have a look at :slight_smile:

1 Like
4

This is normal, you can’t use image in ::before content in CSS, you need to set ::before properties like this:

  • empty content ("")
  • background color/image/etc.
  • width and height
  • display block or inline-block for same line

image
image1138×537 122 KB

image
image365×756 16.3 KB

That’s how I usually do in pure CSS and it works in Bricks :slight_smile:

3 Likes
5

Thanks @yan :+1:

I followed this information on CCS Tricks which is usually legit, but he/she the value for content can be an image “” ::before / ::after | CSS-Tricks - CSS-Tricks.

But even trying an ::before with “” and just having a BG color in Bricks background setting with a fixed height and width is not showing :upside_down_face: :laughing:

That being said I am sure it is 99% user error (as is usually my case) :rofl:

p.s. i just went back to my trusted advisor Kevin Powel :stuck_out_tongue_winking_eye: and it is possible to add an image inside the content CSS Before and After pseudo elements explained - part two: the content property - YouTube

6

Can’t you just drop the html img tag into the Text tab of the Rich Text editor? Works for me.
Alan

1 Like
7

Oops, my bad, I didn’t know that pseudo class content could actually handle an image by itself!

As for your last problem, maybe you forgot the display :wink:

8

So I tried and the issue seems to be the double quotes that are added systematically around the content input text:

image

@timmse, it looks like you need to NOT add double quotes and let us do it if needed (empty content or string).

3 Likes
9

Yes @yankiara perfect, I dont know why I didn’t inspect it, but yes, it is acting like a string so displays the text and not the URL, if I remove the quotes in dev tools then it displays

1 Like
10

Hey @alan you are most certainly correct, I could but i was just playing and improving my use of CSS and fortunately, my playing has been rewarded with a bug find :laughing: and that it was one of the times i was 1% right :stuck_out_tongue_winking_eye:

2 Likes
11

Hi Michael,
Thanks for your report!

To be honest, I didn’t know until now that you can insert an image directly into content - like @yankiara, I always went the background-image route. Well, you never stop learning :nerd_face:

We put the quotation marks automatically because they are often forgotten - and without them, little or nothing is usually displayed. We’ll see how we can handle this in the future.

Best regards,
timmse

2 Likes
12

Maybe a blue box warning to explain how it works?
Or better, a switch with different inputs for each use case.

13

To true! Yesterday I was able to put my velcro shoes in the bin…I learnt to tie laces :stuck_out_tongue_winking_eye: :rofl:

With the current setup you are not able to use open-quote / close-quote as again it is not a string. Something like @yan mentioned with regards to a switch would be welcomed!

1 Like
14

Just bumping this up, as I see, it didn’t make it into 1.5b (i think). It may have done but maybe it has been overshadowed by the current Pseudo element bugs of 1.5b

15

Just a little PUSH to this 3D, double quotes still on, maybe a little checkbox with ‘Not a string’ will be enough.

16

Another bump as I am trying to do this and it is still adding the quotes incorrectly.

I think the answer maybe for bricks to not auto add the quotes so we can add our own content how we see fit. If users have any errors with content not showing then they will be able to Google and see that they need to add quotes as per the standard usage.

There could also be a tooltip stating this and/or linking to an academy page and a switch to turn auto quote add on/off in settings

17

Bumping this since I’m having issues with this as we speak.

18

i stopped using the pseudo box to add these and wrote my own css in the custom css box on the element.

this is the best workaround as you don’t have all the problems that come with the pseudo box

1 Like