Need help on cropping images please...

[cusimar9]

I have a website where people can upload pictures, from which I automatically resize them to make a thumbnail and a postcard size picture.

I already have validation in there to check the picture isn't a stupid shape - ie it has to be landscape.

However, all the pictures are a slightly different size, maybe 5-10 pixels or so, and it makes it look a bit messy.

Is there ANY way I can batch crop them all to be (say) 100 pixels tall? So if a picture is 120 pixels tall, it automatically crops 10 pixels from the top and bottom?

ANY solution will be considered, I'll even buy some software if I have to, but I'm not sitting there cropping them all by hand...

[cusimar9]

Now have I just gone insane or could I put the picture inside a div or a cell as a background? Genious!

Any other ideas?

[kripik_kentang]

I have a website where people can upload pictures, from which I automatically resize them to make a thumbnail and a postcard size picture.

I already have validation in there to check the picture isn't a stupid shape - ie it has to be landscape.

However, all the pictures are a slightly different size, maybe 5-10 pixels or so, and it makes it look a bit messy.

Is there ANY way I can batch crop them all to be (say) 100 pixels tall? So if a picture is 120 pixels tall, it automatically crops 10 pixels from the top and bottom?

ANY solution will be considered, I'll even buy some software if I have to, but I'm not sitting there cropping them all by hand...
try using photoshop to editthe pics :)

[KDLA]

You can apply css to a div (for this example, named "thumbs") holding the photos.

#thumbs img {height: 110px; width: 110px; overflow: hidden;}

This will automatically "hide" the extra pixels, making each photo in the series look uniform in height and width.
KDLA

[cusimar9]

You can apply css to a div (for this example, named "thumbs") holding the photos.

#thumbs img {height: 110px; width: 110px; overflow: hidden;}

This will automatically "hide" the extra pixels, making each photo in the series look uniform in height and width.
KDLA

Excellent, thank you, I'll try that as soon as I'm back at work :D

[Neoboffin]

You can do it the CSS way, but images too large will slow down your page even more.

If your looking for software to batch resize images, Fireworks and Photoshop both have these capability. If you're looking for a PHP script, just reply and I'll whip one up or you can search for one.

[KDLA]

(A 5 to 10 px difference - as cited in the original post as the problem - won't add substantially to the file size, so there's not really a need for software editing. ;) )

[Neoboffin]

If that is the case, crop the image with a 5 - 10px border instead of cropping only the right and bottom size by 5-10px.

#thumbs img {height: 110px; width: 110px; overflow: hidden; background-position: center center;}

[cusimar9]

If that is the case, crop the image with a 5 - 10px border instead of cropping only the right and bottom size by 5-10px.

#thumbs img {height: 110px; width: 110px; overflow: hidden; background-position: center center;}

Thats great, thanks :D

How would I apply this by the way? I have picture galleries of 12 pictures at a time, so I guess a table of 4 cols x 3 rows with each image placed as a background... but I'd have to place inline css for every cell though (specifying the image as the background)

I guess there's no way of seperating the css completely?

[Neoboffin]

Nope, you would just have to add background tag within a style="" tag on the <div> tags.

A lotta tags!

[cusimar9]

OK I'm nearly there...

I've got a table with cells containing a transparent gif sized to 150 x 95 pixels, and the real picture is set as a background picture.

The only remaining issue is that I would like the pictures to have a border... but if the picture is really small (ie height of 70px) there's obviously a white space. Don't think there's anything I can do about that is there?

[Neoboffin]

You're going to get a white space. Can't think of anything easy for you to do to solve that problem.

[cusimar9]

OK Thanks, looks much better now anyway :)

[KDLA]

Apply a background-color the same color as the border. It will look like a matte.

[frank_kelly_101]

i had a similar problem. thanks for the help