FROM CACHE - jp_header

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

k2b8692
観光客
18 0 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 <img /> 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 %}

<div
    {% if force_height %}style="height: {{ force_height }}px"{% endif %}
    class="lazyload-wrapper{% if force_height %} lazyload-force-height{% endif %}"
>

<noscript>
    <img
        class="{{ class }}"
        src="{{ default_src }}"
        data-sizes="auto"
        {% if alt %}
            alt="{{ alt | escape }}"
        {% endif %}
        {{ props }}
    />
</noscript>

<img
    class="lazyload {{ class }} {% if crop %}lazyload-crop-{{ crop }}{% endif %}"
    src="{{ src }}"
    data-src="{{ responsive_img_url }}"
    data-sizes="auto"
    data-aspectratio="{% if force_aspect %}{{ force_aspect }}{% else %}{{ responsive-image.aspect_ratio }}{% endif %}"
    {% if force_height %}
        data-force-height="{{ force_height }}"
    {% endif %}
    {{ props }}
    {% unless allow_strech %}
        style="max-width: {{ responsive-image.width }}px; max-height: {{ responsive-image.height }}px"
    {% endunless %}
    {% if alt %}
        alt="{{ alt | escape }}"
    {% endif %}
/>

</div>

 

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

1件の返信1

k2b8692
観光客
18 0 1

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

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