Fetching or calculating metafield image file's aspect ratio?

[Cashimir]

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 recreate this liquid functionality for a metafield image file?

I have an image file metafield product.metafields.custom.product_value_proposition_1 .

Unfortunately simply using the same format as the original liquid ( like so: {{ product.metafields.custom.product_value_proposition_1.aspect_ratio }} or so {{ product.metafields.custom.product_value_proposition_1.image.aspect_ratio }} ) does not work.

How might I be able to fetch or calculate the aspect ratio of my metafield?

[SomeUsernameHe]

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:

Retrieve the Image Dimensions:
First, get the width and height of the image stored in the metafield. You might need to store these dimensions as separate metafields or find a way to extract them from the image metadata.

Calculate Aspect Ratio:
Once you have the width and height, calculate the aspect ratio using Liquid. The aspect ratio is the width divided by the height.

{% assign width = product.metafields.custom.width %}
{% assign height = product.metafields.custom.height %}
{% assign aspect_ratio = width | divided_by: height %}

[Cashimir]

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?

[SomeUsernameHe]

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_width

these metafields will hold the values for you to calculate. 

[Cashimir]

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.

[SomeUsernameHe]

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

[Cashimir]

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 metafield image file into this snipper?

[brant]

Pretty sure this would work for you:

{{ product.metafields.custom.product_value_proposition_1.value.image.aspect_ratio }}

[MuslimIndoMode]

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_filename = featured_image_url | split: '/' | last | split: '?' | first -%}
{%- assign image_object = images[featured_image_filename] -%}
{{ image_object.aspect_ratio }}

[leonardo_ardila]

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