Proportional thumbnails in Storefront Elegance theme
The Problem
In the Storefront Themes, Elegance theme the thumbnails below the single product page image are always square. This is good in some ways because if you have uploaded images of varying shapes to your product gallery the layout will still be neat. If you have followed my mantra of uploading all of your images the same aspect ratio then you might wish that the gallery thumbnails were the same aspect ratio as your uploaded images. This can be achieved by bringing the image height into the calculations as well using the code below.
NOTE:
If you just have a problem with thumbnails overflowing the bottom of the post you can just implement the small change at the end of the post
Solution
You need to bring the image height into play as I said. We add the height in and then calculate the gallery height using that. You need to edit wpsc-single_product.php which is in the Elegance theme folder. If you have never edited PHP this can be done with simple cut and paste, so jump in and get your feet wet. See the editing PHP tools at the end of this post. remember to keep a safe copy of your original file, you can always swap back if you have a problem.
So open wpsc-single_product.php and find on or around line 48 you should see
$featured_image = get_post_thumbnail_id($id);
Scroll down and find this around line line 71
</div><!-- /END SINGLE PRODUCT GALLERY -->
If you replace those 2 lines and everything in between with the block of code below you will be done. If you want to know a bit more about what changed and what is happening read on below the code.
$featured_image = get_post_thumbnail_id($id);
$args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'offset' => '1' ,'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $featured_image,'numberposts' => 999);
$attachments = get_posts($args);
$numposts = count($attachments);
$roundheight = round($numposts / 2);
$thumbwidth = $image_width / 2 - 12;
$thumbheight = $image_height / 2;
$galleryheight = $roundheight * $thumbheight + 85 + $image_height;
if ($attachments) {$i = 0;
foreach ( $attachments as $attachment ) {$i++;
$thumbnail = wp_get_attachment_url( $attachment->ID , false );
$image = vt_resize('', $thumbnail, $thumbwidth, $thumbheight, true);
?>
<style>
#sft-single-product-gallery img.gallery {max-width:<?php echo $thumbwidth;?>px!important;}
</style>
<a rel="<?php echo str_replace(array(" ", '"',"'", '"','''), array("_", "", "", "",''), wpsc_the_product_title()); ?>" class="thickbox" href="<?php echo wp_get_attachment_url( $attachment->ID , false ); ?>"><img class="gallery" src="<?php echo $image['url']; ?>" alt="<?php the_title(); ?>" width="<?php echo $thumbwidth;?>" height="<?php echo $thumbwidth;?>" border="0" /></a>
<?php }
} ?>
<?php $imagecolheight = $thumbwidth * $i / 2 + $image_height + 50;?>
<style>
div.single_product_display div.textcol {min-height:<?php echo $galleryheight;?>px!important;}
<?php if ($numposts > 1) {?>div.single_product_display {min-height:<?php echo $galleryheight + 90;?>px!important;}<?php } ?>
</style>
<div class="clear"></div>
</div>
<!-- /END SINGLE PRODUCT GALLERY -->
Line 54.
Adds a thumbheight variable which stores the image height divided by 2, just as thumbwidth already does for the width. Yes obviously you could fiddle with these numbers and get 3 or 4 thumbnails per row instead of 2 below your main image. Some margin and padding adjustments may be required.
Line 55.
Use the height to calculate the height of the whole gallery instead of the width as it is by default. It is OK to use the width to do height in the default setup because the thumbnails are square.
Line 59.
Adds the height into the code that resizes the images into thumbnails, replacing one of the width variables. This code actually generates your thumbnails.
Line 69.
This is actually more of a bug fix. galleryheight is added here to stop the thumbnail gallery overflowing the container div into the footer. This sets the container to be tall enough to contain image and gallery.
Thats it, if you have done it right you should have proportional non square thumbnails and they should stay nicely in the content area and out of the footer.
Just fix the overflow and keep square thumbs
If you are happy with square thumbnails but have the problem mentioned earlier of the thumbnails overflowing into the footer, try this to fix it . Do not make any of the changes above. Find this line at or about 67
div.single_product_display div.textcol {min-height:<?php echo $imagecolheight;?>px!important;}
replace it with line 69 from the big block of code above.
Tools:
You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
4 Comments
Glenn Ferrell
September 7, 2012Mark — Thanks much ! Everything is working on products page, single products page and carousel. Here’s the code and procedure:
/* The additions to custom.css */
/*Chg .imagecol as you suggested but must be the imagecol within the single_product_display or the products page goes south */
div.single_product_display div.textcol div.imagecol {
width:300px;
}
.product_image{
width: auto !important;
}
/* Fixes the carousel image distortion problem */
.home-carousel img {
width: auto !important;
}
/* Rule below fixes carousel li problems in Chrome and IE. (for Carousel showing 5 images. Will be different for different numbers of images) */
.home-carousel li{
width:163px !important;
}
Process: Upload image at full size as you suggested. I had already specified that all images be uploaded with a max dimension of 1024px but I wasn’t aware that if I didn’t select “full size” I would be getting two images this size stored. Good tip.
Then, for portrait format images only, go into “Manage Product Images”, “show”, find the width and height values beside “Default Product Thumbnail Size” and copy those into the input fields for width and height beside “Products Page Thumbnail Size” and “Save all Changes.”
This all seems to be working in IE8, Firefox and Chrome so far. Thx for your help 🙂
Glenn Ferrell
September 7, 2012Missed copying one rule:
div.textcol {
text-align: center !important;
}
Thx.
mgason
September 7, 2012Hi,
the checkboxes in media manager do not effect display. They effect what size image is generated and stored. I prefer to use “full size” that way the full image is uploaded and the other sizes are generated. I usually keep my uploaded image to a reasonable size for the lightbox image on single product pages. That is more of a storage space decision.
Are you sure you are not missing something here. The code above is for the gallery of thumbnails below the main image when you upload multiple images. You can set the size/shape of the product grid images and the single product page images. They can be any shape but must be the same shape. Settings/Store/Presentation tab “Default Product Thumbnail Size:’ and “Single Product Image Size:”
1. Not much to do but use custom post type as you mention
2. With your CSS what happens on the Products page and category pages, not the single product page?
You should read 3 posts that you can find via the “working with images” link in my sidebar
WP e-Commerce – how do I choose an image size and what do all the settings do?
WP e-Commerce – image size and what do all the settings do?
WP e-Commerce, adding a product image
Not sure it is the right way to go but the fix for your CSS is st o set the width of the image container to the size of the space and use text-align as the image is in the href.
.imagecol {
text-align: center;
width: 300px;
}
Glenn Ferrell
August 22, 2012Great detailed post !
I just ran into this problem with a client who will not accept square thumbs because of the way they crop the image – so I’m newly motivated to solve this. However, I’m really resistant to changing the PHP unless it turns out there is no other way.
This is where I’ve gotten so far…
In Manage Project Images, of the 3 image size radio buttons, whether I select “Default Product Thumbnail Size”, “Single Product Image” or “Full Size” it seems to have no effect on the way the thumbnail displays. However, if I select any one of these and then transfer the width and height values to the text boxes (the values that show with the first 2 radio buttons), the entire image (un-cropped) is shown in the product page — only distorted because the “product_image” class is using a fixed height and width of 148 px.
So if I add this CSS rule to my custom.css file:
.product_image {
width: auto !important;
}
The whole image now shows in the proper aspect ratio in the product page.
However, two problems remain:
1) The carousel uses the same width and height settings that I entered in Manage Project Images. Therefore it is now distorted.
2) And, less of a problem, in the gallery, the new and improved thumbnail is left justified within its div.
Problem 1 – I can live with because we are already in the process of changing the carousel from showing Product Images to showing Carousel Type Posts. (The Carousel Type Posts are obviously unaffected by whatever customization we do for any individual product image.)
Problem 2, however, is still not resolved. I tried adding “display:block !important; margin-left:auto !important; margin-right:auto !important;” to the “product_image” class, to center the image, and this isn’t working.
Anyway – thought I’d share what I’m doing and see if you had any additional insights.