CommonSpot Custom Field Crazyness!

We were recently tasked by the University of Wisconsin, Eau-Claire to produce a series of advanced custom elements to help their content contributors generate a Pinterest-style image grid.

There are three major components to the element:

1. An image editor that allows contributors to upload an image and then pan/zoom/crop to a specific image size.
2. An editor that allows contributors to overlay caption on top of the cropped image.
3. Output of multiple cropped & captioned images into a responsive, pinterest-style display

Creating the Image Editor Custom Field

Starting from a codebase with limited pan/zoom cropping functionality (http://danielhellier.com/imagecrop/), we refactored the jQuery component to support fixed-sized crop areas as well as implement a bounding box and also tied in a slider component to enable easy-to-use zooming. We also added in the capability to transmit the scaling/cropping coordinates to an application server for server-side processing.

[Click here to play around with the proof-of-concept]

Adding Text Captioning by using a Draggable, Editable <h3> Element

For this project, we needed to give contributors the ability to place a text overlay on the image. The word “and” would need to be automatically converted to uppercase and have a style applied via CSS. To enable the users to choose a color, we used the spectrum plugin for jQuery which generally worked as advertised.

You can make editable <div> segments by simply adding a contenteditable attribute to a block element as illustrated below. The cropped image was simply placed behind the <h3> in the container

<div id="#fqfieldname#-container" style="width: #adjustedWidth#px; height: #adjustedHeight#px">
  <div id="#fqfieldname#-preview" style="border: 1px solid black">

	<h3 class="POAeditablelabel"
            id="edittext-#fqFieldName#" contenteditable
            onFocus="stripAnd(this)">#poaAttribs.text#</h3>

	<img id="#fqfieldname#-image"
	  style="width:#stParams.nWidth#px;
	  height: #stParams.nHeight#px;"
 	 <cfif poaAttribs.src is not ""> src="#poaAttribs.src#"</cfif>
        >

  </div>
</div>

We then applied jQuery UI’s draggable plugin to enable the user to drag the editable heading within it’s container:

	jQuery('##edittext-#fqFieldName#').draggable({ containment: 'parent', axis: 'y' })
  	.click(function() {
	  jQuery(this).draggable({ disabled: false });
	}).dblclick(function() {
	  jQuery(this).draggable({ disabled: true });
	});

Creating a Pinterest-Style Render Handler

Leveraging the jQuery isotope and jQuery lazyload plugins, Fig Leaf’s developers were able to devise an algorithm that would automatically resize images into a “pinterest”-style image grid in order to minimize the right margin space that typically results from implementing these types of layouts as well as work with the dyanamic text overlays required by the customer.

Every time the browser is resized, we dynamically rewrite the image CSS classes and then reinvoke the isotope plugin. The key javascript function, executed on browser resize, is illustrated here:

 

function generateStyles() {
 
 // get pointer to stylesheet			
 var ss = $("#POADynamicStyles"); 
 var container = $("#POAcontainer");
 var width = container.width();
 
// set minimum width of images to 160, maximum width to 201
 var minWidth = 160, maxWidth = 201, iWidth = 0;
				
				
 // figure out the optimal number of cols, given the available space
 for (var numCols=2; numCols<15; numCols++) {
   iWidth = Math.ceil(width / numCols);
   // console.log('cols', numCols, 'width', iWidth);
   if (iWidth <= maxWidth && iWidth >= minWidth) {
	break;
   }
  }
				
  if (numCols == 15) {
    numCols = 3;
    console.log('auto sizing failed');
  }
			
  // 10px margin around images
  var w1 = Math.floor(width / numCols) - 10;

  var reducePercentage = w1/250;
  var fontSize = reducePercentage * 2.7125;
  var lineHeight = 1;
  var heightOffset = 0;

  heightOffset = (-0.13 * (100 - (reducePercentage * 100)));

				
  var styles = ''.concat(
	'.item.w2  {width : {1}px;} \n',
	'.item.h2 {height: {1}px;} \n',
	'.item {width : {0}px; height: {0}px;}\n',
	'.item h3 {font-size: {2}rem; line-height: {3}; transform : translate(0px,{4}px)}'
   ).format(w1,w1*2+10,fontSize,lineHeight,heightOffset);
				
				
   ss.html(styles);
   initIsotope(w1 + 10);
			
}

[You can view an early proof-of- concept by clicking here].

Would you like to know more?

Contact Fig Leaf Software’s Professional Services group at info@figleaf.com to discover how we can help you achieve your CMS implementation goals.