Home

PSOImageEditor

This is a solution that allows a business user to upload, scale and crop and image through Rhythmyx using the Image Editor interface.

1. Introduction

Generally images are loaded as binaries and if a user wants to have multiple versions of that image, they have to create them with an external tool (such as Adobe Photoshop) and upload all the images separately. The Image Editor allows a user to load a single image, choose all the types of images they want to scale to (using a set of pre-defined sizes by the administrator) and they are driven through a wizard that will allow them to crop the images as they see fit. These images are written into Rhythmyx and can them be accessed as any other content item.

2. Installation

2.1. Software Installation Instructions

NOTE: The patch instructions below apply to Rhythmyx 6.52. Later versions of CM System should have the most current Patch applied for the given release this includes dependent projects like the PSO Toolkit.

To install the PSO Image Editor, the PSO Toolkit for Rhythmyx version 6.5.2 needs to be installed along with Patch RX-14127 or above.

1. Shutdown the server
2. Acquire the PatchInstallToolkit from Technical Support and deploy that into Rhythmyx\Patch
3. Acquire and install Patch RX-14127 by deploying it into Rhythmyx\Patch\RX-14127 and running the install.bat (or install.sh) file.
4. Acquire and install the PSO Toolkit for Rhythmyx version 6.5.2. Unzip into the Rhythymx directory and an Addins folder will be created with the PSOToolkit unzipped into its own folder, run the install.bat (or install.sh file)
5. Unzip the Image Editor into a PSOImageEditor folder within the Rhythmyx\Addins folder, run the install.bat (or install.sh) file.
6. Start up the server
7. Deploy the provided MSM archive to install the appropriate Action Menus, Content Types and Templates and support applications. Note: If you see an error message like the following when installing the Archive:

Shutdown MSM, copy the provided RhythmyxMultiServerManager.ja file into the Rhythmyx root directory and restart MSM. Next time you see the error, click OK, then Next and it will allow you to continue. 8. Ensure to associate the imedImage Content Type and Templates to the appropriate communities in the Community Visibility tab in the Workbench (by default, it will associate to the Enterprise Investments community for testing)

2.2. Image Editor Configuration

The image size types can be configured via an XML document. These changes can be done in the following file: C:\RX\rx652-paginator\AppServer\server\rx\deploy\rxapp.ear\rxapp.war\WEB-INF\config\user\spring\PSOImageEditorService-beans.xml The sizes are defined in the following bean:

<bean id="imedImageSizeDefinitionManager" 
class="com.percussion.pso.imageedit.services.impl.ImageSizeDefinitionManagerImpl">
<property name="sizes">
     <list>
       <bean class="com.percussion.pso.imageedit.data.ImageSizeDefinition">
          <property name="code" value="thumb"/>
          <property name="label" value="Smallest Image"/>
           <property name="height" value="100" />
           <property name="width" value="100"/> 
           <property name="binaryTemplate" value="imedBnThumb"/>
           <property name="snippetTemplate" value="imedSnThumb"/>
        </bean>
        <bean class="com.percussion.pso.imageedit.data.ImageSizeDefinition">
           <property name="code" value="midsize"/>
           <property name="label" value="Midsize Image"/>
           <property name="height" value="250" />
           <property name="width" value="250"/> 
           <property name="binaryTemplate" value="imedBnMidsize"/>
           <property name="snippetTemplate" value="imedSnMidsize"/>
        </bean>
     </list>
   </property>
    <property name="sizedImageNodeName" value="sized"/>
    <property name="sizedImagePropertyName" value="size_code" />
    <property name="failureImagePath" value="rx_resources/user/addins/psoimageeditor/failure.jpg" />  
</bean>

When a new Image Size needs to be added, with in the node just copy a bean and paste it right after the last bean of that type and modify the values as follows:

<bean class="com.percussion.pso.imageedit.data.ImageSizeDefinition">
   <property name="code" value="The code to be stored in Rhythmyx"/>
   <property name="label" value="The label to appear in the Image Editor"/>
   <property name="height" value="The height to be scaled to" />
   <property name="width" value=" The width to be scaled to "/> 
   <property name="binaryTemplate" value="The name of the binary template"/>
   <property name="snippetTemplate" value="The name of the snippet template"/>
