Loading Images in a cfform

Mar
29

Loading Images in a cfform

26 comments Posted by: Nahuel

I made an example that shows how to load different types of images into a flash form.
In a cfform, it is possible to load gif, jpg, png, and swf.

Basically, there are two types of methods to load an image inside a cfform: at compile time and at runtime. cfinput embeds the images in the cfform at compile time, allowing more variety of image types (png and gif) that are not directly supported by the flash player. cfformitem and other controls such as textarea load the images at run time, so they are limited to the types supported by the flash player, accepting only jpg and swf .
Note that cfinput type="image" will put the image inside a button, so in the example, the first four images have borders and rollover states.

There seems to be a bug when loading jpg images ~~in Firefox~~ when the cfformitem only contains the image. Although it only happens sometimes, the image does not load. One way to fix the problem is adding some text in the formitem before the image, or other tag, such as a <p>.

Here is the code:

<cfform name="myform" height="300" width="300" format="Flash">
   <cfformgroup type="hbox">
      <cfinput type="image" height="27"  src="images/home_bg.gif" name="gif" onClick="" width="104">
      <cfinput type="image" height="27"  src="images/home_bg.jpg" name="jpg" onClick="" width="104">
      <cfinput type="image" height="27" src="images/home_bg.png" name="png" onClick="" width="104">
      <cfinput type="image" height="27" src="images/home.swf" name="swf" onClick="" width="104">
      <cfformitem type="html" height="35" width="104"><p><img src="images/home_bg.jpg"/></p></cfformitem>
      <cfformitem type="html" height="35" width="104"><p><img src="images/home.swf"/></p></cfformitem>       
   </cfformgroup>
</cfform>

You can also load a jpg with css but that goes to another post :)

View the example
Download the code

Category: CFForm | ColdFusion |

26 Comments so far

Write yours

1. PaulH wrote on March 29, 2005 at 10:37 PM

any ideas about how to capture the x,y from a clicked image? these never seem to show up in the form scope.

2. pim wrote on March 30, 2005 at 12:17 AM

The image not showing is sometimes a problem in flash too. Enclosing the image with <p></p> seems to solve the problem.

3. Nahuel wrote on March 30, 2005 at 12:25 AM

That's good to know, I hope that in the next verion of the player this behavior gets fixed.

4. Steve wrote on March 30, 2005 at 6:38 AM

Any ideas on how to get the image to display with the <cfformitem type=page> area of the cfform?

5. Nahuel wrote on March 30, 2005 at 6:42 PM

Hi Steve,
I think there is no <cfformitem type=page>, do you mean cfformgroup?

You can do something like including a cfformitem inside a cfformgroup:
< cfformgroup type="page"><cfformitem type="html"></cfformitem ></cfformgroup>

6. Tony wrote on March 31, 2005 at 4:54 AM

Does anyone know how to have a drop down list of jpg image names in a flash form that when a user selects an image a preview of the image is loaded in the flash form. I'm not really up to speed on ActionScript yet!

7. Steve wrote on March 31, 2005 at 9:38 AM

Nahuel, thanks. What I wanted to do was display an icon right next the label text.

So, like this:
<cfformgroup type="page" label="!!IMAGE GOES HERE!! This is Page One's Label">

Any ideas on that?
Thanks!

8. Kym wrote on April 05, 2005 at 8:51 AM

Has anyone been able to bind a grid to cfinput of type image... so that the URL specified on the column of cfgrid becomes the src for the cfinput, i.e. imaging swapping based on row selection in the cfgrid

9. Mika wrote on June 26, 2005 at 8:43 PM

I was trying to find how to load images from query to <cfinput type=image>, and here what i've found:

<cfquery datasource="crafts" name="random_images" maxrows="4">
SELECT product_id, product_name, product_image3 FROM products
</cfquery>
<cfset MyList=ValueList(random_images.product_image3,',')>
<cfset path_1="http://localhost:8500/armenianrugmasters/images/#ListGetAt(MyList, 1)#">
<cfset path_2="http://localhost:8500/armenianrugmasters/images/#ListGetAt(MyList, 2)#">
<cfset path_3="http://localhost:8500/armenianrugmasters/images/#ListGetAt(MyList, 3)#">
<cfset path_4="http://localhost:8500/armenianrugmasters/images/#ListGetAt(MyList, 4)#">
<cfform method="get" format="flash" >

<cfformgroup type="horizontal" height="200" width="700" visible="yes" enabled="yes" >
<div align="center">
<cfinput type="image" name="image1" src="#path_1#" width="150" height="170"/>
<cfinput type="image" name="image2" src="#path_2#" width="150" height="170"/>
<cfinput type="image" name="image3" src="#path_3#" width="150" height="170"/>
<cfinput type="image" name="image4" src="#path_4#" width="150" height="170"/>
</div>
</cfformgroup>
</cfform>

This works. If i was trying to use something like:
src="random_images.product_image3" it doesnt.
May be this can be helpful to anybody.

10. Simeon wrote on August 10, 2005 at 8:20 AM

I have been bashing my head against the wall for an hour. I cant get the images to dislay when in the cfformitem. I cant get my examples to work, and I cant get yours to. I tried it on 6 computers. pc's and mac's firefox and IE, flash 7 and beta 8.

