Latest products image resize on home page

[Guest]

I am trying to change the size of the image on the home page in the .featured box.

I managed to change the .featured box size which I found in the style.css file but the image does not change size.

I have also checked that the actual image size is much larger than the one displayed.

Can someone please advise on where this size is.

Thank you very much

[markscarts]

I'm not sure of your terminology: .featured? Latest Products? Featured Product?

In CubeCart there is normally an area called featured product in a side box, which is actually a random image. The, there are the Latest Products which is a number of the last added products to your store, and they are listed in the main content area.

At any rate, whether random prod or lastest prods, the answer is that these use the thumbnail images from your store, not the larger product images.

Thumbnail size is set in store general settings under GD settings in control panel. If you specify a larger dimension there, then thumbnails will be craeted in the larger size when new images are added and assigned to products. But if you already have some thumbnails there, it won't automatically re-create them in the new size. You will have to delete them and start again, or replace them with a larger size via ftp or via file upload through uor website panel, etc.

There are many ways to solve this depending on your knowledge and skill level, and what you are trying to accomplish. You could show the full-size product image by altering the php file.

1. What exactly do you wish to accomplish (details, as in sizes of pics, layout, etc.)

2. Are you familiar with ftp uploading?

3. Do you have any image batch processing software?

4. How many images on your store need to be dealt with?

[Guest]

I am trying to change the size of the image on the home page in the .featured box.

I managed to change the .featured box size which I found in the style.css file but the image does not change size.

I have also checked that the actual image size is much larger than the one displayed.

Can someone please advise on where this size is.

Thank you very much

Thank you for your excellent reply.

In answer to your reply:

1. What exactly do you wish to accomplish (details, as in sizes of pics, layout, etc.)

I would like the thumbnail size for the featured products to remain the same, however I would like the image size in the Latest products to be larger, if this is possible. I guess the only help I need now is on this point.

2. Are you familiar with ftp uploading?

Yes , I use Fireftp on firefox - easy

3. Do you have any image batch processing software?

Yes familiar with batch image processing. I am using Pixsizer which is so simple and awesome, I can quickly change the size and match it to the GDI size settings in general settings.

4. How many images on your store need to be dealt with?

I have two sites, one is new and only has around 10 images, the second has around 150 images.

[markscarts]

Good

Well, you can manage thumbnail sizes on local machine using picsizer (I use it too) then upload to thye images/uploads/thumbs directory.

The image names need to be exactly the same name and format as main product image, with the thumb_ prefix.

Thus you could have various sizes of thumbs if you desire. Another problem will be you will have various sized thumbs showing up in the product lists in viewCat page . . .

If you like the size of thumbs on viewCat page and random prod box, then another solution would be to have the vistor's browser resize the larger prod image to the size you want there, if it does not cause too much distortion.

If you want to try that, go to includes/content/index.inc.php and change these lines:

if(file_exists($GLOBALS['rootDir']."/images/uploads/thumbs/thumb_".$latestProducts[$i]['image'])){

$index->assign("VAL_IMG_SRC",$GLOBALS['rootRel']."images/uploads/thumbs/thumb_".$latestProducts[$i]['image']);

To this:

if(file_exists($GLOBALS['rootDir']."/images/uploads/".$latestProducts[$i]['image'])){

$index->assign("VAL_IMG_SRC",$GLOBALS['rootRel']."images/uploads/".$latestProducts[$i]['image']);

That code change will call the full-size image for latest products rather than thumbnails.

Then in skins/xx/styleTemplates/content/index.tpl, you need a division for containing the individual products. If you are using 3.0.15, I think you are in luck, a classed division was added to the skins . . . it is class "latestProds" . . . if you do not have such a division there, you will have in the old skins a division with inline styles. You need to change it to a classed division and move the styles into the style sheet.

Perhaps the easiest thing for anyone unfamiliar with writing html and css is to download 3.0.15 and use the new skin . . .

Now, go to layout.css in the styleSheets folder of you skin and look for or add .latestProds as the case may be:

.latestProds {

float: left;

text-align: center;

width: 131px;

height: 100px;

}

BELOW THAT SECTION, add this:

.latestProds img {

width: 120px;

}

voila! the visitor's browser will scale down the product image to 120px wide

Considerations: Of course, you should change 120px to the size of your dreams, and of course you will have to change the width and height of the latestProds div code above to accommodate your custom image size.

[Guest]

Good

Well, you can manage thumbnail sizes on local machine using picsizer (I use it too) then upload to thye images/uploads/thumbs directory.

The image names need to be exactly the same name and format as main product image, with the thumb_ prefix.

Thus you could have various sizes of thumbs if you desire. Another problem will be you will have various sized thumbs showing up in the product lists in viewCat page . . .

If you like the size of thumbs on viewCat page and random prod box, then another solution would be to have the vistor's browser resize the larger prod image to the size you want there, if it does not cause too much distortion.

If you want to try that, go to includes/content/index.inc.php and change these lines:

if(file_exists($GLOBALS['rootDir']."/images/uploads/thumbs/thumb_".$latestProducts[$i]['image'])){

$index->assign("VAL_IMG_SRC",$GLOBALS['rootRel']."images/uploads/thumbs/thumb_".$latestProducts[$i]['image']);

To this:

if(file_exists($GLOBALS['rootDir']."/images/uploads/".$latestProducts[$i]['image'])){

$index->assign("VAL_IMG_SRC",$GLOBALS['rootRel']."images/uploads/".$latestProducts[$i]['image']);

That code change will call the full-size image for latest products rather than thumbnails.

Then in skins/xx/styleTemplates/content/index.tpl, you need a division for containing the individual products. If you are using 3.0.15, I think you are in luck, a classed division was added to the skins . . . it is class "latestProds" . . . if you do not have such a division there, you will have in the old skins a division with inline styles. You need to change it to a classed division and move the styles into the style sheet.

Perhaps the easiest thing for anyone unfamiliar with writing html and css is to download 3.0.15 and use the new skin . . .

Now, go to layout.css in the styleSheets folder of you skin and look for or add .latestProds as the case may be:

.latestProds {

float: left;

text-align: center;

width: 131px;

height: 100px;

}

BELOW THAT SECTION, add this:

.latestProds img {

width: 120px;

}

voila! the visitor's browser will scale down the product image to 120px wide

Considerations: Of course, you should change 120px to the size of your dreams, and of course you will have to change the width and height of the latestProds div code above to accommodate your custom image size.

the problem is the image will get distorted

[markscarts]

If you like the size of thumbs on viewCat page and random prod box, then another solution would be to have the vistor's browser resize the larger prod image to the size you want there, if it does not cause too much distortion.

Yes, of course the images will be distorted. For this reason I would not do it, and I very rarely use browser resizing of images in my web development. This is only an answer to the question, and will work if the images are not too badly distorted. This will depend upon just how reasonable you are in altering the original size :)