Image scaling - Debut Theme

[Spartan]

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)Winter Bandanas Collection (PC)

Phone screenshots 

Collections Page (Phone)Winter Bandanas Collection (Phone)

[JHKCreate]

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.

[Spartan]

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

[JHKCreate]

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

[Spartan]

Hello again,

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

Thanks in advance,

Triantafillos Anastasiou

[JHKCreate]

Added to the initial post

[Spartan]

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:




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