Make an image with an 'X' over it - Rich Text

Hey guys!

I need to make an image that has a big, red, X over it. I figure this will need to be made with rich text. The image URL will have to depend on the logged in user’s profile picture, which means this will have to be stored in a template column.
I was looking at this StackOverflow post, but it won’t work.

Does anyone have some glide-friendly CSS for this?

Thanks,
@Pablo_books

Have you looked at Cloudinary? Dead simple for that sort of thing.

1 Like

Yes, would just be a fetched layer on top of the image, agree it would be simple and I can code it for Pablo later today in my time (it’s 5am here).

Ah, so I would add two diagonal line overlays. Nice!

2 Likes

Have you been able to figure it out? I was about to trial a Cloudinary solution.

Not exactly - I’m stuck on how to upload the diagonal line images.
What’s an image ID?
image

Here’s a working version.

Sample image:

image

Template:

https://res.cloudinary.com/***/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS9HdmFtR20xLnBuZw==,g_north_east,w_0.07,h_0.1,fl_relative/PIC

***: Your Cloudinary account name
PIC: The base image

I fetched a transparent icon I found on the Internet.

3 Likes

Another sample.

1 Like

Why not just jump into sketchbook with your images and make a duplicate image with the X (Sketchbook is free). It allows you to put a “X” of any font, color or size in a layer directly over your images. Then have both listed and if is true then no x image and x otherwise?

I did it for this game:

1 Like