Smart images for content editors

Smart images for content editors

As our team, content and site grows we have been struggling with how to deploy images in a easy user friendly way to our admins. We have run in to situations like a video thumbnail link to a video gets put on a page. That same video get’s a new preview image on the backend by another admin. The old image link either breaks or is out of sync. Also how is this image scaled and how can we control that for a mobile version of the site.

Images can be:

• a video thumbnail and needs play overlay and a video click action
• a pdf icon with a versioned link to that pdf
• a versioned screenshot that may need to get updated as UI’s get updated.

Functional Requirements:

• images need to be scaled by image cache.
• links need to have consistent click actions that are controlled in one place via code. (no one off links that can get lost in a deep site.
• any image can be updated and then pushed out to wherever it is linked within the content
• clean simple UI for admins.

images:

Now our bloggers are using the imce module which content wise is like the wild wild west. They like it but it falls outside of the scope above. Their images have rogue links and image files. Their images also will not be able to resize for a mobile version of the blog. Also if blogger_a moves a image and blogger_b has used that image boom there is a new broken image link. A blogger can also upload a 1mb jpg file then set the image width and height via the rich text editor and display it. This could also kill the page load time for a mobile user or someone on a slow connection.

Here is how we set up our managed images for video previews, pdf links, screenshots and image nodes.

Content types:

• Video
• Pdf
• Image

Ajax image loader

We have a view for all the above content types with some exposed filters that allows a admin to quickly filter and find the content that they are looking for. Once they locate the node they then click the “popup link” text which gives them a list of embed links. They then can past these in to any part of the site, block, node, view etc.
The links look like:

"a href='/media-thumb/small/990' rel='media-thumb'"

Our admin view uses

On the back end we have a small module that grabs the nid and builds the markup :

//hook menu to create a page;
function media_popup_menu() {


  			$items['media-thumb'] = array(
				'access arguments' => array('access content'),
				'page callback' => 'media_thumb_page',
                                'access callback' => 'user_access',
				'description' => 'Display Media.',
  				);

  			return $items;

}

//our display function referenced from the hook menu above under page_callback;
function media_thumb_page(){
    switch(arg(1)){
        case 'large':
            $embed_size = 'large_video_preview';
            break;
        default: 
           $embed_size = 'video_thumb';
            break;
    }
    $modalID = arg(2);
        if($modalID != ''){
         $modalNode = node_load($modalID);
      print theme('imagecache', $embed_size, $modalNode->field_thumb_image[0]['filepath']);
        }
        else{
            print '';
            }
}

So now a little jQuery to find the embed link then pull in the image and attach the desired click event:

//We create a jQuery plugin to call:
(function( $ ){
    var methods = {
        init : function( options ) {
            return this.each(function(){
                var $this = $(this);
                var thumbImage = $this.attr('href');
                var thumbNid = thumbImage.split('/');
                var thumbSize = 'thumb-overlay-' + thumbNid[2];
                $this.append('
');
                 $('.thumb-nid-' + thumbNid[3]).load(thumbImage, function(){
                        $this.attr('href', '/media-popup/' + thumbNid[3])
                        $this.unbind();
                        $this.popupAsset();
                        $('.thumb-nid-' + thumbNid[3]).append(' ');
                 });
            });
        }
    };
    $.fn.embedThumb = function( options ) {

        return methods.init.apply( this, arguments );
    };
})( jQuery );

//Now we can bind the links:
$(document).ready(function(){
	$('a[rel=media-thumb]').embedThumb();
});

Mobile logic.
In the above code where we grab the image cache thumb via php you can easily add some domain logic in there.

if($_SERVER['HTTP_HOST'] == 'http://mobile.site.com'){
		 $embed_size = 'mobile_thumb';
}

You could also add a user agent string on the jquery side to look for a mobile device then pull a smaller image cache preset. We do not have that for this expamle but will soon...

if((navigator.userAgent.match(/iPhone/i)) 
	||(navigator.userAgent.match(/Android/i)) 
	||(navigator.userAgent.match(/iPod/i)))
	{ 
	thumbNid[3] = 'mobile';
	//this would reset the image size sent to our module in arg 1. 
        //You would need to add a item to the switch statmeent in php.
	}

All in all this solution took only a couple of hours to figure out. It may not be the perfect solution but it works for us. Chime in below if you have some thoughts on ways to improve or questions.