d
Topic
Posts:
7
7 months ago

Collections collage images to fill the box This post is outdated

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:
676
7 months ago

Hi Will

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

tim Member trezoro.co
Posts:
1666
7 months 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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
tim Member trezoro.co
Posts:
1666
7 months 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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Ricky Shopify Partner www.suture.net
Posts:
676
7 months ago

Thanks Tim, that's good to know.

Posts:
7
7 months 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
tim Member trezoro.co
Posts:
1666
7 months 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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
7
7 months ago

Thanks Tim, I'll give it a go!

Posts:
7
7 months 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?

tim Member trezoro.co
Posts:
1666
7 months ago

Sorry, no easy way, AFAIK.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
7
7 months 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
7 months 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
tim Member trezoro.co
Posts:
1666
7 months ago

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
7
7 months ago

Not to worry.  Thanks anyway!