Support Forum - Tag: Product Thumbnails

Support Forum - Tag: Product Thumbnails - Recent Posts http://www.kriesi.at/support/tags/product-thumbnails Support Forum - Tag: Product Thumbnails - Recent Posts en-US Thu, 23 May 2013 01:08:26 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Ismael on "Turn off hover states on thumbnails of products" http://www.kriesi.at/support/topic/turn-off-hover-states-on-thumbnails-of-products#post-96279 Tue, 12 Feb 2013 04:41:11 +0000 Ismael 96279@http://www.kriesi.at/support/ Hi, Edit woocommerce-config > config.php and find this code <pre><code>echo "<div class='thumbnail_container'>"; echo "<div class='thumbnail_container_inner'>"; echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' ); echo $link; echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>"; if(!empty($rating)) echo "".$rating.""; echo "</div>"; echo "</div>";</code></pre> Replace it with this code <pre><code>echo "<div class='thumbnail_container'>"; echo "<div class='thumbnail_container_inner'>"; echo "<a href='".get_permalink($post->ID)."'>".get_the_post_thumbnail( get_the_ID(), 'shop_catalog' )."</a>"; echo "</div>"; echo "</div>";</code></pre> Regards, Ismael MarkHuntley on "Turn off hover states on thumbnails of products" http://www.kriesi.at/support/topic/turn-off-hover-states-on-thumbnails-of-products#post-96247 Mon, 11 Feb 2013 22:49:42 +0000 MarkHuntley 96247@http://www.kriesi.at/support/ Hi, is it possible to turn off the buttons that show on hover over the thumbnails of a product. And if it is possible would the image become clickable to view the full info etc. Thanks Mark landapixel on "Products + Categories Thumbnails Not Looking Right." http://www.kriesi.at/support/topic/products-categories-thumbnails-not-looking-right#post-71310 Thu, 16 Aug 2012 05:20:53 +0000 landapixel 71310@http://www.kriesi.at/support/ Thanks for the reply, I was just wondering and thought that maybe I was doing something wrong. Anyway, I will try and do that. Ismael on "Products + Categories Thumbnails Not Looking Right." http://www.kriesi.at/support/topic/products-categories-thumbnails-not-looking-right#post-71308 Thu, 16 Aug 2012 05:17:12 +0000 Ismael 71308@http://www.kriesi.at/support/ Hi landapixel, This can't be fixed by css alone. You need to re-upload the product images and should have a size of 450 x 450px. Try to use image editors like Adobe Photoshop to crop the image to size mentioned. This would make your product images consistent. Regards, Ismael landapixel on "Products + Categories Thumbnails Not Looking Right." http://www.kriesi.at/support/topic/products-categories-thumbnails-not-looking-right#post-71289 Thu, 16 Aug 2012 00:56:59 +0000 landapixel 71289@http://www.kriesi.at/support/ Here is a link to the site. <a href="http://www.sitewp.lcsinfo.com" rel="nofollow">http://www.sitewp.lcsinfo.com</a> Ismael on "Products + Categories Thumbnails Not Looking Right." http://www.kriesi.at/support/topic/products-categories-thumbnails-not-looking-right#post-71242 Wed, 15 Aug 2012 21:20:02 +0000 Ismael 71242@http://www.kriesi.at/support/ Hello, Can you give us a link on your site? Or you can add this on your custom.css <pre><code>.attachment-shop_catalog.wp-post-image { max-height: 150px !important; min-height: 150px !important; }</code></pre> Adjust the values. Regards, Ismael landapixel on "Products + Categories Thumbnails Not Looking Right." http://www.kriesi.at/support/topic/products-categories-thumbnails-not-looking-right#post-71236 Wed, 15 Aug 2012 20:42:12 +0000 landapixel 71236@http://www.kriesi.at/support/ Hello, I am started placing images for products and for product categories, but some most of the product thumbnails are not looking right. The product thumbnails come up longer than others so it makes the layout look all bad. Can you please let me know what i am doing wrong? Thank you in advanced. Devin on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70955 Tue, 14 Aug 2012 12:24:38 +0000 Devin 70955@http://www.kriesi.at/support/ Glad Nick was able to help you solve that! Regards, Devin joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70952 Tue, 14 Aug 2012 12:20:27 +0000 joemalf 70952@http://www.kriesi.at/support/ That did it, Nick! Thank you for all the help, brother! The site's looking good and functioning real well. *Resolved* All the Best, Joe Nick on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70847 Mon, 13 Aug 2012 20:08:51 +0000 Nick 70847@http://www.kriesi.at/support/ Please try this , replace the entire block you pasted above with the one below <pre><code>//echo "<div class='thumbnail_container'>"; echo "<div class='thumbnail_container_inner'>"; echo "<a class='porfolinki' href='".get_permalink($post->ID)."'>".get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' )."</a>"; //echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' ); echo $link; echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>"; if(!empty($rating)) echo "".$rating.""; echo "</div>"; // echo "</div>";</code></pre> Thanks, NIck joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70840 Mon, 13 Aug 2012 19:39:25 +0000 joemalf 70840@http://www.kriesi.at/support/ Sorry about that Nick - I got my definitions mixed up. I meant to ask about keeping the thumbnail_container but allow it to link to the product page when clicked. Would this be doable? Thanks for looking out! Nick on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70827 Mon, 13 Aug 2012 18:09:55 +0000 Nick 70827@http://www.kriesi.at/support/ Hi Joe, Mistake was mine. Please try this. substitute this line (from above) <pre><code>echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );</code></pre> to look like <pre><code>if ( function_exists( 'is_product' ) && is_product() ) { echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' ); } else { echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' ); }</code></pre> jQuery would be nicer, I am just worried in some browsers it may flicker for a split second and this will do the trick. Let me know how it works out, Thanks, Nick joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70623 Sat, 11 Aug 2012 20:41:37 +0000 joemalf 70623@http://www.kriesi.at/support/ Thank you for all the help. With a little back and forth on the code I was able to get it to react correctly. Would it be possible to modify the echo "<div class="thumbnail_container">; code that you supplied early to take it off of the related products? <a href="http://joemalfprints.com/shop/moor-ii/">Example</a> And modify column widths to fill empty space/left-align products. So far, influencing the number of columns cuts off the product images. <a href="http://joemalfprints.com/featured-prints/triptychs/">Example</a> joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70622 Sat, 11 Aug 2012 20:34:15 +0000 joemalf 70622@http://www.kriesi.at/support/ I got it all product images to fit on the shop catalog and related product sections. The process is documented below: 1. All instances of “width:100%;height:auto;” for images in woocommerce-config > woocommerce-mod.css were removed. <a href="http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem">http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem</a> 2. The below codes was placed into woocommerce-config > config.php <pre><code>//echo "<div class='thumbnail_container'>"; echo "<div class='thumbnail_container_inner'>"; echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' ); echo $link; echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>"; if(!empty($rating)) echo "".$rating.""; echo "</div>"; //echo "</div>"; }</code></pre> 3. Image parameters were placed into woocommerce-config > woocommerce-mod.css via this code. (this instance was for images with a 300px max-width) <code>.attachment-shop_catalog.thumbnail_container.wp-post-image {max-width:300px; height:auto; max-height:300px; width:auto;}</code> 4. Image parameters for related products/upsells were placed into the same document, woocommerce-config > woocommerce-mod.css <pre><code>.related ul.products li.product img, .upsells.products ul.products li.product img, .related ul li.product img, .upsells.products ul li.product img{ height:100%; height:150px; width:auto; max-width:600px; }</code></pre> Nick on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70585 Sat, 11 Aug 2012 11:44:15 +0000 Nick 70585@http://www.kriesi.at/support/ Hi Joe, Glad you like the fix. I hope I understood your question, if not the fault is mine: You can put in the max height, but would have to remove the min height, since in the 3 pages you show, the max height would be lower than the min height. which is essentially useless since it always equals the actual height. Need to remove all the min-heights, and add a consistent max height to have all the images of identical height. (below is example of 500px). <pre><code>.attachment-shop_catalog.thumbnail_container.wp-post-image {max-height:500px;}</code></pre> If you have on the same page one image on 20px x 400px and a second image of 400px x 20px , it will be not easy to make them both fit perfectly side by side, without making one or both of the images lose quality. Thanks, Nick joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70536 Fri, 10 Aug 2012 22:40:06 +0000 joemalf 70536@http://www.kriesi.at/support/ Hey Nick, I love that code. I think it's doing something really good. It cleaned up a lot on the hover and I really appreciate the static 'show details' button. Now I feel there is an image constraint issue left. It seems like the prior code you supplied is accommodating varying product image dimensions, it just may now call for some sort of height-max? They do exist in my Woocommerce and Wordpress settings, but don't seem to be affecting these. What do you think? <a href="http://joemalfprints.com/featured-prints/triptychs/">Example [1]</a> <a href="http://joemalfprints.com/shop/">Example [2]</a> <a href="http://joemalfprints.com/shop/moor-ii/">Example [3]</a> Again, thank you so much. Nick on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70449 Fri, 10 Aug 2012 07:45:50 +0000 Nick 70449@http://www.kriesi.at/support/ Hi Joe, There's probably a better way to do this, but for the life of me I can't think of one. I can tell you a quick work around and you can decide whether it suits you, because visually the experience seems to be identical. What we basically going to do, is rip the class thumbnail_container from the div and place it in front of the classes on the images. This way no matter what the size of the thumbnail, is , the hover effect will know the constraints even if each thumbnail has unique dimensions. So lets open config.php in woocommerce-config directory, and look on line 343 or so for : echo "<div class="thumbnail_container">; now please look at the code below, that is how that small block should look. <pre><code>//echo "<div class='thumbnail_container'>"; echo "<div class='thumbnail_container_inner'>"; echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' ); echo $link; echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>"; if(!empty($rating)) echo "".$rating.""; echo "</div>"; //echo "</div>";</code></pre> Please let us know how it worked out. Thanks, Nick joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70333 Thu, 09 Aug 2012 18:16:59 +0000 joemalf 70333@http://www.kriesi.at/support/ Hey Nick/Crew, I went through the link you mentioned and followed the instructions. I went into the Wordpress Media Settings as well and turned off 'hard crop'. This did a pretty good job after I re-uploaded the images. I made a few other customizations to the code and have attempted further ones. There are only two things left which I am sure are minor corrections, but tough for me to figure out. Here's what is left: - I would like to fit the product thumbnail containers to the product images contained within them. Also, the height of the landspace product image container is larger. <a href="http://joemalfprints.com/featured-prints/triptychs/">Example</a> - I am finding that the lanscape product image is not accommodated width-wise on the product page layout. Perhaps there is a max/min value that would do it? <a href="http://joemalfprints.com/shop/">Example</a> Again, if there is more information required, let me know. I feel like I'm just over-looking a set of values and may have to deal with values on the product page coding. Thank you again. Nick on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70293 Thu, 09 Aug 2012 14:33:02 +0000 Nick 70293@http://www.kriesi.at/support/ Hi Joe, There are a few places where the constraints for images are defined besides the WooCommerce, so first lets take a look at them. In Wordpress, Settings>Media, (not the theme but Wordpress itself) there should be a check-box there 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' which is a second hard-crop directive. The page below discovered css fixes that seems to work for majority of WooCommerce plugin users. The problem seems to be that some work for some, and others work for others. See if this helps, because judging from the reactions, it does. <a href="http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem" rel="nofollow">http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem</a> Please let us know how you are getting along, Thanks, Nick joemalf on "Product Thumbnail to Fit Image Orientation" http://www.kriesi.at/support/topic/product-thumbnail-to-fit-image-orientation#post-70042 Wed, 08 Aug 2012 19:17:33 +0000 joemalf 70042@http://www.kriesi.at/support/ Hey All, I am looking for a way to display product thumbnails in their respective image orientations (portrait, landscape). An example of such a shop can be seen at art.com > <a href="http://www.art.com/gallery/id--a126/salvador-dali-posters.htm">orientation shop example</a> My shop is of a similar experience, as I am selling artist prints. It is therefore necessary to showcase the imagery in its entirety as direct as possible on the front-end. <ul>For now the thumbnails show at 300x300 and do not fit the images' proportions.</ul> Unchecking the 'hard crop' option on Woocommerce > Settings > Pages has not done anything (even after regenerating the thumbnails). My site's shop can be seen here > <a href="http://joemalfprints.com/shop">right here</a> Some images will be landspace, others portrait. The product images uploaded will be of a 3:2 proportion - The minimum dimension being 200px, the maximum being 300px (ie; landscape = 300x200 , portrait = 200x300). I have looked at all other forums regarding a topic of this sort and have found that the thumbnail code within 'abundance/woocommerce-config/woocommerce-mod.css' is the most appropriate and I have found it most responsive to product image changes. All other files have not responded. I am thinking it can be solved with some sort of responsive or conditional css code made with parameters to catch dimensions and suit the outcome accordingly. However, I have yet to come across anything satisfying, accurate, or functional. Let me know if you need any other information or links. Thank you in advance. yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-57018 Tue, 22 May 2012 12:26:27 +0000 yogasankara 57018@http://www.kriesi.at/support/ Hi Devin, thanks a lot, it was not my question but it will be fine also like that ;)) MERCI, have a great day, bests regards Raphaël Devin on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-56936 Tue, 22 May 2012 00:29:16 +0000 Devin 56936@http://www.kriesi.at/support/ Hi Raphaël, This should fix what the other changes have added conflicting rules for: <pre><code>#top .shop_columns_3 .products .product { width: 30.5%; }</code></pre> Regards, Devin yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-56358 Wed, 16 May 2012 22:57:50 +0000 yogasankara 56358@http://www.kriesi.at/support/ Merci Thanks, But i still have the problem of display of thumbs, it put 2 thumbs on the first line then 1 on the second line. After restart 2 thumbs on the third line then 1 on the forst one... I do not understand why ? ie: <a href="http://massage-a-domicile-paris.fr/boutique/cat%C3%A9gorie-produit/les-massages-domicile/" rel="nofollow">http://massage-a-domicile-paris.fr/boutique/cat%C3%A9gorie-produit/les-massages-domicile/</a> Thanks again, bests regards to you all ;) Raphaël Dude on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-56113 Tue, 15 May 2012 05:46:28 +0000 Dude 56113@http://www.kriesi.at/support/ The image on this page is 430x622: <a href="http://massage-a-domicile-paris.fr/wp-content/uploads/2012/05/Fotolia_4534681_M-430x622.jpg" rel="nofollow">http://massage-a-domicile-paris.fr/wp-content/uploads/2012/05/Fotolia_4534681_M-430x622.jpg</a> - the slider displays the full version and doesn't crop the image. If you want to limit the height value open up functions.php and replace: <pre><code>$avia_config['imgSize']['blog'] = array('width'=>430, 'height'=>9999, 'crop'=>false); // image for blog posts</code></pre> with: <pre><code>$avia_config['imgSize']['blog'] = array('width'=>430, 'height'=>9999, 'crop'=>true); // image for blog posts</code></pre> and instead of 9999 use a reasonable height value (eg 300px). Afterwards regenerate the thumbs with: <a href="http://wordpress.org/extend/plugins/regenerate-thumbnails/" rel="nofollow">http://wordpress.org/extend/plugins/regenerate-thumbnails/</a> yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55662 Fri, 11 May 2012 03:16:06 +0000 yogasankara 55662@http://www.kriesi.at/support/ second ie is now: <a href="http://massage-a-domicile-paris.fr/boutique/cat%C3%A9gorie-produit/les-massages-domicile/" rel="nofollow">http://massage-a-domicile-paris.fr/boutique/cat%C3%A9gorie-produit/les-massages-domicile/</a> Thanks for helps, this is a big trouble for design, bests regards, Raphaël yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55486 Thu, 10 May 2012 07:31:39 +0000 yogasankara 55486@http://www.kriesi.at/support/ Thanks again a lot Devin and All Staff, but there is a bug or mistery happens now: (on this page the product thumbs are differents size, should be the same ?) ie: <a href="http://massage-a-domicile-paris.fr/boutique/massage-thailandais-duree-45-minutes/" rel="nofollow">http://massage-a-domicile-paris.fr/boutique/massage-thailandais-duree-45-minutes/</a> (And on this page, the first line product thumbs is perfect but after they go one over the other ?) ie: <a href="http://massage-a-domicile-paris.fr/categorie-produit/les-massages-domicile/" rel="nofollow">http://massage-a-domicile-paris.fr/categorie-produit/les-massages-domicile/</a> I really don't understand from where it could come this is mistery for me... Thanks for your help if you understand something, you are welcome ;) Bests Regards, Raphaël yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55391 Wed, 09 May 2012 18:44:19 +0000 yogasankara 55391@http://www.kriesi.at/support/ BIG BIG THANKS Devin ;) I am looking now to fixed the size of the category picture with regenerate thumbs after, but it works ;))) Merci beaucoup, bests regards, Raphaël Devin on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55376 Wed, 09 May 2012 17:49:55 +0000 Devin 55376@http://www.kriesi.at/support/ Hello Rapaël, Additionally add the following so that the woocommerce pages ignore the other fix: <pre><code>#top.woocommerce .product { width: auto; }</code></pre> Regards, Devin yogasankara on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55360 Wed, 09 May 2012 16:26:43 +0000 yogasankara 55360@http://www.kriesi.at/support/ Hi Devin, thanks for your time and purpose, but they have a bug after changes : ie: <a href="http://massage-a-domicile-paris.fr/boutique/massage-thailandais-duree-45-minutes/" rel="nofollow">http://massage-a-domicile-paris.fr/boutique/massage-thailandais-duree-45-minutes/</a> How should i modified this only on the page like this: ie: <a href="http://massage-a-domicile-paris.fr/massages/massage-assis/" rel="nofollow">http://massage-a-domicile-paris.fr/massages/massage-assis/</a> Bests regards, ;) Rapaël Devin on "how to change thumbnails size on posts or page using [product id="" sku=""]" http://www.kriesi.at/support/topic/how-to-change-thumbnails-size-on-posts-or-page-using-product-id-sku#post-55055 Mon, 07 May 2012 20:45:53 +0000 Devin 55055@http://www.kriesi.at/support/ Hi Raphaël, Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files: <pre><code>#top.page .product, #top.page .product.first, #top.single .product, #top.single .product.first { width: 40%; }</code></pre> Regards, Devin