SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
Jul 22, 2009, 05:48 #1
a picture that is too big.. stretches my side horizontally ugly
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
-
Jul 22, 2009, 06:36 #2
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.
-
Jul 22, 2009, 06:44 #3
This might be what you're looking for:
http://reference.sitepoint.com/css/max-width
There is an example that does exactly what you wantGuido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Jul 22, 2009, 08:37 #4
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.
-
Jul 22, 2009, 08:42 #5
Can you give a link so we can check it out?
Guido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Jul 22, 2009, 09:04 #6
my coding
.width {
max-width: 460px;
}
then at the description part
PHP Code: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>";
-
Jul 22, 2009, 09:14 #7
Don't apply the max-width to the td, but to the img tag. Resize the image
Guido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Jul 22, 2009, 09:17 #8
-
Jul 22, 2009, 09:22 #9
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.Guido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Jul 22, 2009, 09:24 #10
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
Guido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Jul 22, 2009, 09:25 #11
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.
-
Jul 22, 2009, 09:25 #12
-
Jul 22, 2009, 09:28 #13
Bookmarks