Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #21873

    Sorry if I confuse anyone, but I had originally posted this as a second question in a different thread, but it got overlooked there and it’s going to delay launch if I can’t get it resolved soon.

    I have set my product image heights in the catalog tab of Woo Commerce as this:

    catalog: 160px

    single: 240px

    thumbnail: 80

    I have made sure that the product images I upload and attach to the slideshow on each product page are actually sized at 240px height. They are also higher resolution images (96 dpi) and while they do look a little sharper on the single product page than on the catalog page or the “featured product” excerpt on my homepage, even there they are not true to the original quality.

    In this featured product section on oils4relief.com/welcome they appear to be different sizes (although both products were sized to be the same) and look like they’ve been blown up so much they’ve become blurry (and yes, I did run the regenerate thumbnail plugin on everything). They also don’t look like they are adhering to the sizes I set above in this section, on the Oils Shop page or on the single product page.

    Where and how do I straighten that out? I have about a hundred more products I need to get input immediately to stay on track for April 15 launch.


    Thank you so much for the clear reply. I’m off to try this out right now.

    I started another thread with questions about designating my site’s homepage (the page I designated as home is NOT the one that appears when you type in the naked domain name or click on the logo image) and a second one asking what I could do about my product images being so blurry (they look like I’ve tried to blow them up from small resolution images when in fact they’re reduced in size from very good resolutions).

    Should that product image question have been raised in here?

    (I added your question from the other post to here. Sorry but otherwise that other thread will just become a source of aggravation instead of a place of meditation and healing. I will answer your question below . Nick.)

    —-

    Thanks,

    Liz

    #113416

    Hi,

    Sorry didn’t mean to be rude, by yanking you out of that other thread, (well actually deleting your comment and pasting it into your top one) but I don’t have any commands at my disposal to transfer a reply. I am writing up the answer to your question now however, so I hope no hard feelings. Otherwise that other thread will become a mess. lol.

    Thanks,

    Nick

    #113417

    Hi again,

    Ok. You should download and install Simple Image Sizes Plugin since it will centralize all image presets from the Theme and all Plugins (WooCommerce) in the Settings > Media page, as well as allow you to dictate if WordPress should crop or not and regenerate images after you make any changes. The text boxes within WooCommerce are overridden by the Theme so I am not sure how well they work since in /config-woocommerce/config.php on lines 13-17, there is a completely different set of image sizes for Woo to use. So please install http://wordpress.org/extend/plugins/simple-image-sizes/

    DPI have no relevance online and are only for printers, so if you upload an image 1 DPI and another 100000 DPI both of which are 400x400pixels , and put them next to each other on a web page, there will be zero difference between them. A pixel is a unit of measure online while dots per inch (dpi) are for printers (try printing that 400x400pixel image at 100000dpi and you will see what i mean).

    Before uploading an image, ask yourself what is the biggest size you plan to display that image in and just in case add 10% , the point is, always upload images bigger then the space provided for them (just in case). Because lets say you want users to be able to click on your image to get a large image of the product. If you uploaded a 200px height image, it will become blurry when WordPress will try to ”enlarge it”. Reduction on the other hand (when done proportionally) will never make an image blurry.

    Lets take the page you provided oils4relief.com/welcome, and look at Lavender Essential Oil (32$). You uploaded some image in size unknown, and wordpress immediately created about 16 versions of that image and saved them on the server, one for each of the many pre-set image sizes found in the Theme and in WooCommerce (since wordpress isn’t sure exactly where you plan to use the image). When you uploaded the image , you are given a choice of how you want to save it, and you should ***always chose to save it at 100% or original size*** , this way all the 17 images will get generated from the 100% full size that you uploaded http://i.imgur.com/uimw2Cx.png instead of from a 50x32px that you may have selected.

    So this http://oils4relief.com/wp-content/uploads/2012/12/lavender-x240-64×120.png is the Lavender image as is saved on server 64x120px. And since there is room on that page for an image 170x319px , and since the other bottle on that page has the same width but a different hight, then its safe to assume that 170px is the correct width constraint for this page, while height will be variable. So, this means that in Settings > Media, you need to add the following constraint (via simple image sizes plugin) – width = 170 ; height = 9999, and make sure there is no crop set. So with these settings, when you upload an image, the image will keep shrinking until its width becomes 170 and height is left alone. (so image looks proportional. )

    Remember that just because you set the size of an image as 170 x 319 ***does not*** mean you are getting a 170 x 319 image unless you have a hard crop set!!!!! This is very important. What if you upload an image 1000px height and 10px wide or you upload an image 319×170 with the settings at 170×319 . I have posts on here were I go deeper into this with formulas and equations and solving for x, …. But you basically need to ensure that all the initial images you upload for this particular location conform to rules regarding their aspect ratio (width/height).and if they don’t , then you use photoshop or something else to prep them prior to uploading. (there is a plugin to help you with that… http://wordpress.org/extend/plugins/resize-images-before-upload/

    So if all your product images are shaped like rectangle portraits, then you should make sure that the images you are initially uploading are proportional to 170×319 (this way they will shrink down without the need for anything to be cropped) so 340×638 is proportional to 170×319 for example. If this is confusing., no worries, just upload 10 identical images having 10 different names, one at a time while changing the presets between each upload, and you will see how it works.

    Regeneration only works when you have a full sized image because there isn’t much you can regenerate from a microscopic 50×32 image.

    If you need help, usjahm (at) gmail (dot) com , send me credentials please and I will set you up real quick.

    Nick

    #113419

    Thanks for moving the thread, I wasn’t sure where it belonged, but I know I need to get this resolved and fast. I understand your response and will go through all that if I have to, but I think there is something else going on here that is more directly related to the theme itself. I have Propulsion 1.9.1 and I’m running WordPress 3.5.1 with WooCommerce 2.0.5 so I’m all up to date.

    I realized last night that you have removed the “Feature Image” option on the Product pages. I am forced to enter images in a slideshow. The slideshow is preset to be sized at 468x by something, so I think it’s taking my images and outputting them at that size, then using that as the original image size to recalculate all the others.

    I had originally uploaded the Lavender image, for example, at 174×320. It’s the height I want to keep constant as I think that makes the catalog grid view more pleasing. The width can and will be variable by image. I saw that was going to be too large, so I deleted that and tried again with an image at 94×240. I have a catalog of about 100 products I will need to input and I have already sized all the images to be proportionally correct and true to that height.

    I can and will upload much larger proportional images and let WordPress do its thing on resizing for all the different places, but I do not want single product images the size required for a slideshow. In fact, I do not want a slideshow on single product pages at all. I want my “featured image” and additional image gallery back as it is in WooCommerce standard.

    How do I do that? BTW, I appreciate the way you guys answer questions; you’re both prompt and clear. You’ve made it easier for me to follow along and get things done.

    Thanks,

    Liz

    Liz

    #113420

    Hi Liz,

    The theme replaces the built in options for WooCommerce and the first image you set in the slideshow is automatically set as the featured image. There is nothing else going on behind the scenes as you describe however, the issue is just starting off with a larger image than the space needed for the single product page.

    If you have a large number of product images that are only 94 pixels wide, they will be stretched to fit the space every single time and look pixelated.

    The size of the image that the theme tells wordpress to generate for the single product page is 450 wide by 355 tall. It can be found in the config.php file in the config-woocommerce file. For example, this item from the demo: http://www.kriesi.at/themes/propulsion/shop/another-test-product-with-a-multiple-images/

    Uses this generated image: http://www.kriesi.at/themes/propulsion/files/2011/12/prev2-450×335.jpg

    Regards,

    Devin

    #113421

    Thanks Devin,

    I will resize all my images to 450×355 tall. If I do that though, will the theme then follow the directions I input in WooCommerce catalog tab to size single images at yx240, catalog images at yx120 and thumbnails at yx80, or will I have to use either thumb regeneration or the simple image size plugin to make sure those images appear at those sizes?

    Thanks,

    Liz

    #113422

    Yes, it will generate those sizes (for all newly updated photos).

    #113423

    Did not work at all Devin. I am sending an email to the gmail address Nick provided because now there are weird things happening and I am not able to view one of my two test products on a product detail page at all and all I did was delete the old image and upload a new one proportional to your slideshow.

    I would like to set up a temporary admin user so someone there can go in and take a look and tell me what can be done to fix this. Your preferred slideshow size is totally inappropriate for my product images and my efforts to make the math work are just making things worse.

    Thanks in advance to whoever can respond fast and help me!

    Liz

    #113424

    You can create a temporary admin account and send me the details if you would like. Typically, this process is much more simple. You start with an image at least 450px by 450px, upload it to your product and save. For the majority of users this is the end of that process.

    Changing the image generated is really not needed and doesn’t actually do much on the front end because the size displayed is handled by CSS.

    From the sound of it, there are other complications happening or something interfering in the normal process of things that isn’t coming acorss in the description so far.

    You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn’t grab it :)

    #113425

    Hi,

    Here are those css you asked for and hopefully we can close this thread. :)

    /*
    
    tab - the current bg + and hover
    */
    #top div.product .woocommerce-tabs ul.tabs li.active a {
    background-color: purple;
    }
    #top div.product .woocommerce-tabs ul.tabs li.active a:hover {
    background-color: green;
    }

    /*
    tab - not the current bg + and hover
    */
    #top div.product .woocommerce-tabs ul.tabs a {
    background: blue;
    }
    #top div.product .woocommerce-tabs ul.tabs a:hover {
    background: red;
    }
    /*
    font color
    */
    #top .woocommerce-tabs .tabs a {
    color: rgb(145, 145, 145);
    }

    (it may not work because of specificity, in that case , please replace all four semi colons ; — !important; (and making sure that there is one empty space after the name of the color ..ie.. red !important;

    Thanks,

    Nick

    #113426

    Nick thanks for all your help all day today. I’m not glad to have brought you such a weird linking problem, but I am glad you were able to figure it out as well as my problems with the images and now this.

    Liz

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Product Image Resolutions and Sizes not right’ is closed to new replies.