Issue Rendering Pairing Images from Metaobjects

[user31]

Dear Shopify Support,

I am encountering an issue while attempting to render images stored in a metafield of type “file” within a metaobject. The problem arises when trying to display pairing images associated with a product, and while the pairing name is rendering fine, the images are not showing up.

Here’s an overview of the situation:

Issue Overview:

• I have set up a metaobject for product pairings, and each pairing has a pairing_image field, which is a media object (file).
• I am using Shopify Liquid to display these pairing images alongside the names, but the images are not rendering.
• The pairing_image field in the metaobject is correctly populated with an image file. I have confirmed that it is a media object, not just a regular file or URL.

What I’ve Tried:

• I have used the media_url filter to resolve the media object, similar to how I successfully render other images (e.g., producer logos).
• I’ve ensured that the pairing_image is a media object, and I am using the correct syntax for rendering it:

liquid

Copy code

<img src="{{ pairing_image | media_url: 'medium' }}" alt="{{ pairing_name }}" width="150" height="150">

• The pairing name renders correctly, but the image remains blank or does not load.

What I Need Help With:

• I need confirmation on whether the pairing_image field is properly handled as a media object in the metaobject.
• Is there something specific I need to check in my metafield setup to ensure it treats the image as a valid media object, and not just a regular file reference or URL?
• Any additional steps to help render images correctly from metafields inside a metaobject.

here is the code im using

Pairs Well With

{% assign pairing_metafield = product.metafields.custom.pairings %} {% if pairing_metafield %} {% assign pairings = pairing_metafield.value %}

{% for pairing in pairings %}
  {% assign pairing_name = pairing.pairing %}
  {% assign pairing_image = pairing.pairing_image %}

  <div class="pairing">
    <!-- Display Pairing Name -->
    <p>{{ pairing_name }}</p>

    <!-- Render Pairing Image -->
    {% if pairing_image != blank %}
      <!-- Use media_url to render the image as media -->
      <img src="{{ pairing_image | media_url: 'medium' }}" alt="{{ pairing_name }}" width="150" height="150">
    {% else %}
      <p>No image available for this pairing.</p>
    {% endif %}
  </div>
{% endfor %}

{% else %}

No pairings metaobject found for this product.

{% endif %}

ill send photos of my metaobjects and metafields next as shopify does not allow more than one image per post

[user31]

[user31]

[user31]

[user31]

[Augustijn_Snoep]

Hi @user31,

I hope you already found out, but have you tried to use the image_url filter already?

Like:

{% assign pairing_metafield = product.metafields.custom.pairings %}

{% if pairing_metafield %}
	{% assign pairings = pairing_metafield.value %}
{% endif %}

{% for pairing in pairings %}
	{% assign pairing_name = pairing.pairing %}
	{% assign pairing_image = pairing.pairing_image %}

	<div class='pairing'>
		<!-- Display Pairing Name -->
		<p>{{ pairing_name }}</p>

		<!-- Render Pairing Image -->
		{% if pairing_image != blank %}
			<!-- Use media_url to render the image as media -->
			<img
				src='{{ pairing_image | image_url: width: '150', height: '150' }}'
				width='150'
				height='150'
			>
		{% else %}
			<p>No image available for this pairing.</p>
		{% endif %}
	</div>
{% endfor %}

If you use the image_url with the correct width and height, the image will probably show up correctly that you have set in the metaobject!

[user31]

hey thanks for the suggestion but nope tried and again it wont work its outputting this

any idea it clealry can fetch the name value, as well as attempts at least to display the file, it accesses the file though it just cant display it even when i tried adjusting adding and all in between to the height and width any ideas at all of what else i can try?

[user31]

and sorry just a thought maybe i was confused are you saying to have the height be the specific measurements of the image im trying to show? i didnt understand it as that at first, but even if that were to work the image its trying to display changes according to the metaobject sekected how would i be able to do this for all 32 images if many of them hve different sizes?