The easiest way to work with images is by assigning a variable to the frame, and setting that variable's value (see ?Javascript Variable Input Forms). But it is also possible to directly manipulate an image frame's content

Clearing content

You can call:

function ClearFrame()
{
   var f = editor.GetObject("document.selectedFrame");
   if (f != null)
   {
      if (f.type == "image")
      {
         editor.ExecuteFunction("document.selectedFrame","ClearContent");
      }
   }
}

Assigning a new asset

The easiest way to add a new asset is based on its definition XML. See ?Javascript Variable Input Forms for an explanation on how to get it as part of an input form. The same XML can also be supplied directly to a frame, without linking it to a variable:

function SetImageContent(assetDefinitionXML)
{
   var f = editor.GetObject("document.selectedFrame");
   if (f != null)
   {
      if (f.type == "image")
      {
         editor.ExecuteFunction("document.selectedFrame","LoadContentFromXmlString",assetDefinitionXML)
      }
   }
}

See ?Resource Item Definition XML for more info

Positioning the image within the frame

The position of the image within the frame mainly depends on the fitmode that is used on the imageframe. More information on this can be found on the page ImageFrame XML

Load external assets via Javascript

Our API allows loading of external assets via JavaScript.
The function is called "LoadContentFromExternalServerXmlString". It takes an xml file, describing the external asset, as input.

External Assets

     var xmlString = '<item id="2" 
                            name="Peter Griffin" 
                            remoteURL="http://192.168.0.52/EA_NEW/Serve.aspx?img=Peter-Griffin-transparant.png&amp;amp;type=%TYPE%"
                            thumb="http://192.168.0.52/EA_NEW/Serve.aspx?img=Peter-Griffin-transparant.png&amp;amp;type=thumb" 
                            highResPdfURL="http://192.168.0.52/EA_NEW/Assets/Peter-Griffin-transparant.pdf" 
                            keepExternal="true" 
                            accessibleFromClient="true"> ' +
                                  '<fileInfo width="397" height="400" resolution="72" fileSize="280 kB" /> ' +
                     '</item>';
      
     function setExternalAssetImage() { 
          SetImageContent(xmlString);
     }


     // Sample code: this will set the external asset on every image frame
     function SetImageContent(assetDefinitionXML) {
          var numFrames = editor.GetObject("document.pages[0].frames").length;
          for (var j = 0; j < numFrames; j++)
          {
               var type = editor.GetObject("document.pages[0].frames[" + j + "].type");
               if (type == "image") { 
                    editor.ExecuteFunction("document.pages[0].frames[" + j + "]", "LoadContentFromExternalServerXmlString", assetDefinitionXML);
               }
          } 
     }

GraFx Publisher Documentation

Manipulating Image Frames

Analytics

Clearing content

Assigning a new asset

Positioning the image within the frame

Load external assets via Javascript

Related content