Batch Transfer of Image URLs from a G-Sheet

[02hoya]

I’m working on a webapp that requires pulling in + optimizing images to repeating groups in Bubble. These are currently uploaded into my database from a list of image URLs in a Google Sheet, uploaded as “image” data type. However, on my app, these images aren’t dynamically processed / optimized… so in my repeating groups / “search” page, these images are “squished” down – or stretched when in my individual product pages. I have tried to use Bubble’s “:Process with Imgix” tag on the dynamic image field, but it doesn’t work and simply says “Imgix options are only applied to images hosted on your application’s storage.”

My question is whether any Zeroqode (or other) plugins can help me with this “batch transfer” directly into Bubble, or into another image hosting service like imgIX, Kraken.io, or something else? Would the “Convert URLs to Files” Plugin work? I need to upload hundreds of image URLs from a G-Sheet… is there any tool out there that can upload and store all of these URLs so that they can be optimized for Bubble?

Otherwise, has anyone worked through this before, and provide some pointers?
Thanks for any help.

[alexandru]

Hi @02hoya,

Thanks for reaching out. Please let us investigate then get back to you asap!

Best,
Alex

[alexandru]

Hi @02hoya,

I’m afraid this plugin:

@02hoya

Would the “Convert URLs to Files ” Plugin work?

Will not help in this case, unfortunately. But if you say you have your images saved in your Bubble database and pulling them in a RepeatingGroup element, you should be able to adjust their view with Bubble’s embedded features.

Could you please share screenshots of your image element from RepeatingGroup (with all its fields and checkboxes visible), as well as preview results. We’ll get back to you with another reply asap!

[02hoya]

Thanks Alex. Here are some screenshots showing the problem I’m still trying to work through:
a) In the 1st “Restaurant Cards” screenshot it shows my Bubble app that has individual “cards” that can be clicked on to view more info on restaurants in my database. Each restaurant in this case has a primary image… but the main problem is that the images are “squished down”, and Bubble is not optimizing or cropping based on the size. They simply look warped on these cards, which is a key part of the webapp:

b) The 2nd screenshot shows my Bubble Editor, which pulls the image from my database. I have it “Stretch” rendering so that it fills out the card space, otherwise it looks strange with different image sizes in each card. The “processed with Imgix” tag does not appear to do anything.

c) 3rd screenshot shows how I’m setting up my database. I upload the data from a Google Sheet, for which I have set each restaurant’s primary photo link as an “image” type within the database (see the right side).

d) 4th screenshot shows my Google Sheet, which has all of the data and links of primary photos (under “Photo” column for each restaurant. This GSheet is uploaded to my database – I currently do it manually through the “upload” button in the “App Data” tab in Bubble’s Data section.

Again, I am trying to figure out how I can get these image links uploaded from a Google Sheet so that when they appear in my “restaurant cards” from the 1st screenshot, they’re not warped or squished down, but rather optimized/cropped for the right right size of the element in my webapp.
Any help on this is much appreciated!

[alexandru]

Hi @02hoya,

Thanks for reaching out. Could you please share screenshots of your Imgix processing fields so we can see all of them, as well as your Image element settings. We’ll check on it and get back to you asap.

Alex

[02hoya]

Not quite sure if this is what you’re asking for, but here are a couple screenshots:

The first one is of the Imgix processing fields when the RG pulls in the header photo for the restaurant card:

Don’t know what you meant by image element settings… but the second shows how in my data types, photos are set as the “image” type.

Last screen shows how I’m pulling the data for each item (in this case restaurant) into my RG. It searches for data type “Events” in my database (“Restaurant” is an example of an “Event” datatype) and has constraints on the search based on city and category dropdowns.

Is that what you are looking for, or can I provide something else? Happy to take screenshots for whatever is needed to diagnose it.
Thanks Alex

[alexandru]

Thanks @02hoya for feedback.

We’ll check on it and get back to you asap!

Alex

[alexandru]

Hi @02hoya,

Unfortunately, it is not possible to accomplish what you’re looking for. The best solution for keeping the image size and the product card size so it fits with no problem of rendering - setting up image size at the upload stage.

Otherwise, the only way to make them look the same way as uploaded - to keep the image proportions but it is going to have different image sizes in your product cards. However, they will not be stretched or squished but keeping their original view.

As a workaround solution, you can make these cards to open in popup and show the full image(s) in a slider, but for product cards just crop it a bit.

Hope it helps!

[02hoya]

I finally figured out how to fix this…
The issue was the that element I was using in repeating groups was an Image element, where you can only rescale or stretch the underlying image url.
The solution to it was to change the element to a Shape instead! Once you do that, you can select the “background style” to be an image, and then can select “center the image” and “crop to fit the element size”. It’s sort of ridiculous that you can’t do all this with the image element, but so it goes…
I’m adding a picture to show the settings for the Shape element. This form post also helped tip me off to this feature: Resize Image to Fit in Image Element - Need help - Bubble Forum

[alexandru]

Thanks @02hoya for feedback.

I’m glad it is finally working on your side as well!

Best,
Alex