Dynamic image gallery creation using post processing

howto
1

Cool just did my first post process, it’s for dynamically creating image galleries in the body.

Let me know if anyone has any suggestions on this. (You will of course, need to create the insertHTML_ImageSlider.cfm & insertHTML_ImageGallery.cfm and then the displayPostProcessSlider.cfm & displayPostProcessGallery.cfm webskins)

<cfcomponent hint="Post processing functionality" output="false" extends="farcry.core.packages.lib.postprocess">
<cfimport taglib="/farcry/core/tags/webskin" prefix="skin" />
	<cffunction name="imageGallery" access="public" output="false" returntype="string" postprocesser="true" hint="Parses out image Galleries front image and replaces them the full gallery">
		<cfargument name="input" type="string" required="true" />
 
		<!---  <img class="galleryInsert" src="/images/dmImage/ThumbnailImage/41494111.jpg" border="0" rel="11286FC0-017D-11E4-9B4F080027410349" /> --->
	        <!---  <img class="gallerySlider" src="/images/dmImage/ThumbnailImage/41494111.jpg" border="0" rel="11286FC0-017D-11E4-9B4F080027410349" /> --->
        
		<cfset var match1 = '<img(?=[^>]*class="galleryInsert")\b[^>]*?\b(rel)\s*=\s*(?:"((?:[^"])*)")[^>]*>' />
	        <cfset var match2 = '<img(?=[^>]*class="gallerySlider")\b[^>]*?\b(rel)\s*=\s*(?:"((?:[^"])*)")[^>]*>' /> 
	        <cfset aMatches = regexMatch(arguments.input, match1) />
	        <cfset aMatche2 = regexMatch(arguments.input, match2) />
       
		<cfloop from="1" to="#arraylen(aMatches)#" index="i">
	          <skin:view objectid="#aMatches[i][3].value#" typename="farImageGallery" webskin="displayPostProcessGallery" r_html="textContent">
	          <cfset arguments.input = rereplace(arguments.input, variables.regexLineStart & aMatches[i][1].value & variables.regexLineEnd,textContent)>
	        </cfloop>
        
	        <cfloop from="1" to="#arraylen(aMatche2)#" index="i">
	          <skin:view objectid="#aMatche2[i][3].value#" typename="farImageGallery" webskin="displayPostProcessSlider" r_html="textContent">
	          <cfset arguments.input = rereplace(arguments.input,variables.regexLineStart & aMatche2[i][1].value & variables.regexLineEnd,textContent)>
	        </cfloop>
	
       		<cfreturn arguments.input />
	</cffunction>
</cfcomponent>

Also available here:

2

Looks good! Would be great to see all the code for a complete solution; ie. add in examples of the webskins you reference, and a screenshot :smile:

3

This is all about adding a postprocess for farImageGallery.

Step one, extend dmHTML to allow the text editor to insert the gallery:

<cfproperty 
name="Body" type="longchar" hint="Main body of content." required="no" default="" 
ftSeq="20" ftwizardStep="Web Page" ftFieldset="Body" ftLabel="Body" ftLabelAlignment="block"
ftType="richtext"  ftContentCSS="/zuma/css/rich-text.css"
ftImageArrayField="aObjectIDs" ftImageTypename="dmImage" ftImageField="StandardImage"
ftTemplateTypeList="dmImage,dmFile,dmNavigation,dmHTML,farImageGallery" ftTemplateWebskinPrefixList="insertHTML"
ftLinkListFilterRelatedTypenames="dmFile,dmNavigation,dmHTML,farImageGallery"
ftTemplateSnippetWebskinPrefix="insertSnippet">
<cfproperty 
name="aObjectIDs" type="array" hint="Related media items for this content item." required="no" default=""
ftSeq="21" ftwizardStep="Web Page" ftFieldset="Body" ftLabel="Attached Images/Files" 
ftType="array" ftJoin="dmImage,dmFile,farImageGallery" 
ftShowLibraryLink="false" ftAllowAttach="true" ftAllowAdd="true" ftAllowEdit="true" ftRemoveType="detach"
ftallowbulkupload="true"
bSyncStatus="true">

Above, note the inclusion of ftContentCSS. This is to style the image that gets dropped into the body copy. Mine looks like:

img.galleryInsert {border:1px dotted grey;padding:4px;display:block;clear:both;}
img.gallerySlider {border:1px dotted grey;padding:4px 20px;display:block;clear:both;}

Step two - add ‘rel’ to the tinyMCE config, this will hold the objectid of the gallery:

imagegallerypostprocess-tinymce-config.jpg1070×795 128 KB

Step three, extend webskin/farImageGallery to include the following files:

Step four, extend the packages/lib/postprocess.cfc with:

Step five, an update application and you should end up with:

imagegallerypostprocess-tinymce.jpg1070×795 60.6 KB

Note above, I’ve styled the slider slightly wider. Sorry haven’t spent much time on that :).
and then…

1 Like