shopify 从 liquid 文件调整图像大小时出现问题
Having a issue with shopify resizing image from liquid file
您好，我正在尝试编辑图像，使其更小或自定义尺寸，但我不熟悉液体。谢谢你们的帮助。我添加了一些代码。我认为它默认为一定百分比但不确定。如果你们需要我提供一些额外的代码或信息，请告诉我。
// settings_data.json file
"index-newsletter": {
"type": "index-newsletter",
"settings": {
"title": "Newsletter",
"richtext": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.<\/p>",
"width": "full",
"flex_align": "align--middle-left",
"text_color": "dark",
"height": "screen-height-one-third",
"bg_image": "shopify:\/\/shop_images\/Grazioso_Logo321321_db2a67b3-d13f-4d64-a73d-c82f176fd6a5.png",
"overlay_opacity": 50,
"overlay_color": "#ffffff"
}
},
<!-- /sections/newsletter.liquid -->
{%- assign img_url = section.settings.bg_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<style>
{%- if section.settings.text_color == 'white' -%}
.index-newsletter-{{ section.id }},
.index-newsletter-{{ section.id }} .input-group.newsletter-form input { color: #fff; }
{%- endif -%}
</style>
<div class="index-newsletter index-newsletter-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="newsletter">
<div class="wide-image js-overflow-container {{ section.settings.height }}"
data-aos-duration="500"
data-aos="fade-up">
<div class="hero__content__wrapper hero__content--transparent {{ section.settings.flex_align }}">
<div class="hero__content hero__content--{{ section.settings.width }} js-overflow-content">
<div class="newsletter__content">
{% if section.settings.title != '' %}
<h5 class="newsletter__title">{{ section.settings.title }}</h5>
{% endif %}
{% if collection.description != '' %}
<div class="rte">
{{ section.settings.richtext }}
</div>
{% endif %}
<div class="newsletter-signup">
{% include 'newsletter-form' %}
</div>
</div>
</div>
</div>
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
<noscript>
<img src="{{ section.settings.bg_image | img_url: '1440x' }}" alt="{{ section.settings.bg_image.alt | default: collection.title }}" class="responsive-wide-image"/>
</noscript>
{% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Newsletter",
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"id": "richtext",
"type": "richtext",
"label": "Subheading",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers)."
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "full",
"options": [
{ "value": "full", "label": "Full" },
{ "value": "default", "label": "Default" }
]
},
{
"type": "select",
"id": "flex_align",
"label": "Text alignment",
"default": "align--middle-left",
"options": [
{ "value": "align--middle-left", "label": "Left" },
{ "value": "align--middle-center", "label": "Center" },
{ "value": "align--middle-right", "label": "Right" }
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "dark",
"options": [
{ "value": "dark", "label": "Dark" },
{ "value": "white", "label": "White" }
]
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Background"
},
{
"type": "image_picker",
"id": "bg_image",
"label": "Background image"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default": 0
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
}
],
"presets": [
{
"category": "Promotional",
"name": "Newsletter"
}
]
}
{% endschema %}
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
在主题编辑中，如果选择高度设置为image height。这些都会发生
因为你用的是lazyload，所以会用到18px的小图，所以这一行src="{{ section.settings.bg_image | img_url: '18x' }}"
图片会根据屏幕宽度自动调整大小；
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
如果你想要最大宽度为2048的图像，只需从data-width中删除数字即可； IE。我只想要尺寸为 180 - 2048 的图像。我将删除 2450、2700、3000，...
另一种解决方案是将最大宽度添加到图像；即添加 style="max-width: 500px" 到 img 标签
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/
style="max-width: 500px;">
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
您好，我正在尝试编辑图像，使其更小或自定义尺寸，但我不熟悉液体。谢谢你们的帮助。我添加了一些代码。我认为它默认为一定百分比但不确定。如果你们需要我提供一些额外的代码或信息，请告诉我。
// settings_data.json file
"index-newsletter": {
"type": "index-newsletter",
"settings": {
"title": "Newsletter",
"richtext": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.<\/p>",
"width": "full",
"flex_align": "align--middle-left",
"text_color": "dark",
"height": "screen-height-one-third",
"bg_image": "shopify:\/\/shop_images\/Grazioso_Logo321321_db2a67b3-d13f-4d64-a73d-c82f176fd6a5.png",
"overlay_opacity": 50,
"overlay_color": "#ffffff"
}
},
<!-- /sections/newsletter.liquid -->
{%- assign img_url = section.settings.bg_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<style>
{%- if section.settings.text_color == 'white' -%}
.index-newsletter-{{ section.id }},
.index-newsletter-{{ section.id }} .input-group.newsletter-form input { color: #fff; }
{%- endif -%}
</style>
<div class="index-newsletter index-newsletter-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="newsletter">
<div class="wide-image js-overflow-container {{ section.settings.height }}"
data-aos-duration="500"
data-aos="fade-up">
<div class="hero__content__wrapper hero__content--transparent {{ section.settings.flex_align }}">
<div class="hero__content hero__content--{{ section.settings.width }} js-overflow-content">
<div class="newsletter__content">
{% if section.settings.title != '' %}
<h5 class="newsletter__title">{{ section.settings.title }}</h5>
{% endif %}
{% if collection.description != '' %}
<div class="rte">
{{ section.settings.richtext }}
</div>
{% endif %}
<div class="newsletter-signup">
{% include 'newsletter-form' %}
</div>
</div>
</div>
</div>
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
<noscript>
<img src="{{ section.settings.bg_image | img_url: '1440x' }}" alt="{{ section.settings.bg_image.alt | default: collection.title }}" class="responsive-wide-image"/>
</noscript>
{% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Newsletter",
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"id": "richtext",
"type": "richtext",
"label": "Subheading",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers)."
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "full",
"options": [
{ "value": "full", "label": "Full" },
{ "value": "default", "label": "Default" }
]
},
{
"type": "select",
"id": "flex_align",
"label": "Text alignment",
"default": "align--middle-left",
"options": [
{ "value": "align--middle-left", "label": "Left" },
{ "value": "align--middle-center", "label": "Center" },
{ "value": "align--middle-right", "label": "Right" }
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "dark",
"options": [
{ "value": "dark", "label": "Dark" },
{ "value": "white", "label": "White" }
]
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Background"
},
{
"type": "image_picker",
"id": "bg_image",
"label": "Background image"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default": 0
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
}
],
"presets": [
{
"category": "Promotional",
"name": "Newsletter"
}
]
}
{% endschema %}
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
在主题编辑中，如果选择高度设置为image height。这些都会发生
因为你用的是lazyload，所以会用到18px的小图，所以这一行src="{{ section.settings.bg_image | img_url: '18x' }}"
图片会根据屏幕宽度自动调整大小；
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
如果你想要最大宽度为2048的图像，只需从data-width中删除数字即可； IE。我只想要尺寸为 180 - 2048 的图像。我将删除 2450、2700、3000，...
另一种解决方案是将最大宽度添加到图像；即添加 style="max-width: 500px" 到 img 标签
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/
style="max-width: 500px;">
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}