Thumbnails in a cfgrid
In response to a comment in a previous post "Binding an image to a cfgrid" I made a new example that loads thumbnails inside a grid, and when you click in a row, it displays the picture via binding.
<cfform name="myform" height="300" width="600" format="Flash" timeout="100">
<cfformgroup type="horizontal">
<cfgrid name= "grid" rowHeight="50" rowheaders="false" query="properties" width="250" height="230">
<cfgridcolumn type="image" width="40" name="thum" header="Photo">
<cfgridcolumn name="city" header="City">
</cfgrid>
<!--- show the picture in an html cfformitem
paragraph is added because Firefox sometimes fail to load the picture --->
<cfformitem type="html" height="200" width="300"
bind="<p><img src='images/{grid.selectedItem.photo}'></p>"></cfformitem>
</cfformgroup>
</cfform>
Note: Sometimes some of the pictures do not load (may be a bug?)
Update: I posted a fix to that bug and an update of this technique using the CF updater 7.01
Casey Corcoran
They all loaded for me but then some disappear. Strange.
JesterXL
Lenny
Example click row and image associated with that row in database appears. Any ideas?
Thanks.
Mika
<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>
Mika
David
Nahuel
The problem is that the player has the bug. And they didn't fixed in the last release ( 8 ).
Sami Hoda
Laura
Yes, I do have a "fix" that seems to help. I've been preparing a couple of examples and it will be my next post. Stay tuned.
Joshua Buttler
Thanks again for all of your great info!
God Bless
thomary
I would really appreciate any help with loading an image from a cfgrid.
Looking around these blogs I have tried many different lines. None worked.
The query works, the filter works, the bind to get the name of the file from the query works.
It's the loading of the picture I can not get. Any help would be greatly appreciated. partial code is below.
SELECT *
FROM tblidmstr LEFT JOIN tblpictures ON tblidmstr.EmployeeID = tblpictures.EmployeeID
WHERE tblidmstr.Division = "99"
ORDER BY tblidmstr.LastName, tblidmstr.FirstName
<cfgrid name= "data" query="getArtists" height="180" width="500" rowheaders="false">
<cfgridcolumn name="LastName" header="LastName2" width="100">
<cfgridcolumn name="FirstName" header="FirstName2" width="80">
<cfgridcolumn name="File" header="File" width="75"> <!--- not all names have a file --->
</cfgrid>
<cfinput type="image" src="../../..//images/1234.jpg" name="venpic">
<!--- This works but I need the "File" name of the item selected n the grid--->
<cfformitem type="html" name="vpic" height="219" width="176" bind="{'<p><img src=\'/images/'+data.selectedItem.File+ '\'></p>'}"></cfformitem>
<cfinput type="image" name="vpic" height="219" width="176" bind="{'<p><img src=\'/images/'+data.selectedItem.File+ '\'></p>'}">
<cfinput type="image" name="vpic" height="300" width="200" bind="{'<p><img src=\'images/'+data.selectedItem.File+ '\'></p>'}">
<cfinput type="image" name="vpic" height="300" width="200" bind="{'<p><img src=\'../../..//images/'+data.selectedItem.File+ '\'></p>'}">
<cfinput type="image" name="vpic" height="300" width="200" bind="{'<p><img src=\'images/'+data.selectedIndex.File+ '\'></p>'}">
<cfinput type="image" name="vpic" height="300" width="200" bind="{'<p><img src=\'../../..//images/'+data.selectedIndex.File+ '\'></p>'}">
<cfformitem type="html" name="vpic" height="300" width="200" bind="{'<p><img src=\'images/'+data.selectedIndex.File+ '\'></p>'}"></cfformitem>
<cfformitem type="html" name="vpic" height="300" width="200" bind="{'<p><img src=\'../../..//images/'+data.selectedIndex.File+ '\'></p>'}"></cfformitem>
<!--- None of these work. I've tried many different combinations and can not get the picture to show when selected? --->
<cfinput type="text" name="file" label="File" Size="20" disabled="yes" bind="{data.dataProvider[data.selectedIndex]['File']}">
<!--- This works. It fills in the correct file name from the quey. This file name corresponds to the picture located in - NetDrive:\WebUpload\MyPictureplace\Pictures\File.jpg
Laura
are your pictures web-accessible? Why are your pictures located at pictures/ and you reference images/?
To debug it, try to use an absolute path (the path from the root of your domain) like /images/file.jpg and see if it works. Also try harcoding the file, just <cfforimitem><p><img src...><p></cfformitem>. You should be able to see it that way and work from there. I would recommend not to use ../../../ etc... just not readable and difficult to know what the final path will be.
Thomary
The intranet server admin says he doesn't want to move these jpg's into wwwroot for security reasons.
When I copy some over into inetpub\wwwroot\ (in the directory I'm working in) all the copied pictures show. The server admin made the original location a vertual directory and still the pictures do not show. I tried to set the absolute path. This did not work. I wonder if I was doing it correctly. I'm still a novice with CF and Flash. I entered
<cfformitem type="html" height="300" width="200"
bind="<p><img src='<p><img src='P:\WebUploads\Databases\Operations\Pictures\{data.selectedItem.File}'></p>"></cfformitem>
<cfformitem type="html" height="300" width="200"
bind="<p><img src='<p><img src='P:/WebUploads/Databases/Operations/Pictures/{data.selectedItem.File}'></p>"></cfformitem>
I even tried it with the cfinput type="image" nothing is working with the pictures outside the inetput directory. Can you help me get the correct path syntax?
Below is what worked (one only works when I already view the picture in the first example.
<!--- Manual entry of filename - Works --->
<cfinput type="image" name="abcdef" src="../../..//images/V999.jpg">
<!--- Binding grid to filename with pictures copied into this directory - works (shows pictures that were copied here --->
<cfformitem type="html" height="300" width="200"
bind="<p><img src='images/{data.selectedItem.File}'></p>"></cfformitem>
<!---Binding grid to pictures outside inetpub/wwwroot - only works for files already loaded manually, saved and viewed. If I shutdown and restart the pictures that were entered manually don't show. Is there some where the jpg's are cached? --->
<cfformitem type="html" height="300" width="200" bind="{'<p><img src=\'../../..//images/'+data.dataProvider[data.selectedIndex]['File']+'\'></p>'}"></cfformitem>
Thanks for any help.
Laura
I am not sure what you are doing, but this is the general rule: you are creating a little piece of html in the form, so think of it as html. If you were to show an image in html, you would use <img> and the image *has* to be accessible by the browser. The same rules for paths apply here. if you use ../ you are refering to the directory above the one the calling template is located. But you can't go any higher than your domain root (http://www.example.com). Referencing the server drive does not work either (where is the browser supposed to find that file??)
Virtual directories should work. Test your path in a regular html page with
<p><img src="images/somefile.jpg"></p>
By absolute path I mean starting from your web root down to the correct directory, like "/somedir/images/myfile.jpg"
Lastly, it is the browser that loads the images, so that is the only place where they can be cached.
Thomary
Jet
<cfquery name='GetArtwork' datasource='datasourcename'>
SELECT ArtGalleryID,
ArtPathURL + '' + ArtName AS Art_Images,
ArtName,
ArtTitle,
ArtDescription
FROM ArtGallery
ORDER BY ArtGalleryID DESC
</cfquery>
<cfoutput query='GetArtWork'>
Image and Path: #Art_Images#<br />
</cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="margin:0; height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>cfgrid labelFunction - show images in grid</title>
</head>
<cfif GetArtwork.Recordcount lt 1>
<div class='required'>There are no images to view at this time!!</div>
<cfelse>
<cfform name="myform" height="300" width="600" format="Flash" timeout="100">
<cfformgroup type="horizontal">
<cfgrid name= "grid" rowHeight="50" rowheaders="false" query="GetArtwork" width="250" height="230">
<cfgridcolumn type="image" width="40" name="Art_Images" header="Photo">
<cfgridcolumn name="ArtTitle" header="Art Title">
</cfgrid>
<!--- show the picture in an html cfforitem
paragraph is added because Firefox sometimes fail to load the picture --->
<cfformitem type="html" height="200" width="300"
bind="{'<p><img src=\'/Admin/Gallery_Images/'+grid.selectedItem.ArtName+ '\'></p>'}"></cfformitem>
</cfformgroup>
</cfform>
</cfif>
</body>
</html>
Jet
<cfquery name='GetArtwork' datasource='datasourcename'>
SELECT ArtGalleryID,
ArtPathURL + '' + ArtName AS Art_Images,
ArtName,
ArtTitle,
ArtDescription
FROM ArtGallery
ORDER BY ArtGalleryID DESC
</cfquery>
<cfoutput query='GetArtWork'>
Image and Path: #Art_Images#<br />
</cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="margin:0; height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>cfgrid labelFunction - show images in grid</title>
</head>
<cfif GetArtwork.Recordcount lt 1>
<div class='required'>There are no images to view at this time!!</div>
<cfelse>
<cfform name="myform" height="300" width="600" format="Flash" timeout="100">
<cfformgroup type="horizontal">
<cfgrid name= "grid" rowHeight="50" rowheaders="false" query="GetArtwork" width="250" height="230">
<cfgridcolumn type="image" width="40" name="Art_Images" header="Photo">
<cfgridcolumn name="ArtTitle" header="Art Title">
</cfgrid>
<!--- show the picture in an html cfforitem
paragraph is added because Firefox sometimes fail to load the picture --->
<cfformitem type="html" height="200" width="300"
bind="{'<p><img src=\'/Admin/Gallery_Images/'+grid.selectedItem.ArtName+ '\'></p>'}"></cfformitem>
</cfformgroup>
</cfform>
</cfif>
</body>
</html>
mindriot
<cfquery name="getrecord" datasource="getemployee" username="blah" password="blah!">
SELECT *
FROM blah
</cfquery>
<cfoutput>
<cfform name="myform" format="Flash" timeout="10000" width="600">
<cfformgroup type="horizontal">
<cfoutput>
<cfscript>
title = "Binding an image to a cfgrid with thumbnail";
getrecord = queryNew("id,photo");
queryAddRow(getrecord);
querySetCell(getrecord,'photo', '#photo#');
</cfscript>
</cfoutput>
<cfgrid name= "grid" rowheight="50" rowheaders="false" query="getrecord">
<cfgridcolumn type="image" name="photo" display="yes">
<cfgridrow data="photo">
<cfgridcolumn name="FirstName" header="Name">
<cfgridrow data="name">
<cfgridcolumn name="Position" header="Position">
<cfgridrow data="position">
<cfgridcolumn name="Dept" header="Department">
<cfgridrow data="department">
<cfgridcolumn name="Extension" header="Extension">
<cfgridrow data="extension">
</cfgrid>
</cfformgroup>
<cfformitem type="html" height="200" width="300" bind="<p><img src='images/{grid.selectedItem.photo}'></p>">
</cfformitem>
</cfform>
</cfoutput>
Laura
I don't really understand your question. That is what the example in the post does, showing a picture in the datagrid given the filename in the query. In any case, remove the cfgridrow tags, they are not needed. Also, you don't need to create another query, you can use "getemployee" query directly.
Note: If the photo is too big, it might get cropped.
mindriot
Sorry for the confusion. I found my solution to my issue yesterday trying to display images from the image path that was in the db. Unfortunately my issue was not of the cfgrid, but with mysql. I usually deal with strictly mssql so my syntax was a little off. Well anyways here is what I came up with if anyone is interested.
<cfparam name="URL.ID" default="1">
<cfparam name="URL.Name" default="1">
<cfparam name="PageNum_getrecord" default="1">
<cfquery name="getrecord" datasource="blah" >
SELECT *,concat('images/' , 'thumb/', `FirstName` ,`LastName`, '.jpg') as Image, concat(`FirstName`, ' ' , `LastName`) as Name
FROM employees
</cfquery>
<cfoutput>
<cfform name="myform" format="Flash" timeout="100" width="600" onload="formOnLoad()">
<cfformgroup type="horizontal">
<cfgrid
name= "getrecord"
rowheight="40"
rowheaders="false"
query="getrecord"
onchange="getUrl('Employee_Detail.cfm?ID=' +getrecord.dataProvider[getrecord.selectedIndex]['ID']);">
<cfgridcolumn name="id" header="id" type="numeric" display="no" >
<cfgridcolumn name="Image" type="image" width="30" dataalign="center" header="" display="yes">
<cfgridcolumn name="Name" header="Name" width="100">
<cfgridcolumn name="Position" header="Position" width="125">
<cfgridcolumn name="Dept" header="Department" width="115">
<cfgridcolumn name="Extension" header="Extension" width="50">
</cfgrid>
</cfformgroup>
</cfform>
</cfoutput>
Laura
I'm glad you got it working. Just so you know, you can create the complete path in the query like you did, or use labelFunction to set the complete path on the client side instead: http://www.asfusion.com/blog/entry/using-labelfunction-to-format-cfgrid (see 3rd example). The same goes for the name column.
Corey
Laura
I've seen it accepting bigger images, but I was never able to pinpoint what made it work. I think that it something we must live with :(
Dan
I have bee trying to use a cgi process to create an image on the fly vs using canned images. My images would never appear no matter what I did coding-wise. I finally discovered that Flash doesn't like URLs that don't have .jpg in them.
My cgi used to look like this:
<cfform item="html" height="200" width="205" bind="{'<p><img src=\'/cgi-bin/makeThumb.pl?url='+urllist.selectedItem.url+'&sizeh=200&sizev=205\'></p>'}"></cfformitem>
Flash would never even try to fetch this URL. By adding one additional parameter to the CGI (ext=.jpg) Flash happily issues the call, my CGI fires and voila my image appears.
I wanted to share this as it opens up additional functionality.
Maggie
Here is my code:
<cfgrid name="dgSomeList" rowheight="15" rowheaders="false" query="qSomeQuery" height="250" style="useRollOver: false;">
<cfgridcolumn name="PRODUCT" header="Product" width="75"/>
<cfgridcolumn name="IMPACT" header="Impact" width="15" />
<cfgridcolumn name="PRODUCTSTATUS" type="image" header="Status" width="25"/>
<cfgridcolumn name="NUMBEROFLESSONS" header="## of Lessons" type="numeric" width="35" />
<cfgridcolumn name="NUMBEROFPAGES" header="## of Pages" type="numeric" width="35" />
<cfgridcolumn name="HOURSREQUIRED" header="Man Hrs Required" type="numeric" width="65" />
</cfgrid>
Is there anything that I am missing that would render the rowHeight inoperable? This data grid is embedded within a panel and tab navigator, if that has any impact. I ask this, because I had a similar issue with multiple select boxes working in a bare bones flash form, and once I put them in the panel they won't allow any selection. I'm not sure how to fix that either, but that can be for another post.
Any help would be greatly appreciated!