Fetching or calculating metafield image file's aspect ratio?

Cashimir
Excursionist
18 0 4

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?

Replies 6 (6)

SomeUsernameHe
Shopify Partner
455 49 83

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 %}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Cashimir
Excursionist
18 0 4

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
Shopify Partner
455 49 83

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. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Cashimir
Excursionist
18 0 4

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
Shopify Partner
455 49 83

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
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Cashimir
Excursionist
18 0 4

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?