Page Operations
Browse Space
Grey Box Gallery Rule
Try this very simple image gallery rule. Grey box is basically a pop up window that doesn't suck. Just install the existing FarCry Greybox plugin and you are all set. Select the images you want from the image library and display them using Grey Box.
Installation
Really simple installation for your project:
- Install Grey Box Plugin
- Create Image Gallery Rule using the code below
- Deploy the rule to the database
- Reinitialise the application
- Schedule the rule in any container
- Enjoy!
Sample Code
Publishing Rule
./yourproject/packages/rules/ruleImageGallery.cfc
<cfcomponent displayname="Image Gallery" extends="farcry.core.packages.rules.rules" hint="Displays a collection of selected images as a Gallery." bObjectBroker="true" lObjectBrokerWebskins="execute"> <cfproperty ftseq="1" ftfieldset="Image Gallery" name="prefix" type="string" default="" hint="Prefix HTML." ftlabel="Prefix HTML" /> <cfproperty ftseq="2" ftfieldset="Image Gallery" name="aImages" type="array" default="" hint="Array of images to display." fttype="array" ftjoin="dmimage" ftlabel="Collection of Images" /> <cfproperty ftseq="3" ftfieldset="Image Gallery" name="suffix" type="string" default="" hint="Suffix HTML." ftlabel="Suffix HTML" /> </cfcomponent>
Execute Webskin
Create a folder under your project webskin directory called: ./webskin/ruleImageGallery
./yourproject/webskin/ruleImageGallery/execute.cfm
<cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Image Gallery ---> <!--- @@author: Geoff Bowers ---> <!--- @@hashURL: true ---> <!--- import tag libraries ---> <cfimport taglib="/farcry/core/tags/formtools/" prefix="ft" /> <cfimport taglib="/farcry/plugins/farcrygreybox/tags" prefix="gb" /> <!--- output prefix html ---> <cfoutput>#stobj.prefix#</cfoutput> <cfloop from="1" to="#arrayLen(stobj.aImages)#" index="i"> <ft:object objectid="#stobj.aImages[i]#" lfields="thumbnailimage,sourceimage,objectid,alt" format="display" r_stfields="stfields" /> <gb:imageSet imageurl="#stfields.sourceimage.value#" title="#stfields.alt.value#"> <cfoutput><img src="#stfields.thumbnailimage.value#" alt="#stfields.alt.value#" /></cfoutput> </gb:imageSet> </cfloop> <!--- output suffix html ---> <cfoutput>#stobj.suffix#</cfoutput> <cfsetting enablecfoutputonly="false" />
Here is a slightly modified version of the execute.cfm page. I added a div block with styling that adds some padding and creates rows of 5 images across for any number of images. It also puts the alt text just below each image creating a photo caption of sorts.
Josen
<cfsetting enablecfoutputonly="true" />
<!--- @@displayname: Image Gallery --->
<!--- @@author: Geoff Bowers --->
<!--- @@hashURL: true --->
<!--- import tag libraries --->
<cfimport taglib="/farcry/core/tags/formtools/" prefix="ft" />
<cfimport taglib="/farcry/plugins/farcrygreybox/tags" prefix="gb" />
<!--- output prefix html --->
<cfoutput>#stobj.prefix#</cfoutput>
<cfoutput><div style="display:block; text-align:center; padding-left:20px;"></cfoutput>
<cfloop from="1" to="#arrayLen(stobj.aImages)#" index="i">
<cfoutput><table<cfif i mod 5 NEQ 0> align="left"</cfif> style="float:left;"><tr><td valign="top"></cfoutput>
<ft:object objectid="#stobj.aImages[i]#" lfields="thumbnailimage,sourceimage,objectid,alt" format="display" r_stfields="stfields" />
<gb:imageSet imageurl="#stfields.sourceimage.value#" title="#stfields.alt.value#">
<cfoutput><img src="#stfields.thumbnailimage.value#" alt="#stfields.alt.value#" style="margin:3px" /></cfoutput>
</gb:imageSet>
<cfoutput></td></tr><tr><td valign="top" align="center" class="gallerytext"></cfoutput>
<cfoutput>#stfields.alt.value#</cfoutput>
<cfoutput></td></tr></table></cfoutput>
</cfloop>
<cfoutput></div></cfoutput>
<!--- output suffix html --->
<cfoutput>#stobj.suffix#</cfoutput>
<cfsetting enablecfoutputonly="false" />