How do you Control the Collection Image Size & Flow the Description Around the Image?

Store Design
1

On the Dawn theme, the “Collection Banner” enlarges the collection image and makes it as long as the copy but only about 50% of the page width. This causes the collection images to be a bit hard to identify. I want the Collection image to be fully displayed and to float right with the collection copy flowing around the image (desired result image in the zip). I would appreciate any help!!!

https://coloradopen.myshopify.com/collections/conklin-mark-twain-crescent-superblack-limited-edition

PW: ompayu

The misbehaving Liquid I believe is this:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ ‘component-collection-hero.css’ | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero–with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

{{ 'sections.collection_template.title' | t }}: {{- collection.title | escape -}}

{%- if section.settings.show_collection_description -%}

{{ collection.description }}
{%- endif -%}

{%- if section.settings.show_collection_image and collection.image -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.main-collection-banner.name”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.main-collection-banner.settings.paragraph.content”
},
{
“type”: “checkbox”,
“id”: “show_collection_description”,
“default”: true,
“label”: “t:sections.main-collection-banner.settings.show_collection_description.label”
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“default”: false,
“label”: “t:sections.main-collection-banner.settings.show_collection_image.label”,
“info”: “t:sections.main-collection-banner.settings.show_collection_image.info”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
}
]
}
{% endschema %}

2

Hi @paul127 .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file base.css

.collection-hero__image-container{
align-self: unset;
}
.media>img{
object-fit: contain;
}

Hope this helps.

Best Regards;

Pagefly

3

So for the delay. This was a half solution. The image is displaying correctly now but the text is still a column and not flowing around the image.

4

So in the end I used PageFly’s CSS and then did a little rewrite of the main-collection-banner.liquid

My final version of the liquid is below:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ ‘component-collection-hero.css’ | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero–with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
.colimage {float:none; width:100%;}
}
@media screen and (min-width: 750px) {.colimage {float:right; width:40%;}
}
{%- endstyle -%}

{{ 'sections.collection_template.title' | t }}: {{- collection.title | escape -}}

{%- if section.settings.show_collection_description -%}

{%- if section.settings.show_collection_image and collection.image -%} {%- endif -%} {{ collection.description }}
{%- endif -%}

{% schema %}
{
“name”: “t:sections.main-collection-banner.name”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.main-collection-banner.settings.paragraph.content”
},
{
“type”: “checkbox”,
“id”: “show_collection_description”,
“default”: true,
“label”: “t:sections.main-collection-banner.settings.show_collection_description.label”
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“default”: false,
“label”: “t:sections.main-collection-banner.settings.show_collection_image.label”,
“info”: “t:sections.main-collection-banner.settings.show_collection_image.info”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
}
]
}
{% endschema %}