Support » Plugin: eShop » Making thumbnails for eShop panels

Viewing 15 replies - 1 through 15 (of 18 total)
  • esmi

    (@esmi)

    Forum Moderator

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

    Peter Wooster

    (@pkwooster)

    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

    esmi

    (@esmi)

    Forum Moderator

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

    Peter Wooster

    (@pkwooster)

    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

    esmi

    (@esmi)

    Forum Moderator

    Can we see an example on a live site?

    Peter Wooster

    (@pkwooster)

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

    esmi

    (@esmi)

    Forum Moderator

    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?

    Peter Wooster

    (@pkwooster)

    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

    esmi

    (@esmi)

    Forum Moderator

    Why does soft, proportional crop cause a distorted image?

    Peter Wooster

    (@pkwooster)

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

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

    – the thumbnail gets sized to 50×100.

    – 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 50×100 image to expand to 100×200 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 100×100 and distorted.

    /peter

    esmi

    (@esmi)

    Forum Moderator

    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().

    Peter Wooster

    (@pkwooster)

    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

    Peter Wooster

    (@pkwooster)

    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

    esmi

    (@esmi)

    Forum Moderator

    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.

    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.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Making thumbnails for eShop panels’ is closed to new replies.