By Chris Dixon
Photo Management is a key component to Web Content Management. However, managing photos for multiple platforms can become a tangled mess of photo sizes, duplications, and renditions.
PhotoCMS, built upon Alfresco Share 4, using ImageMagick, and Jquery plugins simplifies Photo Management for the Enterprise.
Alfresco Share [v4+] makes for a great platform with the Mozilla rhino JS engine built-in, JQuery and its numerous plugins can be integrated for advanced tools to supplement ImageMagick, which is also an Alfresco bundled application.
To manage the generation of numerous photo renditions, we make use of ImageMagick’s integration with Alfresco. Using a Spring context files we define each rendition:
<bean id=”Rendition40x40″ class=”com.src.repo.rendition.PhotoRendition” parent=”basePhotoRendition”>
<property name=”identifier” value=”40×40″/>
<property name=”sizeValue” value=”40×40″/>
At one of our clients (a large Media Company) we have implemented Alfresco Share 4 with our WCM enhancements and PhotoCMS solution to manage their array of television shows.
They are currently using the PhotoCMS for 80 renditions per show. 80 renditions per image may seem like a lot, but thanks to ImageMagick, creation of renditions is quickly completed and ready for user review.
Using ImageMagick and the photo’s EXIF properties, we can identify the photo’s orientation before making a crop, to minimize heads being cutoff.
Once all renditions are generated a user needs a way to review and adjust the renditions; a banner ad style rendition is very different from portrait cut rendition.
The Photo Rendition page provides the user the opportunity to review the generated rendition and launch the ReCropping tool or the Override Thumbnail tool, if needed.
Clicking on the given size updates the rendition image shown for review. If necessary the rendition can be recropped by launching the recrop tool. Alternatively, the Override Thumbnail page can be launched, allowing the user to replace the rendition with a custom photo of the same size.
Clicking a given size launches a photo picker where a separate image can be selected or a new image can be uploaded.
Adding the ability to recrop a photo within Alfresco shortens the business process necessary to generate a rendition. The recrop tool integrates the Jquery Resize and Crop plugin from Cedric Gampert (https://github.com/trepmag/jrac) providing users the ability to create an updated rendition directly within the CMS to capture the exact rendition wanted.
The thumbnails drop down is populated by the previously mentioned context file where renditions are defined by site, minimizing the rendition sizes. The draggable yellow box is locked to the thumbnail (rendition) size selected. The bottom bar allows the user to zoom in and out.
Upon Submit the zoom level, X and Y coordinates and thumbnail size are submitted to ImageMagick. The updated rendition is generated and saved as an associated rendition on the original image.
Once the image and its rendition have been sorted and approved, they may need additional details associated with them, ie. metadata. All photos have additional metadata fields (specific to the show or purpose) including the ability to be tagged and categorized into Photo Albums.
PhotoCMS Albums are actually specialized Alfresco categories.
This specialized category is just text data consisting of a collection of node IDs and additional metadata (tags, custom fields, ordering etc.) without the need to create additional copies of each image and its renditions.
This allows a single photo to exist only once in the PhotoCMS, but can be in an unlimited number of albums.
While the focus of this blog post is on Photo Management within the CMS, we also have developed Deployment for photos to netstorage to support web browsing and web apps on multiple platforms. Metadata is deployed, in our media customer’s case, to a custom API in JSON format. This JSON houses all of the Photo’s (or Album’s) metadata and rendition sizes and netstorage URLs. Refer to the WCM on Share blog posts for details on Preview vs Production capabilities.