Return to previous page

Force cropping of category-images - by Lars Schellhas

This topic has 9 replies, 2 voices, and was last updated 8 years, 9 months ago ago by Jack Richardson

Lars Schellhas

Participant

February 7, 2016 at 19:54

Hey together,

I would like to crop the category-images just like the product-images are on the shop-site. How could I do that, since your theme does not support it natively?

Best Regards,
Lars Schellhas

Please, contact administrator
for this information.

#111993 Copied Theme version: 4.0 WooCommerce version: 2.5.2

8 Answers
Jack Richardson

Support staff

February 8, 2016 at 14:25
Hello,

I’ve added the css code in your custom.css:
```
.category-block img {
    width: 215px !important;
    height: 143px !important;
}
```
Please check the category page now.

Best regards,
Jack Richardson.
#112130 Copied
Lars Schellhas

Participant

February 8, 2016 at 14:31

Hello,
well, to be honest, this is not what i wanted.
The pictures should not be stretched, but cropped. – Like the pictures of products are on the shop-page.
Is there any possibility to do this?
Best Regards

#112133 Copied

Lars Schellhas

Participant

February 8, 2016 at 14:35

Further more you have deleted my complete custom.css-file… -.-

#112134 Copied
Jack Richardson

Support staff

February 8, 2016 at 16:31
Hello,

The pictures should not be stretched, but cropped.

Then try the following css code:
```
.category-block img {
    object-fit: cover;
    width: 150px;
    height: 150px;
}
```
Further more you have deleted my complete custom.css-file… -.-

Your custom.css file was empty when I opened it. Please note we don’t delete anything without client confirmation.

Best regards,
Jack Richardson.
#112149 Copied
Lars Schellhas

Participant

February 8, 2016 at 19:23

Hey,
the code works (except in MS Edge & IE, but seems like they are working on it). Thanks for that. 😉

Unfortunately (for me probably) I would like to show the category a little bit bigger than the image is, because WP loads a 143×215-thumbnail (e.g. http://www.leihes.de/wp-content/uploads/2016/02/5304-Menuegabel-Hepp-Ecco-143×215.jpg). It would be much better if it simply would load the 300×300 or 350×370 thumbnail. Do you have an idea, how to work this out?
If not, thank you anyway – you helped me a lot (didn´t knew the object-fit/object-position properties yet).

Best Regards,
Lars

P.S.: I restored the custom.css from today´s backups. Everything´s finde. 🙂

#112164 Copied
Jack Richardson

Support staff

February 11, 2016 at 14:25
Hello,

Sorry for a long delay.
Please try to remove the code in the file wp-content/themes/idstore/code/woo.php:
```
remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 ); 
add_action( 'woocommerce_before_subcategory_title', etheme_woocommerce_subcategory_thumbnail', 10 );
```
in lines 503, 504. After that regenerate thumbnails and check your images.

Best regards,
Jack Richardson.
#112620 Copied
Lars Schellhas

Participant

February 11, 2016 at 16:54

Hello,

I´m willing to wait for an answer that helps. And yours does.
In combination with the css-properties from above it´s just perfect.

Thank you very much – well done.

Best Regards,
Lars Schellhas

#112674 Copied

Jack Richardson

Support staff

February 11, 2016 at 19:15

Hello,

You are welcome!

Best regards,
Jack Richardson.

#112708 Copied
Viewing 9 results - 1 through 9 (of 9 total)