Skip to main content

 

Documentation & User Guides | FotoWare

Export Widget Integration

The Export Widget is implemented as a HTML application that is designed to be embedded into other html based systems. It can also be embedded into native applications by using frameworks that support web components embedded into the user interface.

Example

To embed the application, simply create an IFRAME in the DOM structure of the main application (owner), and set the src property to: 
http://[FOTOWEBHOST]/fotoweb/widgets/publish?<parameters>

Parameters

Parameter Description
i href of an asset
w A set width of the export
h A set height of the export
p A predefined preset
pub Publication text (used for easier identification of the export)

HTML

<HTML>
    <HEAD>
        <TITLE>The Main application</TITLE>
    </HEAD>
    <BODY>
        <!--code of the main application -->
        <IFRAME src= "http://[FOTOWEBHOST]/fotoweb/widgets/publish?i=[some href to an asset]&h=200&w=400&p=frontpage&pub=frontpage" />
    </BODY>
</HTML>

When you click Publish, the Export Widget sends back an event that contains a data.export object. This will contain all the information about the export, listed below.

The export object

{
  "event": "assetExported",
  "export": {
    "export": {
      "source": "http://...AILYLIFE.JPG.info",
      "json": "http://...cb33625a1d4c.json",
      "image": {
        "normal": "http://...acb33625a1d4c.jpg",
        "highCompression": "http://...8f4acb33625a1d4c@hc.jpg",
        "doubleResolution": "http://...33625a1d4c@2.jpg",
        "thumbnail": "http://...IEh39NDlHZB3A.jpg",
        "preview": "http://...0j30IEh39NDlHZB3A.jpg"
      },
      "widget": "http://...1146c28f4acb33625a1d4c.htm",
      "size": {
        "w": 299,
        "h": 199
      }
    },
    "caption": {
      "label": "",
      "tooltip": ""
    },
    "publication": {
      "text": "yo man"
    },
    "metadata": {
      "80": "CARLO ALLEGRI",
      "115": "X02452"
    }
  }
}​

Legend

Property Description
Image Contains href to different sizes of the export.
widget An image that can be shown in an IFRAME
source The original permalink to the asset

Javascript

​function listener(event) {
    var url = 'http://[FOTOWEBHOST]';
    if (event.origin != url) {
        return;
    }​

    var export = JSON.parse(event.data.export);

    if (data.event === 'assetExported') {
        alert("An asset was exported: " + export.image.normal);
    }​
}​

if (window.addEventListener) {
    addEventListener("message", listener, false);
}​
else {
    attachEvent("onmessage", listener);
}​

Controlling user access to feature tabs in the widget

After choosing an image with the selection widget, FotoWeb displays the Export widget to let the user adjust image size, crop and style the exported image. The options available here can be controlled in two ways:

  • ​By enabling/disabling features in the FotoWeb site configuration in the Operations Center
  • By sending parameters to the export widget in the url. This can only be used to hide tabs. These parameters cannot be used to show tabs that are disabled in the site settings described above.

Query parameters

Parameter Description
crop=false Image crop, size and rotate
enhance=false Enhancement filters
caption=false Image caption
action=false Click action behavior
behaviour=false Embed behavior (Ken Burns effect)
publication=false Publication information

Example URL: Hiding the crop and size tab

http://fwserver/fotoweb/widgets/publish?i=%2Ffotoweb%2Farchives%2F5003-Trip%2520pictures%2FPrivate%2FDSC00697jpg.info&crop=false
  • Was this article helpful?