I’m looking for a solution to attach text fields to images. In my app, each item has multiple images grouped in an image array, and I need to attach a description to each image (the need to keep this dynamic and allow for data updates precludes a Cloudinary solution). I know that I could in theory use a related tab, and create an additional card collection to pull pertinent images, but due to the number of rows required, that is pretty cumbersome. Is there a way to do this that I’m missing?
It’s a long way to go, but maybe you can have an array of text descriptions that matches the index with those images, and then use JavaScript to create a Cloudinary URL for each of them.
Finally split the Cloudinary result into an array and use it in the image component.
Do you think it can work with your setup?
I think that could get me at least most of the way to what I’m hoping for (with a bit of additional study in the cloudinary integration). However, as this is a reference database, I would love to have the text be selectable for copy/paste, and to be on-the-fly editable by users with that access.
Yeah I think this part is tricky. If you use Cloudinary, the text has been “hard-coded” into the image so there’s no native way to copy it. Editing will be tricky as well if you don’t plan to have each image on their own row.
Maybe the only way is to have a pair of columns for each combination of image and description. I don’t like that database design at all, though, since you have an upper limit of how many images & descriptions you can have.
Then, even with that, you have to use buttons to move back and forth between the images to be able to know which image is being shown on the screen, so you can let the user copy the related description.
Yeah, that’s one of the big reasons I’m shying away from the Cloudinary solution.
I’m OK with having a set limit of images per row (I can always increase that number if needed), but the ability to scroll through the images and text description/captions at the same time should be a basic functionality thing.
Is there potentially a way to view or force visibility on the alt text field for images? If so, I could always just have my text input field in the item editor update the alt text.
I’ve read through this thread and the responses from @ThinhDinh, and I’m struggling to understand why Cloudinary can’t be the solution here?
It’s fairly trivial to dynamically overlay text on an image with Cloudinary, and that text can be user supplied if necessary. Perhaps I’m not understanding the problem statement.
Do you have maybe a visual representation of the user experience you’re after?
I think having the text be editable is the doable part, having them be able to be copied is the one where I haven’t dived into. Maybe an index user-specific column so they can move back and forth between the images, instead of the image component, so the text can be referenced some how?
Or maybe some complex JavaScript/regex to extract the text itself from the Cloudinary URL?
I think that’s the bit that I’m not understanding. What needs to be copied? The text? But if the user is supplying the text, why is that necessary?
Yeah, it’s the text. I can only assume that the images and captions are created by one user, and the captions can be copied by other users.
Sorry about the lack of clarity here. I’ll have a subset of users who will be updating text content (explaining what traits the images are reference for), and another subset who will be using the app for reference, and will likely want to copy/paste the text into their own notes. Does that help?
Really, I’m just looking for a way to have captions for images in an array (click on the forward/back button in the array image component, and the appropriate image + caption text shows). Since that functionality is not natively built in to the current version of Glide (that I can find), I’m looking for a workaround that retains the text nature of the text (non-baked into the image)
This is not what I’m looking for stylistically, but this is the general concept. Each image has text associated (as a text element, not referring to the baked-in overlay), and scrolling through the images also scrolls through the text.
I think I’d be inclined to explore the option of storing the image URL’s together with the text descriptions in a JSON structure, something like this:
[
{
"url": "https://.....",
"text": "the quick brown fox"
},
{
"url": "https://....",
"text": "jumps over the lazy dog"
}
]
You could use a Helper table to unpack that, overlay the text on the image, and build an array for use in an Image component. As far as copying the text goes, you could use a Copy to Clipboard action on the image itself.
A little bit of work to setup, and you’d need to dual purpose the Helper Table for managing the JSON, but would be doable, I think.
Interesting… how would this end up displaying in an app environment? Guessing that the JSON would be in a Fetch JSON column (forgive my ignorance here, I’m not familliar with JSON)
No, the JSON would just be stored in a text column.
However, I was just having a quick fiddle with this and now I think I understand the challenge with copying the text. The problem is there is no easy way to keep track of where you are as you’re clicking through the images.
So now I understand the earlier comment from @ThinhDinh:
This is probably the solution. Unpack the images into rows and set up an action that steps backwards and forwards through the rows. Then you can keep track of where you are.
1 Like
Got it, at least as a concept that makes sense!! Will have to dig into actually making that happen, and see if any other issues come up (I’m pretty new to Glide at this point, but loving the functionality, quirks like this aside).