Farcry dmFact with teaser image.

I'm going to post a few articles on "stuff" relating to Farcry 3 and doing some introductions to new features in Gonzales (Farcry 4 Beta).

Here's a short one to get me started.

Steven Clason recently asked on the farcry dev list how do I get the filename for an teaser image that has been added to a fact.There are two answers to this question, the first is blog entry posted by Trond Ulseth which uses the FourQ tag contentobjectget. This works well, but its a trap I fell into recently when I moved the Dott website to Gonzales from FC 3.x.

The problem comes when the path to the images moves, which it does in Gonzales. Gonzales moves all the images into appropriate folders under the image folder, so Source image go in a "Source" folder and thumbnails go in a "Thumbnail" folder. Trond's code, and the code I had previously written, falls down because it has the "/images/" path hardcoded into the webskin.

view plain print about
1<img src="/images/#getObject.imagefile#" align="right" alt="#getObject.alt#" />

To get around this problem the dmImage component has a method in it that returns the URL for a given dmImage ObjectID.

Its pretty easy to use. Create an object that points to the dmImage type component and call the the method getURLImagePath(). The method takes two parameters; the first is the ObjectID of the image and the second is the image type that you want the URL for. The image types are thumb, optimised and original. In Gonzales, these equate to thumbnail, standard and Source respectively.

So at the top of your webskin you will have something that looks like this :

view plain print about
1oImage = createobject("component","farcry.farcry_core.packages.types.dmImage");
2imagePath = oImage.getURLImagePath(stObj.ImageID,"original");

In the HTML you would use the variable imagePath in place of "/images/#getObject.imagefile#" for the src attribute.

So that has got you the URL for the image, but not the alt text or any of the other image information that is available to you. To get this data you can call the getData() method that is inherited from the types cfc, giving you something like this :

view plain print about
1oImage = createobject("component","farcry.farcry_core.packages.types.dmImage");
2stImage = oImage.getData(stObj.ImageID);
3imagePath = oImage.getURLImagePath(stObj.ImageID,"original");

stImage is a structure returned by the getData() method containing the data for the given imageID. In this structure you will find the title, alt tag, status, height and width of the image as well as the file names for the various types of image. Do a cfdump of this structure to see what you get or take a look at /farcry_core/packages/types/dmImage.cfc for the properties.

Now you can add your alt tag and the image height and width to the img tag in your webskin.

view plain print about
1<img src="#ImagePath#" height="#stImage.height#" width="#stImage.width#" alt="#stImage.alt#" title="#stImage.title#">

A quick note here : in Gonzales the height and width properties are deprecated, so may be empty if you've added images to the library in a Gonzales install.

So all in all your webskin will look something like this :

view plain print about
1<cfscript>
2 oImage = createobject("component","farcry.farcry_core.packages.types.dmImage");
3 stImage = oImage.getData(stObj.ImageID);
4 imagePath = oImage.getURLImagePath(stObj.ImageID,"original");
5
</cfscript>
6<cfoutput>
7<div class="dmFactImageTeaser">
8 <div class="title"><a href="#stObj.Link#">#stObj.Title#</a></div>
9 <div class="body">
10 <img src="#ImagePath#" height="#stImage.height#" width="#stImage.width#" alt="#stImage.alt#" title="#stImage.title#">
11 #stObj.Body#
12 </div>
13</div>
14</cfoutput>

This will work for Farcry 3, but for height and width information in Gonzales you'll need to use the recently added farcry.simpleimage component. When I've done this myself I'll post an update and add an image fact webskin to the farcrycms library.

UPDATE : I noticed a typo in the path to the dmImage component. "package" should be "packages" - all corrected above I think

UPDATE No.2 : It occurs to me that it would be better practice to use the application.packagepath variable to specify the "farcry.farcry_core" part of the path to the core types folder, so the create object would be :

view plain print about
1oImage = createobject("component","#application.packagepath#.types.dmImage");

TweetBacks
Comments
I stand corrected :)
Great stuff there Stephen.

Cheers,
Trond
# Posted By Trond Ulseth | 3/13/08 9:39 PM
Don't know if you already know, but...

You could also do it like this:
<cfimport taglib="/farcry/farcry_core/tags/widgets" prefix="widget" />
<widget:imageDisplay objectid="#stObj.teaserImage#" alt="#stObj.title#" ImageSize="thumb" />

I have'nt tested this with Gonzales, but I'm pretty sure it would work:)
# Posted By Jørgen Skogås | 3/13/08 9:39 PM
sheesh... These things are aways in the most obvious places! ;)

It looks like it should work with Gonzales, but would need to make sure that the code that gets the image size is still valid. Also looks like it would benefit from a quick check up to make sure that all the attributes that are passed in are actually processed and used appropriately.
# Posted By Stephen Moretti | 3/13/08 9:39 PM