If you view your example now do those last to images load for you? because in the code I see 6 images but only the for cfinput images load for me.

I assume this used to work but I cant seem to get it to. Does the example still work for you?

11. Laura wrote on August 10, 2005 at 11:57 AM

Simeon,
Sorround your image with paragraph tags <p><img></p>
That should work around the problem. I believe it is a flash bug.

12. Simeon wrote on August 10, 2005 at 12:10 PM

i owe you a hug. i had other text in there based on the comment about the bug. but putting the p tags just around the image caused it to appear.

Thanks so much. I have been banging my head on the wall. my forhead thanks you :)

13. BM wrote on October 01, 2005 at 7:31 PM

Seems like some images get cut in half when loading in cfform. They do show up fine, but the bottom half sometimes gets cut off. I have adjusted the width/height attributes of both the cfform and the image but to no avail.

Any suggestions?

14. Nahuel wrote on October 02, 2005 at 5:13 PM

Hi BM,
Try to adjust the values on the cfformitem too.

15. BM wrote on October 03, 2005 at 7:38 AM

Duh! Should have tried that one too! I'm wondering...why didn't it distort the image?
Thanks!

16. Liam wrote on October 04, 2005 at 8:35 AM

This was one helluva bug. A final solution for me with credit to the posters in this thread for helping me get there:

1) image must be within its own <cfformitem> tag (any text within this tag seems to make the image not display)
2)<cfformitem> must have height and width attributes added otherwise the image is cut off
3) image tag must be within <p> </p>

17. Rick Tuinenburg wrote on March 24, 2006 at 6:43 PM

I have been frustrated with the following issue, and I am not able to find an example anywhere on how to do this.

I am trying to dynamically load up images, while I figured out a way to show the initial images at load time by executing a query and getting the initial image filenames for the images. The tough part is using a dropdown to select another batch of images, and using the flash remoter to call those images. When the flash remoter builds the new query set, I am not sure how to use the resulting queryset on my application, because the image display portion of my application is not an object to put the results against. If it was a grid it would not be a problem, but a grid does not show the images the way I want to. Please somebody help me out with this.

18. herbert wrote on July 30, 2006 at 1:25 AM

how can i call a function in an external .swf ?
i have a slideshow.swf within an cfformitem and want to trigger functions in the external swf.
i.e myGallery.loadImage(1);

regards
herbert

19. Alex wrote on August 10, 2006 at 8:35 PM

How do I display more than one image in a line?
Only the first image displays.

<cfformgroup type="horizontal">
               <cfformitem type="html" height="50" width="400">
                  <p><img src="http://yoda.wvu.edu/esli/images/d01.jpg"; width="10">
                  <img src="http://yoda.wvu.edu/esli/images/d02.jpg"; width="10">
                  <img src="http://yoda.wvu.edu/esli/images/d03.jpg"; width="10">
                  <p><img src="http://yoda.wvu.edu/esli/images/d04.jpg"; width="10"></p>
               </cfformitem>
            </cfformgroup>

20. Simon wrote on August 20, 2006 at 3:23 AM

Hi all,

I just came across this article about loading gif and png at runtime. http://www.informit.com/guides/content.asp?g=flash&seqNum=343&rl=1

So maybe it is possible to load gif and png dynamically in a cfformitem somehow??

21. John wrote on November 15, 2006 at 10:24 AM

I've tried numerous attempts to get an image to load within cfformitem with no success. I've used the following code to attempt to display my image but all that appears is <p></p>.
Very frustrating, can anyone help?

Thanks!

<cfformitem type="html" height="50" width="92"><p><img src="images/gs.gif"/></p></cfformitem>

22. Laura wrote on November 19, 2006 at 5:32 PM

John,
Your main problem is that you cannot load gif using the image tag in Flash. You need to use a jpg instead. See the post example on how to load gif or png. Also, you don't need to escape your <p> elements.

Hope that helps

23. Dave wrote on January 29, 2007 at 5:07 PM

How would you include an image with a link in a <CFGRID> ?

24. John wrote on January 31, 2007 at 9:39 AM

Thanks for your help Laura, is there anyway to position an image within a cfform format="flash" wmode="transparent" using css?

Here's what I've tried so far, the image displays, but doesn't position.

#logo{
   position: absolute;
   top: 250px;
   left: 660px;
   z-index:2;
}

<div id="logo">
<cfformitem type="html" height="62" width="148"><p><img src="images/logo.jpg" alt="logo" name="logo" width="148" height="62"/></p></cfformitem>
</div>

Thanks!

25. tad wrote on March 19, 2007 at 11:54 AM

John,
Doesn't seem like posts are getting answered any more on this site but I was having the same problem you were relative to positioning images within a <cfformitem> tag. I found that by using the style attribute for the <cfformgroup> tag outside the <cfformitem> tag, you can position the image as you want. <cfformgroup style="marginLeft:660; marginTop:250;">. Give this a try and see, you may have to play with the numbers to get the image to position exactly as you want it to. Hope this helps.

26. Don wrote on August 22, 2007 at 12:26 PM

How would I bind/display and image from a query. This one is killing me.

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Preview:

Refresh Preview

1. You wrote on

AsFusion