Hi! I’m attempting to recreate a premade section in my theme as a custom section to be able to customize it a bit more than the theme editor UI lets me. The section uses a liquid variable to fetch the section image’s aspect ratio like this: {{ section.settings.image.aspect_ratio }} How could I r…

To fetch or calculate the aspect ratio of an image file from a metafield in Shopify, you can’t directly access the aspect_ratio property as you would with a regular image object in Shopify. Metafields do not inherently provide aspect ratio information. However, you can calculate it using Liquid: Re…

Thank you for your thoughts on this! Just one question regarding this solution, regarding this part in particular: “You might need to store these dimensions as separate metafields or find a way to extract them from the image metadata.” How might I do that?

I would just add the height and width as metafields. So however you created the metafield “product.metafields.custom.product_value_proposition_1”. For example: metafield product.metafields.custom.product_value_proposition_1_height metafield product.metafields.custom.product_value_proposition_1_wid…

Is there a simple way to fetch the width and height of another metafield’s image file like this? The dimensions of the images I’m going to be using can differ and there are hundreds of products in the store. It would be a huge task to manually add these values to each image.

Yeah, you can use javascript to get it. var img = new Image(); img.onload = function() { var aspectRatio = this.width / this.height; console.log('Aspect Ratio:', aspectRatio); // You can now use the aspectRatio variable as needed } img.src='URL_OF_YOUR_IMAGE'; // Replace with your image URL

From what I understand, this snippet would return the aspect ratio of whatever image in question. Unfortunately I’m not proficient in javascript and have no idea how to use it with metafields. What metafield type would I use to run this snippet and how can I dynamically insert the url of my metafie…

Pretty sure this would work for you: {{ product.metafields.custom.product_value_proposition_1.value.image.aspect_ratio }}

I found a solution for this. You can extract the filename from the image_url and then use the {{ images[‘myfile.png’] }} method to get the image object. Here’s a working example: {%- assign featured_image_url = page.metafields.custom.featured_image | image_url -%} {%- assign featured_image_filenam…

Fetching or calculating metafield image file's aspect ratio?

Technical Q&A

leonardo_ardila December 7, 2024, 2:52am 10

This is an amazing workaround, just tested it and worked like a charm while using metafields
Thank you!

Topic		Replies	Views
Aspect_ratio for images that aren't objects Technical Q&A	5	99	March 28, 2023
How to access image metafield in product.liquid Store Design	5	224	January 14, 2023
Access product image metafields in liquid template Store Design	0	67	July 25, 2022
Resize image (file) metafield with the size i choose Store Design design , customizations	3	59	February 17, 2023
Unable to access ProductImage Metafield with Liquid Store Design	2	61	June 7, 2022

Fetching or calculating metafield image file's aspect ratio?

Related topics