Craft theme collection pictures

Store Design

Topic summary

A user working with the Craft theme needs to adjust collection image dimensions, as the default setting crops images in portrait mode and cuts off important information on both mobile and desktop collection pages.

Problem specifics:

  • Current dimensions work in some sections but not on the collections page
  • Built-in “Image ratio” settings don’t include a landscape option
  • Different dimensions are needed for different page locations

Proposed solution:
A community member provided a CSS workaround:

  • Set the image ratio to “Square” in theme settings
  • Add custom CSS code to the section’s “Custom CSS” setting to control aspect ratio (using --ratio-percent)
  • Optionally add code to scale images down rather than crop them (using object-fit: contain)

Benefits of this approach:

  • Section-specific customization without affecting other areas
  • Adjustable percentage values for different sections
  • Won’t interfere with future theme updates

The discussion remains open as the user hasn’t confirmed whether the solution resolved their issue.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I am creating my site using the Craft theme and want to change the size my collection photos. The default crops the picture and cuts off important information when the user chooses Collections in mobile and desktop version. It looks as though it switches to portrait mode and I need landscape with customization. Is there a way to change this? Thank you!

2

The problem is that I need it to have different dimensions in different locations. The current dimensions work in one section, but not on collections page on site.

3

Hi @Amiwithani ,

Please send the website link, I will check it for you

4

Have you tried to play with this setting – “Image ratio”?

Screenshot 2025-04-23 at 1.23.55 PM.png
Screenshot 2025-04-23 at 1.23.55 PM.png339×753 35.9 KB

5

Yes, thank you. Unfortunately, there is not a landscape option. I appreciate your help.

6

Ok, we can fix it with code then.

Set the setting to “Square” and then paste this into “Custom CSS” setting at the bottom of the section settings:

.card, .card__inner.ratio {
  --ratio-percent: 55% !important;
}

You can change percentage value to your liking.

If some of your images are taller, they will be cropped. If you would prefer to rather scale them down to fit, add this code too:

.card__media .media img {
  object-fit: contain;
}

the benefit of using ‘Custom CSS’ is that this will be limited to this particular section only and you will be able to use different settings/percentages for different sections.

And it would not negatively affect your theme updates.