Skip to content

Impresso responsive widget

Jump to bottom Edit New page
Daniele Guido edited this page Mar 16, 2020 · 3 revisions

The widget is a basic html page containing a IIIF viewer (openseadragon) or a static image of a page or a portion of page.

View a page with highlights of regions and center viewport on coord bounds

Build an iframe with src attribute:

<impresso domain-name>/widget/#/p/<page-uid>/a/article-uid>

Available customisation via query parameters:

coords=x,y,w,h (according to IIIF specifications)

coordsMargin=60 (related to coords scale, add custom margin to the fitBound function of the viewport; default: 50)

backgroundColor=rgb (hex rgb, e.g. '00ffff' for cyan)

overlayBackgroundColor=rgba (hex rgb plus transparency alpha, e.g. 'ff00cc94' for pseudo magenta)

http://localhost:8080/widget/#/p/GAZ-1843-03-08-a-p0003/a/GAZ-1843-03-08-a-i0007/?coords=79,842,1287,1359&coordsMargin=60&backgroundSize=contain&backgroundColor=00ffff&cssFilter=contrast-1.5&overlayBackgroundColor=ff00cc94

Example

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://dev.impresso-project.ch/app/widget/#/p/GAZ-1843-03-08-a-p0003/a/GAZ-1843-03-08-a-i0007/?coords=79,842,1287,1359&coordsMargin=60&backgroundSize=contain&backgroundColor=00ffff&cssFilter=contrast-1.5&overlayBackgroundColor=ff00cc94" style="width:500px; height: 500px">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally