TIFY is a slim and mobile-friendly IIIF document viewer built with Vue.js. It supports IIIF Presentation API and Image API version 2 and 3.

Continue reading to learn how to integrate TIFY into your website or application and about its options and API, check out the website for usage examples, or have a look at the user guide.

Embedding TIFY

TIFY is available as an npm package:

npm install tify

Embed TIFY into your website in three easy steps:

1. Include both the JavaScript and the stylesheet.

   • Either download TIFY and copy the contents of the dist directory to your server:

     > To avoid issues with browser caching, add a query parameter with the current version, e.g. ?v0.31.0.

   • Or use jsDelivr:

   • Or import TIFY into your web application:

     import 'tify'
     import 'tify/dist/tify.css'
     

2. Add an HTML block element with an id and set its height.

   <div style="height: 640px" id="tify"></div>
   

3. Create a TIFY instance.

Many aspects of the theme can be modified with SCSS variables or CSS custom properties, allowing you to easily adapt TIFY’s appearance to your website. See the theme settings file for all available variables.

Upgrading

If you are are upgrading from any previous version, have a look at the upgrading guidelines.

Options

TIFY takes an options object as its only parameter. While optional, you usually want to set container and manifestUrl.

• childManifestAutoloaded: boolean, default true

  If the manifest set by manifestUrl is a collection (@type is sc:Collection) and childManifestUrl is not set, automatically load the first manifest in the collection. This only works for collections with manifests on the first level; when the collection only contains other collections and childManifestUrl is not set, only the collection view is shown until the user selects a child manifest to load.

• childManifestUrl: string or null (default)

  If the manifest set by manifestUrl is a collection (@type is sc:Collection), additionally load another IIIF manifest, whose @type must be sc:Manifest. Note that TIFY does not check if this additional manifest is actually part of the collection.

• container: string or HTMLElement or null (default)

  The HTML element into which TIFY is mounted. If set to null, TIFY is not mounted at all until mount is called (see API).

• fallbackLanguage: string, default 'en'

  The language to be used for strings from the IIIF manifest that are not available in the current language. If no value matches language or fallbackLanguage, the first available language is displayed.

• filters: object, default {}

  Sets the initial image filters. Available properties are 'brightness', 'contrast' (both a floating-point number between 0.5 and 2) and 'saturation' (floating-point number between 0 and 3), all optional.

• language: string, default 'en'

  The interface language, matching the translation filename without extension. See which translations are available or add your own.

• manifestUrl: string or null (default)

  The URL of the IIIF manifest to load.

• optionsResetOnPageChange: array of strings, default ['pan']

  Viewer options that are reset on page change. Allowed array values are 'filters', 'pan', 'rotation' and 'zoom'.

• pageLabelFormat: string, default 'P : L'

  Defines how page labels are displayed in the page selector and in the thumbnails view. The placeholder P is replaced by the physical page number (consecutive numbers starting at 1) while L is replaced by the logical page label, which can be any string, defined by the manifest.

• pages: array of 1-based integers or null (default)

  The page(s) to display initially. If null, the initial page is determined by the manifest’s startCanvas, and if that is not set either, the first page is displayed. Page numbers start at 1.

• pan: object, default {}

  Sets the initial pan. The object has two optional properties x and y, both floating-point numbers. The higher the value, the more to the left respectively top the image is positioned. By default, the image is centered within the container.

• translationsDirUrl: string or null (default)

  The URL of the directory where TIFY finds its translations, without trailing /. If not set, TIFY tries to determine this URL automatically from its `