Sample Promotional Tile

Overview

We needed a simple promotional tile for placing on the website. This was used to promote other areas on the site or external subsites of the clients. The tile can have either a fixed horizontal image or a vertical image. The individual tiles will be placed onto the site using the "hand-picked" publishing rule.

For the complete solution we need:

content type
content administration in the webtop
webskins to display the tiles in the hand-picked rule

All code is complete, and the file location is given relative to the project root.

Content Type

./packages/types/bslPromoTile.cfc

<!--- 
|| LEGAL ||
$Copyright: Daemon Pty Limited 1995-2007, http://www.daemon.com.au $

|| DESCRIPTION || 
$Description: Promotional Tile Type $

|| DEVELOPER ||
$Developer: Geoff Bowers (modius@daemon.com.au) $
--->
<cfcomponent 
  extends="farcry.core.packages.types.types" 
  displayname="Promo Tile" 
  hint="Promotional tile for highlighting cross referenced content." 
  bSchedule="true" bFriendly="false" bObjectBroker="true">
<!------------------------------------------------------------------------
type properties
------------------------------------------------------------------------->	
<cfproperty ftseq="1" ftfieldset="General Details" 
  name="title" type="string" hint="Promo title." required="no" default="" 
  ftlabel="Title" ftvalidation="required" />

<cfproperty 
  fthelptitle="Select A Location" 
  fthelpsection="Clicking on the promotion tile will redirect the user to the nominated 
                 location.  You can choose either a folder in the navigation hierarchy 
                 or nominate a fully qualified URL for external addresses."
  ftseq="2" ftfieldset="Redirection" name="linkNavigation" type="string" 
  hint="Link to a navigation folder within the site." 
  required="no" 
  default="" 
  fttype="navigation" 
  ftalias="home" 
  ftrendertype="tree" 
  ftSelectMultiple="false" 
  ftlabel="Navigation Folder" />
<cfproperty 
  ftseq="3" 
  ftfieldset="Redirection" 
  name="linkExternal" 
  type="string" 
  hint="Link to an external website." 
  required="no" default="" 
  fttype="url" 
  ftlabel="External Link" />

<cfproperty ftseq="11" ftfieldset="Badge Image" 
  name="imgHorizontal" type="string" hint="Horizontal promotional tile." required="false" default="" 
  ftlabel="Horizontal Tile" fttype="image" ftimagewidth="280" ftdestination="/images/promotile/imgHorizontal" />
<cfproperty ftseq="12" ftfieldset="Badge Image" 
  name="imgVertical" type="string" hint="Vertical promotional tile." required="false" default="" 
  ftlabel="Vertical Tile" fttype="image" ftimagewidth="144" ftdestination="/images/promotile/imgVertical" />

<!------------------------------------------------------------------------
object methods 
------------------------------------------------------------------------->	

</cfcomponent>

Webtop Administration

webtop XML config

Just using the standard scaffold export here. Obviously this is something you would update or integrate into the overall webtop strategy for the client.

<?xml version="1.0" encoding="utf-8"?>
<webtop>
  <section mergeType="merge" id="thisSection" label="Custom Content" labelType="value">
    <subsection mergeType="merge" id="thisSubSection" label="Custom Content" labelType="value">
      <menu mergeType="merge" id="thisMenu" label="Custom Content" labelType="value">
        <menuitem mergeType="merge" id="bslPromoTileMenuItem" label="bslPromoTile" 
           link="/admin/customadmin.cfm?module=customlists/bslPromoTile.cfm" />
      </menu>
    </subsection>
  </section>
</webtop>

Admin Grid

This is pretty close to the type of master drill down you could get from the scaffold. These things are so easy to whip up, change and finesse its hardly worth hitting the scaffold button.

./customadmin/customlists/bslpromotile.cfm

<cfsetting enablecfoutputonly="true" />

<cfimport taglib="/farcry/core/tags/formtools" prefix="ft" />
<cfimport taglib="/farcry/core/tags/admin/" prefix="admin" />

<!--- set up page header --->
<admin:header title="Promotion Tiles" />

