Theme: Vantage
Issue:
I’ve set custom banners up for each collection using the “[banner]” in collection description workaround. That side of things is working nicely except the images are coming up pixelated when displayed on a larger screen size. It’s definitely not the banner image resolution, so I’m assuming it’s some form of lazy load or set rules within the banner code. It looks awful and I need to fix it ASAP but can’t figure out how. Advice very appreciated.
Desktop sizing:
Laptop sizing:
Hi @ABG-Marketing
Make sure the size of your image is at least 2048px as mentioned here.
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Unfortunately not the solution - as I said, it’s not an image resolution/sizing issue.
Hi @ABG-Marketing
This is David at SalesHunterThemes.
In this case the problem regarding to the theme code, it use some code to makes the image responsive and optimize the image.
So to fix the problem you need to check and update in the theme code.
Can you share your store url and the collection banner code?
{%- liquid
assign basic_banner = false
assign collection_image = false
assign metafield_image = false
assign no_image = false
assign basic_banner_img = collection.handle | append: ‘.png’
if images[basic_banner_img] != blank and collection.description contains ‘[banner]’
assign basic_banner = true
assign collection_image = false
elsif collection.image != blank
assign collection_image = true
assign basic_banner = false
endif
if section.settings.image != blank
assign metafield_image = true
assign basic_banner = false
assign collection_image = false
endif
if metafield_image == false and collection_image == false and basic_banner == false
assign no_image = true
endif
-%}
{%- if basic_banner or collection_image or metafield_image -%}
{% if metafield_image %}
{% render 'basic-responsive-image',
type: section.settings.image
width: 2000,
loading: 'eager'
%}
{%- elsif basic_banner -%}
{%- elsif collection.image != blank -%}
{% render 'basic-responsive-image',
type: collection.image,
width: 2000,
loading: 'eager'
%}
{% endif %}
{%- endif -%}
{{ collection.title }}
{% schema %}
{
“name”: “Collection header”,
“settings”: [{
“type”: “paragraph”,
“content”: “Shows the collection featured image as a banner above products. Override this by selecting a specific banner image for all collections or show an alternate unique image per collection by following this [guide](https://[www.weareunderground.com](http://www.weareunderground.com)/blogs/theme-support/add-a-custom-banner-image-to-each-collection-page).”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Background image”,
“info”: “1920px x 600px recommended”
}
]
}
{% endschema %}
Store: https://allbrandedgroup.com.au/
While awaiting a fix I’ve updated the banners to a single universal image using the core image selector opposed to the custom [banner] workaround.
