d
Topic
Posts:
7
14 days ago

Collections collage images to fill the box

Hi,  

I have spent some time looking for the answer to this, but unable to find a solution I now ask for your help.

The theme I am using is Brooklyn and I have the products within the collections displayed as a collage.

I am wanting to make the product images fill the wrapper, scaling proportionally with the browser size so that the images are cropped and leave no light grey backgound.

https://peter-hall-shop.co.uk/collections/peter-hall-son-handmade

Any ideas?

 

Will

i
Replies
Ricky Shopify Partner www.suture.net
Posts:
668
14 days ago

Hi Will

https://themes.shopify.com/themes/brooklyn/styles/brooklyn/preview
In the demo here they're using square images.  480x480 px

Posts:
211
14 days ago

I always hated this gray background myself. The theme already does what you want in the list of collections.

You should open the product-grid-item.liquid  snippet, look for the following code

    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}">
        <img src="{{ product | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" class="grid-product__image">

and replace it with the following:

{% if section.settings.collection_products_grid == 'collage' %}
  <div class=" collection-grid__item-overlay grid__image grid__image--responsive"
         style=" background-image: url('{{ product | img_url: '650x' }}');">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}" style="background:none transparent;">
{% else %}    
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}">
        <img src="{{ product | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" class="grid-product__image">
{% endif %}        

That should do it.

Posts:
211
14 days ago

Hey, Ricky, in this demo they simply use square jpegs with gray background which blends with the gray background of the div! That's a neat trick, but probably would not solve Will's problem.

Ricky Shopify Partner www.suture.net
Posts:
668
14 days ago

Thanks Tim, that's good to know.

Posts:
7
14 days ago

Hi Tim & Ricky,

Thank you both for your replies!  

Tim, unfortunately that didn't work for me.  I can see that you have managed to do it nicely on your site, but I wonder if you have made some changes elswhere in the theme.scss.liquid perhaps?

The code caused the grey background box to go very long! (see image)

How you have it on your home page is perfect.

Any other ideas?

Thanks again for all your help!

 

Will

 

Screen shot 2017 01 10 at 16.02.34 thumb
Posts:
211
14 days ago

Just did these things on a newly downloaded copy of the theme and it was good. Can you try again, probably leave it for a couple of minutes so I can have a look why you have difficulties?

Most probably your theme is not the latest, not sectioned even, then you may try downloading a new version and try with it as unpublished.

Posts:
7
14 days ago

Thanks Tim, I'll give it a go!

Posts:
7
14 days ago

Just downloaded the latest version and as you say it works perfectly in preview. Thank you!  

Is there an easy way to update all my settings with the latest theme update, or is it just a case of going through and doing it all again?

Posts:
211
14 days ago

Sorry, no easy way, AFAIK.

Posts:
7
12 days ago

Hi Tim,

I have now updated to the latest version of Brooklyn and pasted in your code to make the images fill the box.  Unfortunatly the sold out icon now seems to be up at the top corner of the browser rather than the corner of the appropriate products.  

Not sure what's happened here...  I've tried editing the class CSS to position it but that hasn't worked.

Can you help?

Will

Posts:
7
12 days ago

I've removed the code for now and have shopify looking into it.  I guess you had the same issue though?  See image.

Screen shot 2017 01 12 at 09.54.15 thumb
Posts:
211
12 days ago

Sorry mate, I am out of the office for 10 days, can't help till then...  

Posts:
7
12 days ago

Not to worry.  Thanks anyway!