Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Next »

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" />
  • No labels