Skip to main content

 

Documentation & User Guides | FotoWare

Export Widget Integration

Introduction

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.

HTML 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>
    <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>

Javascript Example

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.

​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);
}​

Programmatic Export

The system can now instantly generate an export without any further user interaction. Simply retrieve the asset href from the API or the Selection widget, and then perform the following web request:

​EXPORT /fotoweb/archives/5000-My%20Archive/Path/to/file.jpg.info
Content-Type: application/vnd.fotoware.export-request+json
Accept: Application/vnd.fotoware.export-data+json
{
"width": 1234,
"height": 1234,
"publication": "http://example.org",
"preset": "/fotoweb/me/presets/exports/539ff28796aede3348c013b2"
}​

The width and height parameters specify the size of the exported image. If one parameter is zero, it will be set automatically to match the aspect ratio given by the preset. To assign an aspect ratio to  a preset, open the CMS export dialog, draw a crop frame in the size & crop tab and save it as a preset. publication is an arbitrary string that is used for managing exports. It should identify where the export was published. It is recommended to be the URL of the site where the export is published. preset is the URL of the selected preset, which is obtained from the preset lists as described 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

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/views/publish?i=%2Ffotoweb%2Farchives%2F5003-Trip%2520pictures%2FPrivate%2FDSC00697jpg.info&crop=false
  • Was this article helpful?