「Advanced Custom Fields」で登録した画像を、パスだけではなく、「article.image」のように出力する方法はないでしょうか？

日本語 ディスカッション 技術的なQ＆A
1

現在、「Advanced Custom Fields」というアプリをいれ、カスタムフィールドを追加し、コレクションに画像など色々情報を追加しております。

その出力方法は、
{{collection.metafields.profile_img.profile_img}}
のようになると思いますが、これだと画像へのパスしか出力できません。

既存のテーマをカスタマイズしているのですが、画像に関しては「responsive-image.liquid」というファイルで処理されており、カスタムフィールドの画像も同じようにそちらを通して使用したいのですが、うまく表示させることができずにおります。

上記の「responsive-image.liquid」を通して画像を表示する場合、
{% include ‘responsive-image’ with article.image, alt: article.title, crop: ‘center’, force_height: 400 %}
このようになっております。

参考までに、以下が「responsive-image.liquid」の内容です。

{% comment %}
    Use this snippet to add a responsive image to page.

    Specify Shopify image you want to make responsive in the "with" parameter (see examples below).

    You can use following variables to customize the image
    * default_size: size of placeholder image until full image is loaded (default: '150x')
    * class: additional classes to be applied to an image
    * alt: alt text for the image
    * props: additional properties for the  tag (data-, styles, id, etc.)
    * crop: use crop to specify how the image should be cropped when it's too big
    * force_height: number of pixels the image should have vertically, without stretching
    * force_aspect: override image aspect ratio (usually set to 1 to force square images)
    * allow_strech: allow upscaling the image to fit container (disabled by default)

    Usage:
    * Define variables inside the include tag (preferred):
    {% include 'responsive-image' with product.image, class: 'product-image', alt: 'A simple product', default_size: '300x', props: 'data-id="1"' %}

    * Define variables before including this snippet
    {% assign class = "product-image" %}
    {% assign alt = "A simple product" %}
    {% assign default_size = '300x' %}
    {% assign crop = 'center' %}
    {% capture props %}
        data-id="1"
    {% endcapture %}
    {% include 'responsive-image' with product.image %}

{% endcomment %}

{% if default_size == blank %}
    {% assign default_size = '150x' %}
{% endif %}

{% if crop == blank %}
  {% assign default_src=responsive-image | img_url: '1000x1000' %}
  {% assign responsive_img_url = default_src | replace: '_1000x1000.', '_{width}.' %}
  {% assign src=responsive-image | img_url: default_size %}
{% else %}
  {% assign default_src=responsive-image | img_url: '1000x1000', crop: crop %}
  {% assign responsive_img_url = default_src | replace: '_1000x1000_', '_{width}_' %}
  {% assign src=responsive-image | img_url: default_size, crop: crop %}
{% endif %}

お手数おかけいたしますが、お知恵をお借りできたら幸いです。
よろしくお願いいたします。

2

＞これだと画像へのパスしか出力できません。

と書きましたが、imgタグとして出力されていました。
失礼いたしました。