m Menu

Better content management: place page elements where you want them

ExpressionEngine CMS, Featured, Web development

Our client Blue Mango Learning wanted the capability to insert a customer quote at an arbitrary spot within a block of text in their Case Studies section. ExpressionEngine, our CMS of choice, has an add-on that will do this, but we wanted a method that was more intuitive and visually appealing.

First, we have text fields for our client quote and quote source.

Second, a rich text field for the body. This uses the WYGWAM editor. We use:

  • A customized stylesheet for WYGWAM
  • A special javascript file which makes preset <div> classes available.

This lets the user chose the spot in their body field where they want the quote to appear. When the <div> is inserted (see outlined button), it appears with a background image that gives the user a clear placeholder for the quote.

 

Finally, we use some basic jQuery to replace the placeholder <div> with the actual div containing the quote.

Here's our CSS for WYGWAM:

.pullquote-placeholder {
	margin:10px 0;
	width:610px;
	height:100px;
	border:1px dashed blue;
	overflow:hidden;
	clear: both;
	background: url("/images/pullquote-placeholder.gif") no-repeat; }

Our javascript for WYGWAM custom styles:

CKEDITOR.addStylesSet('mystyles',[
	{name:'Pullquote',element:'div',attributes:{'class': 'pullquote-placeholder'}}
]);

And our jQuery used on the ExpressionEngine template.

// Move the contents of .pullquote into .pullquote-placeholder
$(document).ready(function(){
	$('div.pullquote-placeholder').replaceWith($('div.pullquote'));
})

The final results:

Bonus round

This technique also works for embedded videos (YouTube, Vimeo, etc.). This allows separation of the video from the text content, in case you want to manage videos separately, for example, in their own channel.

Footnote

Your code may vary depending on:

  • Which version of jQuery you're using
  • Whether you're using WYGWAM, Wyvern, or another rich text editor

Image credits: Chip Harlan