</bean>

2.3 Templates

Each image size requires 2 templates, a Binary template that will publish the actual image, and a Snippet template that can be in used to link to that Binary template.

2.3.1. Binary Template

The binary template uses the Binary assembler, there are 3 required bindings.

1.  `$sizecode` specifies the "code" for the desired image size. 
   

2. $sys.binary specifies the desired binary property

3. $sys.mimetype specifies the desired content type. The size code must match the value stored in the XML beans file described in the previous section. The code for $sys.binary is always the same:

   if($user.psoImageEditorTools.hasSizedNode($sys.item,$sizecode)) { $user.psoImageEditorTools.getSizedNode($sys.item,$sizecode).getProperty("rx:sized_img"); } else { $user.psoImageEditorTools.getFailureImageBinary(); }

Similarly, the value for sys.mimetype is always:

if($user.psoImageEditorTools.hasSizedNode($sys.item, $sizecode))
{
$user.psoImageEditorTools.getSizedNode($sys.item,$sizecode).getProperty("rx:sized_img_type").String;
}
else
{
   "image/jpeg";
}

These values can be copied and pasted from the sample templates provided in the package.

2.3.2. Snippet Template

The Snippet templates are dispatch templates which dispatch to the "imedSnCommon" template.

You must provide 2 bindings: $imedSizeCode and $sys.template.
$imedSizeCode is the same size code specified in the Binary template. $sys.template will always contain "imedSnCommon". The common template itself will never need modification.

3. Operation

3.1. Create an Item

To create an Image Editor content item, you can either:

1. Right click on a folder in the main or navigation pane of the Content Explorer.
2. Or right click in the white space in the navigation pane of any folder. A new option will appear, New Image. Clicking on it will load the new User Interface. This interface will allow you to input the basic information for an Image and any required fields are marked with an asterisk.

• An item can be created with just metadata and no requirement to load a Master Image
• Upon loading a Master image, the options for the sized images will appear to the user. Clicking Next, the wizard will dynamically take you to the appropriate pages. When on a Resize page, the cropbox can be dragged by clicking on it and can be resized by clicking and dragging the cropbox edges (highlighted by the red squares). If a user wishes to crop the image using a ratio other than the images, they can click the Constraints check box and more draggable red squares will appear around the edges of the cropbox. If desired, the user can click the select entire picture for very large images and the cropbox will stretch to cover the entire image. Upon hitting next, there will be as many Resize pages as images created, and the final page will be a confirmation page. This page displays all the images that have been uploaded.
  Then click Save and Continue to insert the item into Rhythmyx. The item will then be loaded into the Main page again for the user to continue modifying it if required. The Save and Exit button will save the item and then close the window.
  The Open New Image button will create a new blank image.

3.2. Edit an Item

Find an imedImage item and right click on it, an option for the Image Editor will appear and upon clicking on it, will load the Image Editor interface with the details of that image.

3.3. To Insert an Image into another item

The appropriate slots must be modified to allow the imedImage Content Type and the snippet templates (all but the SnCommon template). Once this has been added to the sys_inline_variant slot and any other slots:

1. Open an item (for example FastForward’s Generic)
2. Click in a body field and click on the Insert Rhythmyx Inline Template button
3. Search for an imedImage and select it. You will see as many templates as Image Sizes you have defined, choose the appropriate one. Note: There is currently still a bug that if no a size image (for example: Small) is not uploaded, and the S – Small Image template is chosen, that template will error.
4. Add the selected imedImage into your item

4. Publishing

Publishing of the sized images requires a separate content list, which you must define and then add to an edition.
All of the Binary templates must have a location scheme, and these schemes must no "collide". That is, no two binary templates should publish to the same location. This can be accomplished in several ways, but the simplest is to use the location prefix in the template definition to separate the locations. The content list shown below differs from the standard content list in 2 respects.

1. The select statement only selects items of the rx:imedImage content type
2. The psoImageSizeTemplateExpander is used. Otherwise, this content list has all of the normal parameters. Both "full" and "incremental" content lists are possible using this technique. .