Selectionwidgetwhitepaper 140907120000-phpapp02

FotoWeb 8.0 Selection Widget and Export
Whitepaper
Introduction
The FotoWeb 8.0 Selection Widget is an HTML widget designed to be embedded into 3rd party
systems, to allow interactive integration between the systems. Examples of 3rd party systems are
Web CMS systems and Publishing Systems.
The purpose of the widget is to provide a compact and rich User Interface for users who use the 3rd
party system as their primary working interface. They can then access and import assets from the
FotoWeb DAM system without leaving their primary interface. Best of all, the assets ownership can
remain in the DAM system, where it’s easier to centralize and restrict usage of the assets.
By providing a User Interface as a widget, integrators don’t need to write a front end to the FotoWeb
DAM system and API, which is sometimes considered the most costly element of integration work.
Interface
The interface allows users to browse and search their archives, albums and favorites (pins) in the
FotoWeb DAM system. They can also upload assets directly if they are not already present in the
system.
Screenshots
Screenshot Description
Collection list. Lists collection that the user can
access (Archives, albums).

Collection content. List small thumbnails of the
assets in the collection. Allows users to directly
select an asset.
Asset Information. Displays more detailed
information and a larger preview of the asset.
Upload page. Allows user to directly upload
assets from his desktop to the DAM system. The
assets can be used directly after uploading.
Selection Widget Integration
The 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 application by using frameworks that support
web components embedded in 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/views/selection. Then,
subscribe to the selection event in javascript.
Additionally, specifiy the query parameter ?p=export to only show Archives and access where the
user has export rights.
Attach to the DOM
<HTML>
<TITLE>The Main application</TITLE>
<BODY>

<IFRAME src=”http://[FOTOWEBHOST]/fotoweb/views/selectionwidget?p=export”/>
</BODY>
</HTML>
Subscribe to the message
function listener(event){
var url = 'http://[FOTOWEBHOST]';
if (event.origin !== url)
return;
var data = JSON.parse(event.data);
if (data.event === 'assetSelected')
alert("An asset was selected: " +data.asset.href);
}
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
The property “data.asset” will contain all the information asset data, including metadata, renditions
and the href needed to access the asset through the FotoWeb API’s.
Programmatic Export
The system can now instantly generate an export without any further user interaction. Simple
retrieve the asset href from the data object (see above), 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/export/539ff28796aede3348c013b2"
}

The "width" and "height" parameters specify the size of the exported image. If one parameter is zero,
then 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 list as
described below.
The response looks as follows:
200 OK
Content-Type: application/vnd.fotoware.export-data+json {
"caption": {
"tooltip": "",
"label": ""
},
"export": {
"widget": "http://...cbfbd8.htm",
"source": "http://...ROYALS.jpg.info",
"json": "http://...cbfbd8.json",
"image": {
"doubleResolution": "http://...cbfbd8@2.jpg",
"thumbnail": http://...cbfbd8@t.OWisi...57hw.jpg",
"preview": "http://...cbfbd8@p.OWisi...57hw.jpg",
"highCompression": "http://...cbfbd8@hc.jpg",
"normal": "http://...cbfbd8.jpg"
},
"size": {
h: 583,
w: 800
}
},
"publication": {
"text": "http://example.org"
}
},
"metadata": {
"115": "REUTERS",
"80": "POOL"
}
}
The URLs in "image" are the actual exported images. There is also a "widget" that can be shown in an
IFRAME and JSON metadata.
The "thumbnail" and "preview" URLs should not be used publicly. Normally they are used in the
export management dialog in FotoWeb, but they may be used by the integration to show a
thumbnail or preview in the editor.

The "doubleResolution" URL is a version that can be used for Retina screens.
"source" is the original permalink to the asset, which can be used for exporting it again.
Retrieving the list of export presets
The Export Widget will present a user with presets. If you wish to do programmatic export, you can
get the list of presets with the following web request:
GET /fotoweb/me/presets/export/
Accept: application/vnd.fotoware.export-preset-list+json
This returns the following data:
{
"paging": null,
"data": [ {
"name": "My Preset",
"href": "/fotoweb/me/presets/export/539ff28796aede3348c013b2"
} ]
}
Each preset is identified by its URL ("href") and has a display "name" that can be shown in the UI. The
URL is needed to choose a preset when exporting an asset.
Export Widget Integration
When an asset has been selected, and a message has been passed to the system, you can optionally
open the FotoWeb Export widget to generate an exported rendition of the asset. This creates a
rendition and an export record that can be managed as a separate resource in the system. The
widget can apply cropping, enhancements and other information to the export that does not affect
the original asset.
HTML Example
The Export widget needs to be opened as a dialog in an IFRAME in the DOM structure of the main
application. The url to the widget is generated with the following format:
/fotoweb/views/publish?i=[asset-href] The asset href can be obtained from the event data from the
Selection Widget (see above).
You can also specify additional optional querystring parameters to give the users some constraints:
w = width in pixels
h = height in pixels
p = name of chosen preset
pub = url/name of page being edited
Attach to the DOM
<HTML>
<TITLE>The Main application</TITLE>
<BODY>

<IFRAME
src=”http://[FOTOWEBHOST]/fotoweb/views/publish?i=/fotoweb/.../file.
jpg.info”/>

</BODY>
</HTML>
Subscribe to the message
function listener(event){
var url = 'http://[FOTOWEBHOST]';
if (event.origin !== url)
return;
var data = JSON.parse(event.data);
if (data.event === 'assetExport')
alert("An asset was exported. Link to the exported image: " +
data.export.image.normal);
}
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}

Selectionwidgetwhitepaper 140907120000-phpapp02

Recommended

Recommended

More Related Content

Similar to Selectionwidgetwhitepaper 140907120000-phpapp02

Similar to Selectionwidgetwhitepaper 140907120000-phpapp02 (20)

Recently uploaded

Recently uploaded (20)

Selectionwidgetwhitepaper 140907120000-phpapp02