Adjust size of the collection photo - Craft theme

Store Design

Topic summary

Goal: Adjust a collection image in the Craft theme’s Collage section to remove blank space, keep both tiles the same height, and make the wedding cake image larger without cropping the tray image.

Constraints and clarifications:

  • In the Collage layout (variable tile sizes), images will either be cropped or show blank space depending on fit. Screenshots illustrate these trade-offs.
  • The alternative “Collection list” section provides uniform tiles, but the requester wants the cake tile to be larger than the other, so Collage is preferred.

Proposed solution and specifics:

  • Best approach: Manually crop the tray image to an aspect ratio that matches the frame used by the Collage tile to avoid blank space and minimize cropping.
  • Current frame size referenced: 352×967 (approximate aspect ratio 36:100). Crop the tray image to this ratio, then re-upload.

Outcome and status:

  • No theme setting or CSS change was finalized; manual image preparation is recommended.
  • The aspect ratio guidance was provided; next step is for the requester to crop and test. Discussion appears effectively resolved pending implementation.
Summarized with AI on January 6. AI used: gpt-5.
1

Screenshot 2024-01-30 at 18.22.09.png
Screenshot 2024-01-30 at 18.22.09.png818×1362 340 KB

Hi,

I want to ask if someone knows how to adjust to fit in the size of the collection within the craft theme

I will attach the image below

2

hello, chouxstudio.

Could you please provide the link to the store?

3

https://uel59gmir1563xts-58586234961.shopifypreview.com

Hi, please take a look. Thank you!

4

hey, choux, I’m sorry, how exactly are you wanting the image to look like? Because either the image will be cropped, or it will have a great amount of blank space around it. Is that what you want?

Uhrick_0-1706660888546.png
Uhrick_0-1706660888546.png901×760 282 KB

or are you wanting to make the two columns the same width?

5

Hi @Uhrick , could you adjust it to remove all the blank spaces in the left photo? I tried and got a result like you, but I want just the center of the photo itself, not covered by the blank spaces around it.

6

but do you want it to be a tiny pic next to the huge pic in the right? is that it? with different heights between both?

7

I want them to have the same heights; maybe focus on the whole tray and try not to be cropped. Any idea?

8

Uhrick_0-1706663379478.png
Uhrick_0-1706663379478.png1750×642 39.4 KB

have you thought of using the collection list section (in red) instead of the collage section (in green)?

9

I did, but I don’t want these two pictures to correspond; I prefer the wedding cake more significant than the other one. That’s why I go with collage style.

10

for the whole tray to be focused, the image would have to be reduced as in the screenshot that I sent you. To keep them with the same height and the cake being more significant, you can try cropping the tray image yourself in an aspect ratio that is more suitable to fit in this frame and upload it to the section again. It’s the best way, as it prevents you from having to do trial and error to discover what width in css will be the best for you

11

Could you suggest a suitable aspect ratio to fit the frame of the collection image?

12

currently the sizing of the frame is 352x967. So the aspect ratio would be approximately 36:100