SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    PHP Guru lampcms.com's Avatar
    Join Date
    Jan 2009
    Posts
    921
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,510
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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

  4. #4
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,510
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Can you give a link so we can check it out?

  6. #6
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    Can you give a link so we can check it out?

    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>"

  7. #7
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,510
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Don't apply the max-width to the td, but to the img tag. Resize the image

  8. #8
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    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..

  9. #9
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,510
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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.

  10. #10
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,510
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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

  11. #11
    SitePoint Evangelist Waffles's Avatar
    Join Date
    Nov 2005
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    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.

  13. #13
    SitePoint Enthusiast aaron888's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    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
    Last edited by aaron888; Jul 22, 2009 at 09:05. Reason: problem solved!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •