Skip to main content
A
Anonymous
February 19, 2013
Answered

Issue with uploaded images.

  • February 19, 2013
  • 1 reply
  • 887 views

Having an issue with pictures that is uploaded to the site. On a page I have a div tag set to a certain size, but if someone uploads an image that is bigger than the size of the div it ignores the div size. The size of the div is 500px by 500px. I even tried a table with a set dimension and still no go. I did think of using the cfimage resize function, but thought to myself that if someone uploads an image that isn't bigger then500px X 500px it will extend the size i set and might blur the image, so i guess that's a no go.

Is there a way to force the image to not extend past the size I set in the div?

    This topic has been closed for replies.
    Correct answer BreakawayPaul

    Ok, let's say the user uploads the image to /home/user/www/uploads, and the filename is avatar.jpg

    You can do this:

    <cfset uploadfile = "/home/user/www/uploads/avatar.jpg">

    <cfimage source="#uploadfile#" name="userimage">

    <cfif userimage.width gt 500>

    <cfimage

        action="resize"

        width="500"

        height=""

        source="#uploadfile#"

        destination="/home/user/www/avatars/avatar.jpg"

        overwrite="true">

    <cfelse>

    <cffile

        action="move"

        source="#uploadfile#"

        destination="/home/user/www/avatars/avatar.jpg">

    </cfif>

    If the avatar is over 500px wide, it resizes it and puts it in the avatars folder (or wherever you want it to go).  If not, it just moves it.  The "userimage" in userimage.width is just the name="" from the first <cfimage> tag.  It can be whatever you want, as long as it matches that name.

    1 reply

    BreakawayPaul
    BreakawayPaul
    Inspiring
    February 19, 2013

    You can check the image dimensions using <cfimage>

    <cfimage source="#image_file#" name="thisimage">

    thisimage.height is the height

    thisimage.width is the width

    Once you check the height/width, you can resize if the image is too large, or leave it alone if it's not.

    A
    Anonymous
    February 20, 2013

    Sorry i'm really new to cf and don't quite understand the "thisimage.height and thisimage.width". i looked at the livedocs online and it didn't have an example for it. Could you please explain?

    Thanks

    BreakawayPaul
    BreakawayPaulCorrect answer
    Inspiring
    February 20, 2013

    Ok, let's say the user uploads the image to /home/user/www/uploads, and the filename is avatar.jpg

    You can do this:

    <cfset uploadfile = "/home/user/www/uploads/avatar.jpg">

    <cfimage source="#uploadfile#" name="userimage">

    <cfif userimage.width gt 500>

    <cfimage

        action="resize"

        width="500"

        height=""

        source="#uploadfile#"

        destination="/home/user/www/avatars/avatar.jpg"

        overwrite="true">

    <cfelse>

    <cffile

        action="move"

        source="#uploadfile#"

        destination="/home/user/www/avatars/avatar.jpg">

    </cfif>

    If the avatar is over 500px wide, it resizes it and puts it in the avatars folder (or wherever you want it to go).  If not, it just moves it.  The "userimage" in userimage.width is just the name="" from the first <cfimage> tag.  It can be whatever you want, as long as it matches that name.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices