New Landing › How can we help? › Themeforest Theme Support › Dante › Make product images fit in square

Viewing 8 posts - 1 through 8 (of 8 total)
  • Back to forum
    Posted in: Dante
  • October 15, 2014 at 8:41 am #120309
    mdearden
    Member
    Post count: 39

    Hello,

    I have a little problem with my site and the thumbnails.

    Ideally i want all of my product images to fit nicely inside a square without chopping off half the image and giving it a boxy look. I want everything to fit nicely inside a square to give a consistent catalogue look to the site.

    The problem from what i understand is that unless the original image i upload to the media library is infact a square then wordpress proceeds to crop the thumbnail down to the sizes set in Woocomerce settings. These sizes for the catalogue images are currently set to 300×300 with hard crop enabled. If i disable hard crop then the catalogue displays in all different heights, which looks worse.

    Is there a way of fixing this as i feel it is letting the site down visually and re editing thousands of product images is not really an option.

    Any help would be much appreciated.

    Thanks
    Matt

    Attachments:
    You must be logged in to view attached files.
    October 15, 2014 at 10:34 am #120372
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    You would have to upload all your images as squares, if they have different dimensions they would either have to crop or display at a different height

    – Kyle

    October 15, 2014 at 10:40 am #120375
    mdearden
    Member
    Post count: 39

    Is there not anyway to fix this without manually editing thousands of pictures? Seems like a pretty basic feature that would help keep the themes style consistent.

    October 15, 2014 at 10:41 am #120377
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    I’m not sure what you’re asking for? Are you saying you want the theme to work out the size of your image, and if it’s not as big as the others, add more space to it? That’s hardly a basic feature.

    – Kyle

    October 15, 2014 at 10:51 am #120382
    mdearden
    Member
    Post count: 39

    Hi Kyle,

    I would like the images to fit into a box without being chopped, like the screen grab above suggests.

    I would of thought it would of been in the interest of the theme to keep some consistency or control of the images, as it does not mention this anywhere that you must ensure all images you upload are of one specific dimension. As per your example shop, one would presume this is how every shop would look nice and consistent.

    I would be happy to pay a premium for this to work. I think it would really benefit the theme.

    October 15, 2014 at 10:53 am #120384
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    I’m afraid we’ve tried multiple things and there’s nothing that can make different image sizes fit nicely. Sorry

    – Kyle

    October 21, 2014 at 9:15 am #121822
    mdearden
    Member
    Post count: 39

    Hi Kyle,

    I have made some progression on this, it appears it is very much possible it just needs some polishing up, which i hope you guys can help me with.

    Firstly we need to turn hard crop off on product catalogue.

    then we need to add this to the css.

    .woocommerce ul.products li.product a img {
	width: 262px;
	height: auto;
}	
}

.woocommerce ul.products li.product figure > a {
	height: 262px;
}

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
	box-shadow: 0 0 0 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.3);
}

    It however does not work with images that are slightly different heights such as these: http://shop.rampworx.com/product-category/clothing/headwear/

    I removed the shadows as these appeared stuck to the images which left a phantom grey shadow under them.

    The only thing left to do now is to centre the images vertically, but i seem to be having some trouble with this using vertical-align:. If you could help it would be much appreciated.

    Link: http://shop.rampworx.com/product-category/bmx/components/bmx-frames/

    Thanks
    Matt

    October 21, 2014 at 9:28 am #121830
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Good work with how far you have got, unfortunately I’ve been trying for about 15 minutes and can’t seem to get the images to align vertically, I don’t think it’s possible with the structure of the html

    – Kyle

  • Back to forum
    Posted in: Dante
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.