Thumbnails Explained
CubeCart Thumbnails Explained
CubeCart generates product thumbnails automatically when you assign an image to a product. The size of the thumbnail is determined by the size setting you have entered inside the admin area under General Settings:
As you can see it only allows you to enter one number for thumbnail size. It doesn't allow you to enter both a width and a height. So what it does with that number is resize the longest side of the image to that number and the other side is then sized proportional to the original image.
Further explanation on size: If the product image is horizontal, or wider than it is tall, the width of the thumbnail will be the sized in pixels to the number that is set in general settings and the height of the image will be proportional to the height of the original image. If the product image is vertical or taller than it is wide, the height of the thumbnail will be the sized in pixels to the number that is set in general settings and the width of the image will be proportional to the original product image that you uploaded.
For example:
How this works in conjunction with the skin
It really depends on how your skin is coded. I'm going to use one of CubeCarts original skins Classic as an example of the problems and solutions for common problems with thumbnails. These techniques are used by many free and commercial skins available for CubeCart.
Thumbnails on the homepage in Latest Products
The thumbnails here are inside divs along with the product's title and price, imagine invisible boxes if you don't understand divs. These boxes float left and line up in horizontal rows. If your thumbnails are all the exact same height then you won't run into many problems. But if your thumbnails vary in height your layout might look like this:
A common fix for this problem is to add a height to the div that contains the the thumbnails, title and price:
v4 Classic already has this, and the newer versions of Classic that come with v3 also have this.
This is from 'layout.css':
div.latestProds {
float:left;
height:100px;
overflow:hidden;
text-align:center;
width:131px;
}
Using the example above, this almost works for all our images, except those that are too big.
An easy fix for this would be to increase the height of the div, here's an example of an increase from a height of 120px to a height of 195px so that we can see the entire image, it's title, and it's price.
This is from 'layout.css':
div.latestProds {
float:left;
height:195px;
overflow:hidden;
text-align:center;
width:131px;
}
The result:
For some people this fix is sufficient, for others they would like for the titles and the prices to line up, too. Here's where it gets tricky, because there are different ways to accomplish this.
One technique is the add a div that contains only the thumbnail and add attributes to that div that tell it to crop the image if the image is longer or wider than a certain setting. Here's how you do this:
Step 1: You need to add html to the template file. Open up yourskin/styleTemplates/content/index.tpl and find the thumbnail image:
<a href="index.php?act=viewProd&productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}" /></a>
Now you need to put that image inside a surrounding div, this is what that code looks like:
This is v3 code, v4 is very similar just use the same technique:
<div class="imgcrop"><a href="index.php?act=viewProd&productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}" /></a></div>
Step 2: You need to add the CSS for that surrounding div to 'layout.css':
.imgcrop {
height: 100px;
width: 100px;
overflow: hidden;
text-align:center;
margin:0px auto;
}
This code basically makes an invisible box that is exactly 100x100 any image that is larger that this will be cut off and will align top left inside the invisible box. Any image that is smaller than 100x100 will align top and centre.
Here's our example with this code (I also changed the height of div.latestproduct to 175px from 195px):
This will fix most, if you have mega-long product titles and want the prices to line up exact, you will need to use this same technique for the titles. Place the title in a surrounding div and give that div a height. This is just a basic example, you can get as fancy as you want for this area, you can even recode your category pages to look just like your latest product area.
Other issues:
Featured Product box will have issues with large thumbnails.
Fix technique #1, add code to the css which crops anything that tries to go outside of the box.
This is code from the 'layout.css' stylesheet:
.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
}
Add this:
overflow: hidden;
For example:
.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
overflow: hidden;
}
The result:
Fix technique #2, add a width to the image to it never can get too big.
This is code from yourskin/styleTemplates/boxes/randomProd.tpl:
<img src="{IMG_SRC}" alt="{PRODUCT_NAME}" border="0" title="{PRODUCT_NAME}" />
Now add a width:
<img src="{IMG_SRC}" alt="{PRODUCT_NAME}" border="0" title="{PRODUCT_NAME}" width="130" />
The result:
Fix technique #3, add a surrounding div to the image, set width and height and add an overflow:hidden; attribute. This is the same technique we used above for the Latest Product box.
Category pages for some skins will have issues with thumbnails that are too wide.
For example:
For the example above, any image over 190px wide will push table which contains it out too wide. You can use the same 3 techniques used above to fix this problem.
|
