Cropping the images for different layouts

[lamarosa90]

Hey guys,

First of all, great work on the X/Pro theme. Started using it this month and am really happy with how customizable it is.
However, I’m having some trouble with the image sizes and I haven’t found the exact answer I’m looking for. Specifically, for the image ratios.

All my woocommerce product Images have a fixed full size of 1200x1553 px that I crop on photoshop. However, I’d like to display them at different ratios, for example, when using the mobile version, the pictures would be cropped to a square size on a specific row.

I plan on using a lot of loopers to link to specific products on my shop. However, the featured image that is linked to those products is always the full-width/single-product image, regardless of the layout it is inserted in.

The second image illustrates one of my current struggles to use the image element inside of a grid.
I’m wondering if there are any solutions that don’t involve using long lines of code to achieve this.
Also, would be a great functionality to add, if on the image element, users had a sort of dropdown to choose the custom wordpress media size they wish for that specific use.

Thank you in advance

[tristup]

Hi Francisco,

We understand your problem, but what you are trying to acheive is required customization and that is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called Elite service, where we offer complex customization.

Thanks

[lamarosa90]

Thank you, Tristup. Is this a possible functionality to be integrated? Much like elementor i.e uses for its builder?

[The_Capture_Factory]

this i a fairly common issue we have to tackle as we want our clients run their own sites rather than asking us to do simple image changes, but they all struggle with the concepts of responsive design and accepting some image cropping.

I would suggest you look at the grid element and rather than adding image elements set each cell background to be an image set to cover and centre position. You can then fix the size ratio of each cell in the grid to achieve your layout and the images will in effect be cropped

hope this helps

[lamarosa90]

Thank you for the response. I know what you’re saying but unfortunately that doesn’t seem to work if you want to make use of the looper to display dynamic content.

[marc_a]

Hey @lamarosa90 ,

I’ll add this as a feature request in our tracker so that it will be taken into action in the future.

@The_Capture_Factory thanks for sharing your idea and I hope @lamarosa90 will be able to figure it out.

Cheers!

[lamarosa90]

Thanks Marc. I have managed to use the looper with the image as a background as @The_Capture_Factory suggested, using the advanced options for the background image and selecting the background layer.

Thanks for the feedback.

[tristup]

Hi Francisco,

Glad that you are able to manage it.

Thanks