Image scaling - Debut Theme

Spartan
Excursionist
22 0 3

Hello,

As I haven't found a solution to the image scaling issue I post again with new images.

The issue is that collection images don't fit the frame and scaling changes when I am just looking at the collections page and when I am into a specific collection (Summer Bandanas for example).
Also, image scaling differs when I use a phone.
I give example pics.
I know that is an issue that can be solved only by modifying the code of the page.
I have already tried a lot of solutions by image resizing but this is not a permanent solution and I spend hours just practicing resizing every pic. 
So any solutions?

 

 PC Screenshots 


Collections Page (PC)Collections Page (PC)Winter Bandanas Collection (PC)Winter Bandanas Collection (PC)

 

 

 

Phone screenshots 

 

Collections Page (Phone)Collections Page (Phone)Winter Bandanas Collection (Phone)Winter Bandanas Collection (Phone)

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Hi There! 

The solution to this which I prescribe to everyone is to create a new metafield in the Collection page especially for the banner, that way the display image is different than the collection listing banner. That way you have one ready for square formatting and the other for landscape already which can be different.

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Spartan
Excursionist
22 0 3

Hello,

Thanks for your answer.  If you could give some steps to follow and create this new metafield it would be great.
Is it easy to do it?
I can modify the code if I have instructions but I don't have the knowledge to modify it by my own.

Thanks in advance,

Triantafillos Anastasiou

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Alright I will try to guide you as much as possible by steps:

  1. Install the following App: https://apps.shopify.com/metafields-editor-2
  2. Upload your inner-collection banner in "Settings" -> "Files" of your Shopify Admin
  3. Copy the link of the file
  4. Open the Metafields App
  5. Click on Collections
  6. Add A New Metafield
  7. Call It CollectionInner
  8. Choose type to be String
  9. Paste the URL in the field below
  10. Copy the liquid code using the copy button
  11. Go to your collection-template.liquid Section file
  12. Look for your collection.image location and replace it with your metafield output.

Let me know then!

  1. Locate the path where the collection.image.url is present, replace it with the var

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Spartan
Excursionist
22 0 3

Hello again,

I cant see the app. Can you please resend me the link?

Thanks in advance,

Triantafillos Anastasiou

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Added to the initial post

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Spartan
Excursionist
22 0 3

Hello,

 

I tried to do follow the steps. I uploaded the picture of my collection to metafields editor. I created the link. But as i am going to collection-template.liquid there is no collection.image.url . As i understand i have to replace the existing URL of the particular collection image. But to this section there is only general code and not for this particular collection. There are only dimensions of the pictures. Sorry if i am wrong but i don't have all the knowledge for that. I am trying to understand how code works here.

i am attaching the pic of the meta field creation:

Metafield.jpg


And here the part of the code that appears to my page.


Collection.jpg

0 Likes