a picture that is too big.. stretches my side horizontally ugly

[aaron888]

Hello Members,

my article site allows people to write articles and post them.

sometimes, they upload some banners on photobucket
which the size is like 800 X 50..
and its definitely TOO BIG for my site,
but yet they paste the IMG link,
and when it displays, it stretches my site so wide, that it spoils my menu bar all over the place.

so how do I prevent this ?

Thanks

[lampcms.com]

You can look into the htmlpurifier. It has an option to set limit of 'width' attribute, so even if someone adds an <img> tag, it will modify the 'width' tag.

I have to say, that I have never used htmlpurifier, I just read the instructions on their website, I am going to start using it soon, then I'll have a first-hand experience.

A more advanced approach would be to grab actual images from remote urls, resize and save resized image on your server, then replace the src attribute with the one that points to your resized image.

[guido2004]

This might be what you're looking for:
http://reference.sitepoint.com/css/max-width

There is an example that does exactly what you want

[aaron888]

thanks sharedlog.com and guido2004 for the replies.

hmm htmlpurifier seems to be very good, but the CSS stuff seems easier to implement right away.

So I tried the max-width thinggi , and it works.
all my menu and website is controlled sized.
all back to normal.
even though the image is BIG, but the site is normal.

however the only problem is that, the image still remains original big, and overlapping to the other table.

[guido2004]

Can you give a link so we can check it out?

[aaron888]

Can you give a link so we can check it out?

my coding

.width {
max-width: 460px;
}


then at the description part

echo "<td class='width' width='450' valign='top'>";

echo "<font face='Arial' size='2'><b>Description: </b></font><font face='Arial' size='2'>" .stripslashes(wordwrap($row['article'],55, "\n", true)) . "</font></td>"; 

[guido2004]

Don't apply the max-width to the td, but to the img tag. Resize the image

[aaron888]

Don't apply the max-width to the td, but to the img tag. Resize the image

but I don't have any IMG tags in my codings.
its just a plain text box, where users can attach IMG tags from sites such as photobucket and etc..

[guido2004]

In the final html page that is created there is an image, so there is an img tag.
You would have to find a way to add the class to that img tag when the page is being created. Or when the user input is being saved.

[guido2004]

Btw, where did you find that table based layout? It's tons and tons of tables in tables in tables. I couldn't even find the img tag with firebug in that mess

[Waffles]

well, another solution would be to code your own image upload facility, and just restrict the size of the images/dynamically resize them at uploading/store them in a DB and you can control the width/height as required.

[aaron888]

In the final html page that is created there is an image, so there is an img tag.
You would have to find a way to add the class to that img tag when the page is being created. Or when the user input is being saved.

ahh... i c..
alrite, will try this out

------

nice idea Waffles.
will try sorting this out first.

[aaron888]

Btw, where did you find that table based layout? It's tons and tons of tables in tables in tables. I couldn't even find the img tag with firebug in that mess

lol... thats what happens to newbies like me lol
----------------------------------------------




PROBLEM SOLVED using
overflow: hidden

lol