Is there a way to get the image URL since it is stored in Glide?
It worked when I exported the table and inserted in manually.
yes, check your table, switch column from image to url
1 Like
Yes, you already have a column with the url, correct? Just build the template using that image column. Images aren’t stored in the table. Only the url to the storage location of the image. An image type column will render the image instead of showing the url, but it’s still a url underneath.
1 Like
Yeah that makes sense, I just wasn’t thinking about the URL being what’s actually stored there. Okay, so that part worked, thanks!
My only other issue is that image still doesn’t display properly in the “Card” view on the overview page. Any ideas for that?
sorry I don’t do Pages, only Apps so I can’t help much here.
Do you mean in the collection?
Glide optimizes images using cloudinary. In most cases, this is a good thing, but it appears that it doesn’t play well with Glide if the original SVG size is small. I think I have a solution that might work though.
Create a javascript column and place this script as is in data portion of that javascript column. Then set the p1 parameter to your original image column. This will create a data url from the image. You’ll notice in the javascript that I’m setting the the width and height to 500, so it renders much better on the screen. You can get rid of the template and rich text component you created earlier and just use and image component. Just point the image setting in any components and lists to the javascript column. (I think since it’s a data url, it doesn’t pass through cloudinary to get optimized, so it retains it’s original form.) This may cause images to load a little more slowly when opening the page, since it has to convert all of those images in real time.
return getDataURL(p1)
function getDataURL(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = 500;
canvas.width = 500;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL();
resolve(dataURL);
};
img.onerror = function () {
resolve(url);
};
img.src = url;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = url;
}
});
}
4 Likes
nice script!
hehe, the gift that just keeps giving 
1 Like
Hehe, tell me about it. Data for the win!
1 Like
Thanks for trying to find a workaround for this. Unfortunately the JavaScript doesn’t quite produce the desired results. It is a little better than how Glide is handling the SVG by default, but it’s still not displaying as clear of an image as the actual SVG. The HTML image tag does work perfectly to display it when it’s in a rich text component. One other odd thing about the JavaScript is that when it’s viewed from mobile, the image is tiny.
Is this worth reporting as a bug, or will Glide always use some sort of optimization that’s not going to allow this to work?
If the SVG file were generated differently, would it make any difference?
No, Glide is not using actual SVG, just a generated image from SVG
I think the JavaScript converts it to a PNG, so no it’s not perfect and not vector scaled. You could play with the sizes in the script, but that’s about it. The script was just something I found quickly with a google search. Maybe there are better options out there.
I think a data uri would be a good option. If you could get all of your images converted to data uris, or find a different script that still returns an SVG data URI, then I think it would definitely work since it would skip the optimization.
Otherwise, it might be worth reporting to Glide. I personally don’t see any reason why they need to optimize SVG images.