Liquid、JavaScriptなどに関する質問
現在、「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>
お手数おかけいたしますが、お知恵をお借りできたら幸いです。
よろしくお願いいたします。
>これだと画像へのパスしか出力できません。
と書きましたが、imgタグとして出力されていました。
失礼いたしました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024