Image size

[mvangl]

Hello. Since I got such great help last time, I thought I'd give this a shot again (I'm very new to CSS). It seems really simple but I can't seem to change the image of my product (circled in red in the image provided below). Right now it's really small and I'd like to enlarge the size of the image next to the description.
Pic (http://i727.photobucket.com/albums/ww277/wastedecals/productimage.jpg)

Here is the direct link to it:

Link (http://shop.waste-decals.com/product.sc?categoryId=7&productId=82)

Oh, and I'm working off of a template from GoDaddy if that helps anything.

Thanks in advance! :)

[Snookerman]

Add this to your css code:

.product-image img {
width: 200%;
}

You can change the red part to whatever size you want, you can also use pixels (e.g. 200px).

Good luck!

[mvangl]

Hello Snookerman, we meet again :)

I added that to my css codes, but it didn't seem to have an effect. It still looks the same. Any other idea?

Like always, thanks for all your help!

[Snookerman]

Hi mvangl
Yeah, it's because of this piece of code, get rid of it:

img {
max-width:100%;
}

[mvangl]

This may sound silly, but how do I get rid of that? I can't find it in my codes. I removed

.products .product img{
width: 100%;
}

just because it's the closest code to that, but it didn't do anything either.

[Snookerman]

It's in the layout_classic.css (http://shop.waste-decals.com/template/common/layout_classic.css) file on line 220. Here's a larger piece of the code so you can find it more easily if you don't have row numbers in your editor:

/************** Spacing Controls for various column contents ***************/
.textpadder,
.content {
padding-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

/* Prevents long urls from breaking layout in IE, must
be hidden in a conditional comment for CSS to validate */
img {
max-width: 100%;
}

Remove just the highlighted part and then add the code I posted before and you should be fine.

Good luck!

[mvangl]

Ohhh...well, I may have a problem then :(. I don't think I can actually go into that file and delete the code. There's just a box in the Quick Shopping Cart site that allows me to enter in some CSS codes, and that's what I've been doing--entering some pretty basic things, but I can't edit any of the preset ones. I've never even seen that file you posted!

[Snookerman]

Alright then, this should do it:

.product-image img {
max-width: 200%;
width: 200%;
}
If that still doesn't work, try this:

.product-image img {
max-width: 200% !important;
width: 200%;
}

Good luck!

[jscheuer1]

The easiest thing to do in a case like this is to just make the image larger in an image editing program.

[Snookerman]

The easiest thing to do in a case like this is to just make the image larger in an image editing program.
I don't really agree with that. Sure, it's the easiest solution when you've got just one or two images to deal with, but in this case there are quite a few:
http://shop.waste-decals.com/category.sc?categoryId=7 (http://shop.waste-decals.com/category.sc?categoryId=7)
Also, since this is a shop, chances are new images will appear frequently. Of course it's up to the OP themselves to choose how to do this, but I would definitely choose to write a couple of lines of css and not bother about it any more, over having to edit hundreds of existing images and also having to edit potential new images.

[jscheuer1]

They already have a larger image (click to enlarge). Images should be the dimensions that they are meant to be viewed as. Images may be resized and optimized in batches, especially images of this sort. It's no big deal. It's generally OK (depending upon the image) to reduce the size of an image in the browser, but this only makes sense if the full size version will also be used. At that point it becomes a form of preloading. But to blow up a smaller image risks loss of resolution in at least some browsers, which tends to give a site a less than professional look.

[Snookerman]

to blow up a smaller image risks loss of resolution in at least some browsers, which tends to give a site a less than professional look.

I agree with that, but what you suggested about making the images larger in a program would also look less professional. Of course using the original image as a thumbnail would be a better solution but that would also require css.

[jscheuer1]

If you have a good quality larger image, which is the case here, a good quality smaller image of the desired size can easily be achieved.

[Nile]

What I did once is I had a bunch of huge pictures, and then a php file called small.php:


<?php
header('Content-type: image/jpeg');
$filename = $_GET['img'];
list($width, $height) = getimagesize($filename);

$thumb = imagecreatetruecolor(105, 139);
$source = imagecreatefromjpeg($filename);

imagecopyresized($thumb, $source, 0, 0, 0, 0, 105, 139, $width, $height);

imagejpeg($thumb);
imagedestroy($thumb);
?>


That saved people viewing the page from there browser not responding(the normal images were huge).

I do not know if you have php on your host, but if you do you can try it. Keep in mind: I've tried this code on 3 hostings, 2/3 failed...

If you were to use this script, you'd have to replace 'jpeg' with 'png' or 'gif.' Depending on what your using.

[mvangl]

Hey, thanks for all the replies! I really do appreciate all your help.

Snookerman, I did try the codes you gave me and they do work---except they made the image really pixelized. I didn't understand why it did that being that my original image is as big as the "Zoom to enlarge" image. However, after speaking with customer service, it seems like they automatically shrink down my image to 175 x 175 pixels---or whatever that is proportionate---for that part of the website (not sure why when it is the product page and showcasing the product we want to sell), and that's why it looks like that. I know we have the "Zoom to enlarge" option, but I would much rather have the product bigger next to the description instead of having a potential customer click to enlarge. I also think it will look better visually.

Oh well.

Thanks so much!