WordPress.org

Ready to get started?Download WordPress

Forums

eShop
[resolved] Making thumbnails for eShop panels (19 posts)

  1. Peter Wooster
    Member
    Posted 1 year ago #

    Hi,

    I'm building a responsive catalogue site using eShop panels and would like to fix the size of the thumbnails so I can get predictable display behaviour. I posted a question on the "how to" forum but no one seems to know the answer.
    How to pad thumbnails instead of crop or distort

    Thanks/peter

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

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    This is handled by your theme - not eShop. The plugin simply used the core post thumbnail functionality.

  3. Peter Wooster
    Member
    Posted 1 year ago #

    Hi esmi,

    I know this should be handled by the theme (I'm the author) or by the media library. As it is I'm using javascript to force the size. What I hoped to find was either a plugin that does this, a hint where to hook into an action in the image processing to do it, or a way to wrap the image when it goes into the panel.

    Other than this eShop is working well for my project. I've replaced page by setting the checkout page id. So far I haven't had to modify any core functionality.

    Thanks/peter

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    This is well outside eShop's scope but what are you hooking the js to?

  5. Peter Wooster
    Member
    Posted 1 year ago #

    I'm using jQuery and the "ul.eshoppanels > li" selector.

    I'll post the test version of this on your "eshop sites showcase" when I get it running.

    Thanks/peter

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Can we see an example on a live site?

  7. Peter Wooster
    Member
    Posted 1 year ago #

    This is a very preliminary version of the test site. It still doesn't email the shopping list and needs lots of design work.

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    Is the images themselves that you're trying to control? Or the panels? If it's the former, what about using set_post_thumbnail_size() so that images are resized correctly at the upload point?

  9. Peter Wooster
    Member
    Posted 1 year ago #

    Hi esmi,

    It's the images that I want to control, I tried using a custom thumbnail size as you described in another thread, but the choice is still either crop=0 => distort, or crop=1 => clip. There is no built in way to pad the image to the size needed. It looks like the Javascript option is the only choice at present. Did you take a look at the site?

    Thanks/peter

  10. esmi
    Forum Moderator
    Posted 1 year ago #

    Why does soft, proportional crop cause a distorted image?

  11. Peter Wooster
    Member
    Posted 1 year ago #

    It's not distorted until you try to display it at the desired size.

    Eg. I have an image that is 200x400 pixels and I wish to display it at 100x100

    - the thumbnail gets sized to 50x100.

    - To make the panels arrange in a neat grid, the widths and heights must be the same, or I need to use tables which can't change their number of columns using css.

    - setting the width to 100px causes that 50x100 image to expand to 100x200 and the quality drops.

    - Now the heights aren't the same and floated panels arrange very poorly

    - set the height to 100 px, now that image is 100x100 and distorted.

    /peter

  12. esmi
    Forum Moderator
    Posted 1 year ago #

    Perhaps you should stop focusing on the images and look at the panels instead? You can fix the width of the panels and use overflow:hidden; to stop any larger images expanding the panels. If you also apply display:block;margin:0 auto; or similar to the images inside each <li>, that will centre any images too.

    Also consider setting the standard post thumb size to 100 x 100 using set_post_thumbnail_size . if you need larger thumbs elsewhere, add them add_image_size().

  13. Peter Wooster
    Member
    Posted 1 year ago #

    The current CSS works by adjusting the panel size, more or less as you suugest, except for the overflow:hidden which would clip the tall images. The JavaScript resizes them to get the appearance I'm looking for. I had hoped for a CSS only solution, but I haven't found it yet.

    Thanks/Peter

  14. Peter Wooster
    Member
    Posted 1 year ago #

    Esmi

    Thank you for all the attention you have given this problem, I'll post here if I find a solution Your dedication to support on these fora is one of the reasons I chose to use eShop. I've seen you in action on the "How To" forum and appreciate the effort you put into WordPress support.

    If you are interested in a Forrst invite, send me an email and I'll send you one.

    Thanks again/Peter

  15. esmi
    Forum Moderator
    Posted 1 year ago #

    I had hoped for a CSS only solution, but I haven't found it yet.

    Have you tried something like:

    .eshopanels li img {
    width:100px;
    height:auto;
    }

    Not sure how/if that would distort the images.

  16. Peter Wooster
    Member
    Posted 1 year ago #

    That is basis of the CSS that I'm using. The actual panel width is around 300px, represented as a percentage of the container size. These percentages are modified using media queries. I doesn't distort images, but it makes the narrow image too tall.

    ul.eshoppanels > li {
    	width:22.6%;
            margin:1.1%;
    	height:auto;
    }
    
    ul.eshoppanels > li a img {
    	float:none;
    	display:block;
    	margin:3% auto 0;
            width:94%;
            height:auto;
            border:0;
    }

    If you turn the Javascript off you can see the effect, it's very visible on http://eshop.devondev.com/shop/photography/animals/ which contains a very tall narrow image.

  17. esmi
    Forum Moderator
    Posted 1 year ago #

    With js enabled, it looks pretty good. TBH I don't think there is ever going to a perfect automated solution to this kind of issue. It always boils down to educating the site's authors regarding the images they need to be uploading. I usually try to stipulate a max and min size for clients as well as giving them a width:height ratio that they can apply to their images.

  18. Peter Wooster
    Member
    Posted 1 year ago #

    Thanks again esmi,

    On the production site, it's for a plumbing supply company, we'll probably be doing the image uploads (if we get the job), and I'll set standard sizes for images and thumbnails. The javascript works pretty well, and the fallback isn't terrible if you avoid very short or very narrow images.

    I'll definitely provide guidelines for the product creation and image upload process so others can operate it.

    /peter

  19. Peter Wooster
    Member
    Posted 1 year ago #

    The JavaScript I'm using appears to be the only solution, so I'm marking this thread as resolved.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags