Image size control

[phunni]

I am currently building a website where users will be able to upload images

 

Unfortuantely - I don;t know in advance how big the images will be. Is there a way, in normal html, of limiting the size of an image? If it's smaller then fine - but not let any images be above a certain size?

 

By the way - feel free to check it out here - just remember it's still a testing site and not everything may work yet. Register, search, edit - whatever you like, although I could do with some feedback on the functionality of the site. The design is not really done yet.

 

If you do register - please stick something in your "company" description that tells me it's you - so I know where it cam from

Edited March 4, 2004 by phunni

[phunni]

anyone? Someone must have some idea...

[Cannonfodder]

In HTML? I don't know how you can do that, but you can check out javascript and embed it in the html file. Also, you can check out imagemagick and have the web site auto reduce it if necessary.

[scoopy]

I recently used pre-made php type sites that do this on my site (www button below). If you want to check them out: They use imagemagik and sizes are set in the configure / setup scripts.

 

http://gallery.menalto.com/index.php

http://coppermine.findhere.org/index.php

 

I wouldn't know how to hard-code something like this, but your welcome to borrow any of my pages to hack the script for your purposes.

[phunni]

I don't know anything about PHP or java script - but I did check out imagemagik and saw that there is a Java implementation (I'm building the site in Java) - so I'll check that out.

 

Thanks for the inspiration!

[phunni]

I've spotted a part of the standard Java API that might do the job :)

[Qchem]

You could try something like this (although I haven't tested it myself)

 

img.test-default {

width:80px;

height:80px;

}

 

and

 

img.test-reduced50 {

width:40px;

height:40px;

}

 

 

assuming of course you have an 80x80 image.

 

Then something like,

 

<img src="img1.jpg" alt="original 80px by 80px image"

class="test-default" />

<img src="img1.jpg" alt="css 40px by 40px image"

class="test-reduced50" />

 

HTH,

[phunni]

Please explain wat you have done - I don't understand it

 

Also - does anyone have a javascript solution. I know nothing about Javascript , but it seems like it might be easier tha doing it in Java...

 

(BTW - just to avoid confusion - it's worth clarifying that Java and javascript are unrelated apart from a similar name...)

[phunni]

Come one - some of you javascript gurus must have a clue!

[Qchem]

Please explain wat you have done - I don't understand it

 

assuming you have an image that is 80x80 - you could include it in your html with

 

<img src="img1.jpg" alt="original 80px by 80px image"

class="test-default" />

 

and within your css you could include:

 

img.test-default {

width:80px;

height:80px;

}

 

Now assuming you wanted this image resized to 40x40 simply within the page, you would have the following html:

 

<img src="img1.jpg" alt="css 40px by 40px image"

class="test-reduced50" />

 

and in the css:

 

img.test-reduced50 {

width:40px;

height:40px;

}

 

which, hopefully will produce a resized image totally though css and html utilising only the original image file.

 

You may also be able to do something server side with imagemagic (man convert) but I've only ever used this to create thumbnails and not on a server.

[phunni]

The trouble is that I don't know at development time the size of the images.

 

If they less than 500x375 then I would like the size to remain unchanged. If they are more than that then I need the size to be reduced to 500x375

[Qchem]

Ah, thats too clever for html/css - it'll take some proper coding. Not sure what though - perhaps javascript can do it in combination with css

[phunni]

I know... trouble is that I know nothing about javascript - so I'd need some pointers. I tried to do it in Java and, almost had it, but the Java classes require an X server to be running to manipulate images - and all this is done on a server with no X :(

[Qchem]

If you have perl on the server you may find this useful:

 

Using Image Magic

[phunni]

Looked at that - it's not my server so I can't install ImageMagick on it