WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Catalog Images different sizes (26 posts)

  1. slatchley
    Member
    Posted 1 year ago #

    I am selling photographs that are all different sizes. This means that all of the images in a catalog are all different sizes, which looks terrible. It seems they are sized by woo to be all the same width whereas I would like them all to be the same height and whatever width results. See attached http://atchleydesign.com/wordpress/product-category/landscapes/. As you can see the "view options" buttons jump up and down. Any diseas on a fix? I do not want all square thumbs. I need the thumbs to retain the original aspect of the photos

    http://wordpress.org/extend/plugins/woocommerce/

  2. Roy Ho
    Member
    Posted 1 year ago #

    Unfortunately there are no way to make your images all look good when you have images that are all variable sizes. So you have 3 choices. Either you prep all your images to be in same ratio proportion, or you set a fixed width and a variable height, or you set a fixed height and a variable width.

    Those are the 3 choices you have. To do the latter 2, you simply go to your settings for the image sizes and put in 9999 for a variable size and set it to soft crop. Another words uncheck hard crop.

  3. slatchley
    Member
    Posted 1 year ago #

    I assume you mean go to woocommerce >settings>catalog>image options ? That didnt seem to make much of a difference. I only regenerated one image after doing this if that makes a difference

  4. Roy Ho
    Member
    Posted 1 year ago #

    It should make a difference if done correctly. After you change your image settings, you need to re-generate all images. Not just one. Use a image regen plugin.

  5. slatchley
    Member
    Posted 1 year ago #

    Regenerated all images but still no luck. It seems that the default code is making them all the same width to fit the design with varying heights, so there must be some place to switch that so they are all the same height with varying widths. Too bad as I like this way more than WP estore.

  6. Roy Ho
    Member
    Posted 1 year ago #

    Ah...You probably are still using the default woocommerce css. Well in there, is a style that gives it width 100%. Try changing that to max-width:100% instead.

  7. Roy Ho
    Member
    Posted 1 year ago #

    In addition, it seems you have disabled the right click. You should really remove that as it is frowned upon. This is dictating user behavior. Much like when you land on a page and music starts playing even without user wanting to hear the music.

    I understand you don't want people to copy your images but this won't stop them from doing so. If they really want your images, they can get it easily even without right clicks.

  8. slatchley
    Member
    Posted 1 year ago #

    "Ah...You probably are still using the default woocommerce css. Well in there, is a style that gives it width 100%. Try changing that to max-width:100% instead."

    This is where my feeble brain runs into trouble. Where do I find this to change it?

    Thanks for the feedback

  9. Roy Ho
    Member
    Posted 1 year ago #

    It should be in woocommerce.css by default. I can't tell where or which line as I don't remember it by heart but its in there somewhere. You can try doing a search in that file for img tags.

  10. Roy Ho
    Member
    Posted 1 year ago #

    In addition looking at your site, I don't see any issue with the images...You said you wanted set width but unlimited height...that is exactly what I am seeing currently. What is the issue here?

  11. slatchley
    Member
    Posted 1 year ago #

    No, I want set height with unlimited width so that the view options buttons will all be aligned

  12. Roy Ho
    Member
    Posted 1 year ago #

    If you want it the other way around, you need to upload images that are in portrait mode instead of landscape and if you mixed them you will have issues...so this is not really anything wrong with WP or WooCommerce but how you prep the images...

  13. Roy Ho
    Member
    Posted 1 year ago #

    To achieve what you want if all you care about is aligning the buttons and not worry about the image, then you can set both image/size the same and do a hard crop. That would make all images same size and your buttons will align.

  14. slatchley
    Member
    Posted 1 year ago #

    Sounds like I wont be able to mix images and get the alignment I want. Oh well. It was worth a shot. Thanks

  15. Roy Ho
    Member
    Posted 1 year ago #

    Well at the beginning of this post, I was under the impression you wanted images to be looking good for all...but then I realized you wanted buttons to align more...So different strategies for different outcome.

    With that said, if you really want the buttons to align, you still can but you would need to modify the CSS to have a set height.

  16. slatchley
    Member
    Posted 1 year ago #

    That is the problem. Ideally all images, portrait, landscape, panoram, would all be the same height and the corresponding correct width. That way the images would be correct and the view buttons would be aligned as all images would be the same height

  17. Roy Ho
    Member
    Posted 1 year ago #

    ??? I am very confused...how on earth would an image that is landscape be same height as an image that is portrait?

  18. slatchley
    Member
    Posted 1 year ago #

    Well to look at the opposite example, what I have now are catalog images that appear to be the same width, but vary in height, ie the panoramas are really short, the portraits are really tall, and the landscapes are in between. So if I just switch the fixed dimension, ie now a fixed height, the widths will vary just like the heights are now.

  19. Roy Ho
    Member
    Posted 1 year ago #

    No that would not work because your landscape ratio on the width side is too great. If you tried to do what you're saying, your images will be stretch so much it would look horrible...

    The width works because your images are in fact larger than that width area so it can scale down to fit. But if your height is much longer than the actual image, the image would need to stretch too much...

    Its really hard to explain...so I am not sure you will understand what I typed...

  20. slatchley
    Member
    Posted 1 year ago #

    Yes I believe I understand.

  21. Roy Ho
    Member
    Posted 1 year ago #

    Either way I look at it, it would not work because your width is also contained. For example you happen to have an image that is so wide that it goes out of the container, it would break the layout...so that doesn't work...

    All in all, I think you should settle with small thumbnails cropped...This is OK...because remember you're in list view...if people want to see the full image, they simply clicked into the detail of the product and from there they can see a bigger image and a fullscreen lightbox if they want.

  22. slatchley
    Member
    Posted 1 year ago #

    I guess I will just go to the ol' standby of a hard crop square thumb. Not terrible and it is what most sites use, including my gallery pages.

  23. slatchley
    Member
    Posted 1 year ago #

    Since you have been so helpful I dont suppose you saw my other post about the currency not being aligned properly and have any ideas on that, in the proper thread of course.

  24. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    I'm working on a site at the moment (not live yet) for an artist showing his paintings in a grid display and it sounds like I came up against the same issue.

    Here, the original canvases are different sizes so the aspect ratio of the images vary; some are landscape and some are portrait

    The best solution for me was to specify the featured image size as a square (use 385px × 385px as an example) with no cropping so the landscape one come out at 385px wide with a different heights and the portrait ones 255px high with different widths.

    As each image is within a link, we can use the link as a containing element specified as a 385px square with the image sittin inthe centre of the square at its original aspect ratio with either a shaded background showing top & bottom or a shaded background showing left & right

    The css I'm using for this is as below, perhaps something similar adjusted for your site would help?

    .artwork-featured-image a {
    	background: #ecede5;
    	border: 0;
    	float: left;
    	margin: 0 0 12px 0;
    	padding: 0;
    	height: 385px;
    	width: 385px;
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	overflow: hidden;
    }
    
    .artwork-featured-image a img {
    	position: absolute;
    	margin: auto;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
  25. slatchley
    Member
    Posted 1 year ago #

    Ill check it out. The problem for me is I have all the different ones in the same catalog, ie on the same page.I think just staying square is the best soulution as anything else would cause other problems.Thanks

  26. JeffEzzell
    Member
    Posted 8 months ago #

    I had all my pictures the way I wanted until my last update to wp e commerce 3.8.12.1 and now all the pictures are thumbnail size on single product. I tried to fix them with featured image editing and nothing worked. I have some products that are portrait and some landscape. If I fix one I lose the other.

    http://www.heraldryandcrests.com/heraldry-crests-products/coats-of-arms/

    Any Ideas. Is there a default I missed that changed the size of all my pictures?

    I tried media settings and store presentations and I can't seem to get pictures in different sizes on my single product pages.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic