Greetings,
I need help getting the image quality to look as good as it does with the dawn image banner section when viewing on mobile. This is a custom theme I am building and honestly forgot how to do it… any tips in the right direction would be great !!
This is what I have :
This is what I’m trying to achieve:
Preview link (password is: plswork)
https://sopk5k4rpuz7rvvl-58572865730.shopifypreview.com
Thank you
oh sorry for this issue can you please send hero section code so i will update code better quality image
{{ ‘Hero1.css’ | asset_url | stylesheet_tag }}
{%- if section.settings.image != blank -%}
<img
srcset=“{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: ‘535x’ }} 535w,{%- endif -%}
{%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: ‘750x’ }} 750w,{%- endif -%}
{%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: ‘1070x’ }} 1070w,{%- endif -%}
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: ‘1500x’ }} 1500w,{%- endif -%}”
src=“{{ section.settings.image | img_url: ‘1500x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)”
alt=“{{ section.settings.image.alt | escape }}”
loading=“lazy”
width=“{{ section.settings.image.width }}”
height=“{{ section.settings.image.height }}”
class=“hero1__bg”
{%- else -%}
{{ ‘image’ | placeholder_svg_tag: ‘placeholder-svg’ }}
{%- endif -%}
{% assign opacity = section.settings.opacity | divided_by: 100.00 %}
{%- when ‘heading’ -%}
{{ block.settings.title | escape }}
{%- when ‘paragraph’ -%}
{{ block.settings.paragraph | escape }}
{%- when ‘button’ -%}
{%- if block.settings.button_label != blank -%}
<a href=“{{ block.settings.button_link }}” class=“hero1__button hero1__button–{{- block.settings.button_size -}}” {{ block.shopify_attributes }}> {{ block.settings.button_label | escape }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
“name”: “Hero One”,
“class”: “spaced-section spaced-section–full-width”,
“settings”: [
{
“type”: “select”,
“id”: “hero_height”,
“options”: [
{
“value”: “25vh”,
“label”: “25%”
}, {
“value”: “50vh”,
“label”: “50%”
}, {
“value”: “75vh”,
“label”: “75%”
}, {
“value”: “100vh”,
“label”: “100%”
}
],
“default”: “100vh”,
“label”: “Height”
}, {
“type”: “select”,
“id”: “hero_width”,
“options”: [
{
“value”: “25vw”,
“label”: “25%”
}, {
“value”: “50vw”,
“label”: “50%”
}, {
“value”: “75vw”,
“label”: “75%”
}, {
“value”: “100vw”,
“label”: “100%”
}
],
“default”: “100vw”,
“label”: “Width”
}, {
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.image-with-text.settings.image.label”
}, {
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#000000”
}, {
“type”: “range”,
“id”: “opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“label”: “Opacity”,
“default”: 50
}, {
“type”: “select”,
“id”: “info_alignment”,
“options”: [
{
“value”: “left”,
“label”: “Left”
}, {
“value”: “center”,
“label”: “Center”
}, {
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”,
“label”: “Info Alignment”
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image-with-text.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Title”
}, {
“type”: “select”,
“id”: “title_size”,
“options”: [
{
“value”: “sm”,
“label”: “Small”
}, {
“value”: “md”,
“label”: “Medium”
}, {
“value”: “lg”,
“label”: “Large”
}, {
“value”: “xl”,
“label”: “Extra Large”
}
],
“default”: “md”,
“label”: “Font Size”
}
]
}, {
“type”: “paragraph”,
“name”: “Paragraph”,
“limit”: 1,
“settings”: [
{
“type”: “textarea”,
“id”: “paragraph”,
“label”: “Paragraph”,
“default”: "I’m baby dreamcatcher succulents tacos tbh 8-bit kogi. Sustainable edison bulb hell of, vaporware copper mug ethical 8-bit thundercats forage four loko. Thundercats "
}, {
“type”: “select”,
“id”: “paragraph_size”,
“options”: [
{
“value”: “es”,
“label”: “Extra Small”
}, {
“value”: “sm”,
“label”: “Small”
}, {
“value”: “md”,
“label”: “Medium”
}, {
“value”: “lg”,
“label”: “Large”
}
],
“default”: “md”,
“label”: “Paragrpah Font Size”
}
]
}, {
“type”: “button”,
“name”: “t:sections.image-with-text.blocks.button.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.image-with-text.blocks.button.settings.button_label.label”,
“info”: “t:sections.image-with-text.blocks.button.settings.button_label.info”
}, {
“type”: “url”,
“id”: “button_link”,
“label”: “Link”
}, {
“type”: “select”,
“id”: “button_size”,
“options”: [
{
“value”: “sm”,
“label”: “Small”
}, {
“value”: “md”,
“label”: “Medium”
}, {
“value”: “lg”,
“label”: “Large”
}
],
“default”: “md”,
“label”: “Button Size”
}
]
}
],
“presets”: [
{
“name”: “Hero One”,
“blocks”: [
{
“type”: “heading”
}, {
“type”: “paragraph”
}, {
“type”: “button”
}
]
}
]
}
{% endschema %}
