title: How do I reference and render a metafield as an image on Shopify Collection Pages?
body: <p>I would really appreciate some advice on this issue:</p>
  <p>We want a 4:1 collection header image on all of our collection pages for desktop.  1:1 is acceptable for mobile.  I have determined we will need 2 different images for each collection page (desktop-only and mobile-only).  Shopify collections do not let you upload or access more than 1 collection image.  Therefore, I have decided to use the collection image as the 4:1 desktop image and am relying on a metafield (datatype is a url string) for the mobile-only collection image.  I am struggling to reference the metafield correctly and get it to render as an image for mobile.</p>
  <p>Original Image sizes:</p>
  <p>4:1 - 2048px x 512px</p>
  <p>1:1 - 1024px x 1024px</p>
  <p>Here is the code in the section main-collection.liquid:</p>
  <pre><code>{% if header_image_enabled %}
    &lt;div class=&quot;page-header page-header--with-background page-header--background-desktop-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper&quot;&gt;
      &lt;div class=&quot;rimage-background lazyload fade-in&quot;
        data-bgset=&quot;{% render 'bgset', image: collection.image %}&quot;   
    data-sizes=&quot;auto&quot;
        data-parent-fit=&quot;contain&quot;&gt;&lt;/div&gt;
    
      &lt;div class=&quot;page-header-background-mobile-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper&quot;&gt;
      &lt;div class=&quot;rimage-background lazyload fade-in&quot;
        data-bgset=&quot;{% render 'bgset', collection.metafields.assets.image2 %}&quot;   
    data-sizes=&quot;auto&quot;
        data-parent-fit=&quot;cover&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Here is the current code for snippet bgset.liquid:</p>
  <pre><code>    {%- if image != blank and image != collection.metafields.assets.image2 -%}
    {% if image.width &gt; 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h
  {%- endif -%}
  {%- if image != blank and image == collection.metafields.assets.image2 -%}
      {% if image.width &gt; 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width &gt; 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {{ image | img_url: 'medium' }} {{ image.width }}w {{ image.height }}h
  {% endif %}  
  </code></pre>
  <p>Again, collection.image is rendering in the Header for desktop, but collection.metafields.assets.image2 is not rendering as the Header image on mobile, which is what we want.</p>
  <p>Thank you!</p>