Border Around Product Images

[Kayz]

I am using Zen Cart 1.3.8

I would like to add a 1px or 2px thick border around my subcategory images to help make them look more uniformed. Kind of like the website below.

http://www.world-of-entertainment-uk...index&cPath=66

My images are all different mainly due to being in different layouts, landscape and portrait.

Can anyone tell me how to do this. I want an even 150px x 150px border around each image, but only on the subcategory pages. The rest of my images are fine as they are.

The border should be the same color purple as the rest of my site.

I think that this will give the illusion that my images are more uniformed then they really are.

Any help with this would be great.

[Kayz]

Any ideas anyone?

[schoolboy]

Not sure what you mean by "sub-category" images.

Strictly speaking, "category images" are those used to illustrate a CATEGORY.

I think you are talking about PRODUCT LISTING IMAGES.

The site you refer to is a heavily customized template, but they get the border by doing something similar to this:

img.listingProductImage {
	border:#8b6a3d 1px solid;
	padding:15px;
	}

So if you paste that at the bottom of your stylesheet, and play with the HEX CODE, you will get the same effect.

[Kayz]

What I mean by sub category images is the photos of my products under a sub category.

Example: I have a category named Outwear>

under that category I have sub category's named dresses, gowns, pants and others.

The photos that show when I click on one of these sub category's is the photos I want to make a border around.

They are all different in the way of widths so I want to make a frame around each photo so that they look like they are the same widths.

I hope this has clarified it a bit for you.

Here is a link to one of my pages: http://passionsignite.com.au/zen-car...ex&cPath=96_97

Have a look and you will see what I mean.

I did manage to make a border around the photos but the boarder would only go around the images as they are and not be a simple 150px x 150px without altering the image to match those dimensions.

If that make sense.


Thank you.

[schoolboy]

OK this is a really crude HACK... but it may achieve the desired effect.

The only way to ensure that all images display consistently is to make sure they are all of the same dimensions AND aspect ratio.

This has to be done on a good image editor...

Anyway, try this crude hack for now:

img.listingProductImage {height: 65%; width:65%; padding: 5px; background-color: #fff; border: 3px solid #8e0ebd;}

You can adjust the 65% to suit your desired size, but you can't have different % values - they must be the same for height and width.

I use the width:height declarations in some places on THIS SITE

[Kayz]

img.listingProductImage {height: 65%; width:65%; padding: 5px; background-color: #fff; border: 3px solid #8e0ebd;}

I placed the code in the bottom of my style sheet. It is doing what I hoped but with one slight problem.

It is still slightly changing the size of my images from what they were originally.

Is there a way to stop the image it's self from changing size with this code?

In my admin>configuration>images
my image values for these photos is set to:
width: 120
height: 120

The only changes I made to the code are the colors as you can see.

img.listingProductImage {height: 65%; width:65%; padding: 5px; background-color: #000000; border: 2px solid #8E0EBD;}

I did play around with the % but only made the images themselves smaller or larger; along with the border.

[schoolboy]

As I said, it's a crude hack that will at least get the widths uniform.

You need to get better images... When I click "Larger Image" what pops up is sometimes even smaller... This is common on many sites. There is no getting away from requiring proper images to start with. A sow's ear can't be turned into a silk purse.

THIS SITE adheres religiously to a standard image size, aspect ratio and dimension. 560px × 380px . If the subject-matter does not lend itself naturally to this dimension, then the content is back-grounded using deep-etching in Adobe Photoshop.

There are no short cuts...

You should ask your suppliers for better pack-shots and prod images.

[Twaddle]

OK this is a really crude HACK... but it may achieve the desired effect.

Crude maybe, but it's an effect I've been trying to do for a while... just quickly I've put this together taking your code and it sort of works until there's only two products on the page, tried several different tweaks but no joy to get it to display when there's only two products on a page, any ideas?

img.listingProductImage {
    height: 65%; width:65%; 
    padding: 10px; 
    background-color: #ffffff; 
    background-repeat:no-repeat;
    background-image:url(../images/product_bg.gif); 
    }

[Twaddle]

Taking that same idea, I've sort of managed to get it to work here as well for the product listing

#productMainImage{
height: 22%; width:20%;
padding: 14px;
background-color: #ffffff;
background-repeat:no-repeat;
background-image:url(../images/product_bg.gif);
}

[schoolboy]

The issue is that we are playing around with dual size variables - one set of these is in the database (image dimensions) and the other is in the % values applied in the CSS.

Each parameter will influence the other, so it's also a case of fiddling about with BOTH size controllers until the desired result appears.

Bear in mind that 20% and 22% will result in a slight image "stretch". The greater the difference between the % values, the more pronounced the stretch.