Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 4, 2015 at 6:38 pm #513376
    mattmikulla

    I know this is a CSS thing and possibly some JS but I wanted to get your thoughts.

    I have various product images that are different aspect ratios. 1:1, 2:3 etc.

    Usually the thumbnails for the WooCommerce catalog, category and tag pages are set to crop 1:1.

    Since I’m selling art I would like my 2:3 and other non 1:1 images to be centered in each container so you can see the full image and aspect ratio of each product while keeping the grid layout, responsive, consistent and unbroken.

    This used to be pretty easy before responsive was the norm. Now I don’t know where to start.

    Also, this would make a fabulous setting for Enfold WooCommerce pages if it was built into the core code.

    Any thoughts on how to achieve this.

    Here is an example image from my non-responsive site years ago.

    Screenshot of images in a grid centered vertically and horizontally

    October 4, 2015 at 10:23 pm #513400
    Basilis

    Hi mattmikulla!

    Can we please check a live version?
    There is a version of ” No Crop ” for images, have you tried it?

    Best regards,
    Basilis

    October 4, 2015 at 11:12 pm #513425
    mattmikulla

    The no crop version will not center an image in a square container horizontally and vertically.

    I’d rather not set all my thumbnails to no crop then have to regenerate all my thumbnails then have to do it again.

    October 5, 2015 at 11:19 am #513609
    Ismael

    Hey!

    You can actually modify the crop positioning area of the thumbnails, just add something like this in the functions.php file:

    function ava_image_sizes() { 
add_image_size('shop_catalog', 450, 450, array('center', 'top'));
add_image_size('shop_thumbnail', 120, 120, array('center', 'top'));
add_image_size('shop_single', 450, 450, array('center', 'top'));
}
add_action( 'after_setup_theme', 'ava_image_sizes', 11 );

    This will crop the images from top to center instead of cropping the edges which usually cuts off important part of the images (like “head” etc). Refresh the page then use this plugin to regenerate the thumbnails: https://wordpress.org/plugins/force-regenerate-thumbnails/

    This might not work for all images with different aspect ratios so, still, best solution is to pre-crop the thumbnails before uploading them as product image.

    Best regards,
    Ismael

    October 5, 2015 at 9:07 pm #514045
    mattmikulla

    Hey Ismael.

    The solution I’m looking for should not involve cropping. It needs to be CSS and or JS.

    October 6, 2015 at 10:53 am #514276
    Ismael

    Hey!

    I’m not sure what you mean by that, It is standard for WP to regenerate the images into smaller thumbnails and use those thumbnails on specific elements (i.e product grid, portfolio etc) on the page. If you’re looking to modify the template, please contact codeable for that: http://kriesi.at/contact/customization

    Or you can try this:

    function ava_image_sizes() { 
add_image_size('shop_catalog', 9999, 9999, array('center', 'top'));
add_image_size('shop_thumbnail', 9999, 9999, array('center', 'top'));
add_image_size('shop_single', 9999, 9999, array('center', 'top'));
}
add_action( 'after_setup_theme', 'ava_image_sizes', 11 );

    Since the max width and height is set to 9999, it will retain the actual size of the product image. Regenerate the thumbnails. You might need to adjust the product columns via css.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.