I’ve seen quite a few images with a text overlay Q&A that mentions Tiles. I can’t find this feature in Glide Pages! How can I do it?
I want to create a background image and have dynamic text added on top of the image.
“Tile” with text overlay was in Glide Apps, not Pages. If it’s a do filar image, you can always use a container with an image background and fill it with a text component. Otherwise, if you need image with text overlay for every image in a collection, might want to look into Cloudinary:
Is there a way to put this container of image within another container? The image is supposed to be displayed alongside a form on a 1:1 display
Not yet. Containers within containers isn’t possible. If you’re on the business plan, you can use CSS to add images and backgrounds to any component.
2 Likes
Could you please show me how to do this in 2023 as many features both in glide and cloudinary have changed
Image with any type of overlay (text, favorite icon) is not available in Glide anymore (Nov. 2023). It might make a comeback, but for now it’s not available.
How about using cloudinary?
In the past many have used Cloudinary to edit images on the fly. It probably still works fine. Have you tried?
I personally don’t use Cloudinary, I like to stick to native features as much as possible.
Whatever text information I would have liked to include in an overlay I try to include instead in the name, description and meta fields in the collection. The favorite action can be replaced by an collection item action or perhaps by including a white heart emoji 
and red heart emoji 
in one of the text fields with a template column.
I saw @Robert_Petitto had this idea on chat component by adding an image next to a text using html. is this applicable so I could may be add a small image next to the text. Maybe if rich text would support it
1 Like
Certainly possible. Here’s an example:
<div style="position: relative; display: inline-block;">
<img src="[img]" alt="[text] image" style="max-width: 100%; height: auto;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; padding: 20px;font-size:20px;border-radius:10px;">[text] </div>
</div>
1 Like
@Robert_Petitto problem solved
Is there a way I could display images horizontally using the rich text whereby they would auto scroll. Or anything close to that as I can see html can do something related to that if only the rich text component would accept it
Is it possible to add overlays like you did using cloudinary. If it is I would be greatful if you would make an update to the tutorial made some years back as there are so much that has changed. Your effort is really appreciated.
Here’s the relevant article on Cloudinary.
1 Like