Displaying images in containers in Farcry

This was a question I had when I first started using farcry.

How do I display an image in a container on a page in my farcry site?
Its a question that has come up a couple of times since and its actually pretty easy to answer.

You would normally include an image into a container using the handpicked rule in a container, when you're in design mode on the front of your site. The only problem is that images aren't listed as an "object" that you can select.

The reason for this is that in the core of farcry doesn't allow the dmImage object to be list under the handpicked rule. Fortunately its really very easy to make it listed.

In order to allow a type to be listed you need to have bSchedule="1" as an attribute in the component tag. To make the core dmImage component have this attribute, without editing the core code, you simply extend dmImage in your farcry project.

view plain print about
1<cfcomponent extends="farcry.farcry_core.packages.types.dmImage"
2             displayName="Images"
3             bSchedule="1">

4</cfcomponent>

After this all you need to do is set up some displays in your webskin for dmImage and you're away.

Attached to this post is a small zip that goes into your farcry project folder that does exactly that for you.

UPDATE: Thanks for the comment Jeff. Much appreciated. I'm still a bit of a noob when it comes to Farcry, but I'm slowly getting there, so any and all suggestions/hints/slaps are most welcome. In line with your suggestion I've updated the zip file attached to this post and the image paths now use #application.url.webroot# to specify the relative path to the image folder.

TweetBacks
Comments
Nice post.

A small update though... In FarCry it is strongly recommended to have any relative paths start with the variable application.url.webroot.

So in the files displayTeaser.cfm and displayTeaserImage.cfm where you use an image tag, change the image tag from ...<img src="/images/#stObj.imagefile#".../> to ...<img src="#application.url.webroot#/images/#stObj.imagefile#".../>

This allows your code to be more flexible. So if you ever need to run your site from an alias (or virtual directory) you'll be all set (some people need to do this for dev environments).

To set the value for application.url.webroot, please refer to <project>/config/_serverSpecificVars.cfm.
# Posted By Jeff Coughlin | 3/13/08 9:39 PM
Cheers Jeff! Your suggestion is much appreciated. The files were quickly pulled from a site I've built recently which is a root level application, so didn't really need to think about the application path too much.

However, to make this more useful for other people I've done a quick update to the files and the article.

Thanks again.
# Posted By StephenM | 3/13/08 9:39 PM