Problem with thumbnail images

[Pinksquid]

Hi,

I was hoping somebody could help me with a problem i'm having with my thumbnail images.

When i upload images for the product, all looks ok in the actual product details itself, but the picture doesn't look right in the thumbnails.

Either part of the image is chopped off, or i have a gap between the outline of the thumbnail and where the picture starts, or the image is off centre etc.

I thought that when i added the picture it would just be automatically shrunk & recropped so that the image looked the same as the main image, but it was just smaller and fit the thumbnail size. I'm used to working on ebay so i'm used to uploading a photo of any size and having the dimensions automatically cropped and resized but keeping the image looking the same.

I don't know if i need to change something within my actual settings, or if i need to be uploading pictures of a certain size in the first place?

I know there is a thumbnail size option in admin, but i have fiddled about with this and nothing seems to alter? Although to be honest I don't even really know what this does and what i should be adjusting!

By the way when i tried uploading different sizes of images as well (1000 pixel, 800, 400 etc) and always have the same problem.

Another thing i'm not sure about is if this is a skin issue... my skin had been custom designed.

My website is pinksquidclothing.com and i have to trial products on there with photos. The coral dress is showing one of the gaps i'm taking about. Both images have also been cut a lot down the sides and the text is chopped off. The dress is also off centre.

If anyone can tell me how i can get the thunbnails looking like the mian picture, or even how i can make the thunmbnails bigger that would be a big help

Thanks in advance

[leeofaccy]

Hi

The issue lies in div.latestProds and I think in .imagecrop and .imagecrop img in your layout.css. The width is set at 128px which is maybe narrower than you have your thumbnails set at. Also on imagecrop img there is a margin-left set to -25%, which will pull your image over to the left. There is also a height issue which I think you will need to edit the .imagecrop style, which has a height of 196px. I can see a gap on the pink dress once the image has been made bigger.

If you change your thumbnail size, don't forget to Rebuild your thumbnails under the Maintainance tab in your Admin Panel, it just eliminates any other problems which can sometimes occur when you change the size.

Lee

[Pinksquid]

Hi Lee,

Thanks very much for your help!

I've changed the thumbnail setting to 128px so that it fits the width set on the div.latestprods.

I've also got rid of the -25% on imagecrop img and so the picture now fits nicely width-wise and can be seen.

I still have a problem however with the height issue.

I have tried changing the 196px height in .imagecrop style but it doesn't seem to make the pictures any longer- all that happens is the pink and white text box disappears and the gap still stays (i've left what's happened on the pinksquid.com homepage so you can see it)

Am i doing this wrong? Is it something else i need to be going into to change the height?

Sorry if i'm being thick- am not too great at this sort of thing

Thanks again

Vikki

[leeofaccy]

Hi Vikki

Having looked at your site again, I have found quite a few problems. I don't know your level so I will try and explain it as thoroughly as I can, so sorry if it sounds like I might be telling you things you already know about.

Firstly, BACK UP YOUR SITE!

Next I will start with the images. When you set your thumbnail size in Admin to 128px, that is how wide or high the image will be set, depending on the shape of your pic. If your original (Larger) images are not the same size in width & height there will be gaps or height differences between your images. For example, your image of the leggings is 126px wide x 128px high and your dress image is 128px wide x 123px high (Thumbnail size), so you have a gap/height difference of 5px. If your dress image was same height as the leggings image there would be no difference. I would suggest resizing your images to all the same size, to the size you want to display in View Product for example. Set your thumbnail size to 128px or whatever you choose. Upload them through Upload Images in Admin panel and it will create the thumbs you set i.e. 128px.

Next, I would suggest either deleting the imagecrop style and imagecrop img style or simply just take out the values. Next, delete the height value in div.latestProds, all found in layout.css.

Hope that helps

Lee

[Pinksquid]

Hi Lee, Thanks again for your reply. Everything you've said makes sense, however i have a problem with resizing all pictures to the same size because it ruins the aspect ratio. I've resized both pics to 311 x 390 and uploaded them- i want the pics this sort of size (300-400) on the main product page. For some reason despite both pictures being exact same size the thumbnail image on the dress now doesn't fit the width of the thumbnail, its too narrow. Thumbnail is still set to 128 as before. Also when you go into the leggings you can see how changing the size has distorted the pic (have tried out all different sizes and one or the other distorts when trying to resize).

I'm a bit confused as surely if thumbnail is set to 128 and the width of image uploaded is larger it should be filling the space? I haven't done any of the height stuff yet as wanted to test out resizing pics first.

[leeofaccy]

Hi Vikki

I see what you mean. I PM'd you to send the images but I got them off your site and uploaded them to a test site my end and they seem to be fine. The leggings pic on yours looks wider than the dress. Did you rebuild both thumbnails when you re-uploaded your images?