<ft:objectAdmin
	title="Promotion Tiles"
	typename="bslPromoTile"
	ColumnList="title,datetimelastupdated,imgHorizontal"
	SortableColumns="title,datetimelastupdated"
	lFilterFields="title"
	sqlorderby="" />

<admin:footer />

<cfsetting enablecfoutputonly="false" />

Webskins

Only need a couple of different teasers for the contributor to choose from; horizontal tile and vertical tile displays.

The only unusual thing here is the use of ft:object to get hold of the image. This is a nice little short cut using formtools and the display output instead of having to workout the HTML I just get the formtool machinery to do it for me.

./webskins/bslPromoTile/displayTeaserHorizontal.cfm

<cfsetting enablecfoutputonly="true" />
<!--------------------------------------------------------------------
bslPromoTile: displayTeaserHorizontal.cfm
--------------------------------------------------------------------->
<!--- @@displayname: Horizontal Image Tile --->
<!--- @@author: Geoff Bowers (modius@daemon.com.au) --->
<!--- @@description: Horizontal promotional tile image; typically used top of home page.  --->

<!--- import tag libraries --->
<cfimport prefix="skin" taglib="/farcry/core/tags/webskin" />
<cfimport prefix="ft" taglib="/farcry/core/tags/formtools" />

<ft:object stobject="#stobj#" format="display" r_stfields="stfields" />

<cfoutput><div class="promo horizontal"></cfoutput>

<cfif len(stobj.linkNavigation)>
	<skin:buildlink objectid="#stobj.linkNavigation#">
          <cfoutput>#stfields.imgHorizontal.html#</cfoutput>
        </skin:buildlink>
<cfelse>
	<cfoutput><a href="#stobj.linkExternal#">#stfields.imgHorizontal.html#</a></cfoutput>
</cfif>

<cfoutput></div></cfoutput>

<cfsetting enablecfoutputonly="false" />

./webskins/bslPromoTile/displayTeaserVertical.cfm

<cfsetting enablecfoutputonly="true" />
<!--------------------------------------------------------------------
bslPromoTile: displayTeaserVertical.cfm
--------------------------------------------------------------------->
<!--- @@displayname: Vertical Image Tile --->
<!--- @@author: Geoff Bowers (modius@daemon.com.au) --->
<!--- @@description: Vertical promotional tile image; typically used in side bar.  --->

<!--- import tag libraries --->
<cfimport prefix="skin" taglib="/farcry/core/tags/webskin" />
<cfimport prefix="ft" taglib="/farcry/core/tags/formtools" />

<ft:object stobject="#stobj#" format="display" r_stfields="stfields" />

<cfoutput><div class="promo vertical"></cfoutput>

<cfif len(stobj.linkNavigation)>
  <skin:buildlink objectid="#stobj.linkNavigation#">
    <cfoutput>#stfields.imgVertical.html#</cfoutput>
  </skin:buildlink>
<cfelse>
	<cfoutput><a href="#stobj.linkExternal#">#stfields.imgVertical.html#</a></cfoutput>
</cfif>

<cfoutput></div></cfoutput>

<cfsetting enablecfoutputonly="false" />

Extending Hand-Picked Rule

There is a useful publishing rule available in the FarCry CMS Plugin called "Hand Picked Rule". This allows you to hand-pick a specific content type for inclusion on a page using a specific teaser display. However, the hand-picked rule needs to be told which content types are eligible to be picked. As your bslPromoTile content type is brand-new you'll need to override the default list of content types and add your own.

You can override the behaviour of an existing rule in the core code base or any plugin by referencing and extending the rule from within your project code base.

./projects/myproject/packages/rules/ruleHandPicked.cfc

<cfcomponent displayname="Utility: Handpicked Rule" extends="farcry.plugins.farcrycms.packages.rules.rulehandpicked" 
	hint="Hand-pick and display individual content items with a specified displayTeaser* handler.">
<cfproperty ftSeq="2" ftFieldSet="Selected Objects" name="aObjects" type="array" ftJoin="dmEvent,dmFacts,dmFlash,dmFile,dmImage,dmInclude,dmLink,dmNews,dmHTML,bslPromoTile" ftLabel="Select Objects" />
</cfcomponent>

Note that you only need to specify the specific properties that you want to override.