Post Processed Webskin Magic

Ever wanted to just add a link to a YouTube or Vimeo video in your content and have the system convert it to the right embed code? How about a Tweet, or a Gist?  If the embed changes (or your design changes!) how cool would it be to just update a central location and have all your embeds update?

Oh, and ever tried to man handle a large embed in a rich text editor like tinyMCE?  It can be more than a bit messy.

One seriously cool solution is to post-process your content. Have contributors add URLs into their content and then let the view automatically determine what the right embed should be.

Great news!

As of 6.2.3. Post processing can be added to a webskin using the "postprocess", and those transformations will be applied before the webskin is cached:

<!--- @@postprocess: youtube(width=720,height=405);gist --->

This can be applied more selectively with a function or a tag:

<cfset result = application.fc.lib.postprocess.apply(stObj.body,"youtube(width=720,height=405);gist")> <skin:postprocess functions="youtube(width=720,height=405);gist">#stObj.body#</skin:postprocess>

The function strings must be a semi-colon (;) separated list of functions in the form:

[libraryname.]function[(arg1=val1,arg2=val2)]

With:

  • an optional library name (this is the name of a component in the lib package in core, your project, or any plugin)
  • optional arguments (must be named)

These functions have been included in core by default:

  • youtube([width],[height])
  • vimeo([width],[height])
  • gist
  • twitter
  • removewhitespace

Enjoy!

289 views and 0 responses