Display image from metafield URL

[Uni-Trend]

 Hi,

Does anyone know if it's possible to put a URL to an image in metafield (type: URL), and have the image display?

Instead of uploading the image to Shopify, I want to use a CDN and just pull the image from there.

For instance, I created: custom.image_10
This is the URL: https://res.cloudinary.com/uni-t/image/upload/v1709933090/Shipped_in_the_USA.jpg

I created 10 different image placeholders, not all products will have 10 images. I may have more or less for a given product. 

The idea behind this is to replace the Shopify product image display with a slider/modal lightbox based on hosted images.  

The logic would be to cycle through the list and put small-sized (via CSS) images in the slider, then have them be clickable to be activated and pop up into a lightbox view. 

Ultimately, I would like to have images in one slider and videos (hosted on YouTube) in another, below the images. I would assume the mechanism would be the same. 

TIA for reading

[kaiyaa]

Hello @Uni-Trend 

Can you please explain this senecio what you want to achieve with this?

[Uni-Trend]

The scenario would be a replacement for the Product Image module. 

Instead of using Shopify to define and store what images you show, you can use a 3rd party host to keep your images. This way, if you want to update an image, you just upload a replacement image with the same file name to your image host and then any product that referenced that image  its metafield would be instantly updated. 

Suppose a series of Metafield type:URL like
custom.image_1
custom.image_2
custom.image_3
...
custom.image_X

The product image replacement would then allow me to define what images go into the slider. 

Product Image Slider: custom.image_1, custom.image_2, custom.image_3, ... custom.image_X (whatever you highest defined field is)

If there's an empty field, it would be skipped and the next image displayed. To keep things neat, I use numbers 1, 2, 3, and 4 for my images to identify the view of the product. Product_A_1 is front view, Product_A_2 is right view, Product_A_3 is left view, Product_A_4 is back view. Not all products have 4 images. Sometimes a product may have 1, 2, 3, 4, others, 1, 2, 4, others 1, 3, 4. 

If one of the product image metafields is blank, it shouldn't show an empty placeholder, just move to the next image until there are no more. 

Does that make sense? 

[kaiyaa]

Yes