How to Display Images on Dynamic Blocks Using Google Drive URLs

[sveta.ohanyan]

Many of you know that after recent Google changes, the old format of image URLs hosted in Google Sheets and mapped to the image fields on Softr blocks no longer worked. However, we have a workaround. It turns out there is a URL format that works.

The image URLs must be in this format: https://drive.google.com/thumbnail?id=xxxxxxxxxxxxxxxxxxxx&sz=s4000, where instead of x’s, you need to replace your image ID.

To illustrate better, here is an image URL that I’m going to use: Boxlab10.jpg - Google Drive.

The image ID in this URL is what is between /d/ and /view: 1LLYIFs5eh9deM09d6JeVMqArrRZBh0aZ. So the URL that I need to use for this image will be https://drive.google.com/thumbnail?id=1LLYIFs5eh9deM09d6JeVMqArrRZBh0aZ&sz=s4000.

I will then add this image to my Google Sheets base and map it to the image field where I want the image to be visible.

[Han]

This is great, but do you have a way of showing images hosted on the internet in the Softr interface by providing the URL? In other words, show the images by providing the URL to them? It seems that in the Softr database the images must be provided as a File field.

[sveta.ohanyan]

Hi @Han. You can store the image urls in a URL field in Softr database and map that URL field with an Image field in your Softr blocks and it will still work.

But if you are using Google sheets as a datasource, this option will not work.

[Han]

Thank you. I will try this.