TIFY –
A slim and mobile-friendly IIIF document viewer

Demo

Loading

Sample Documents

Core Features

  • Lightweight – only 140 kB (gzipped)
  • Fast – also with very large manifests
  • Easy to embed and highly configurable
  • Fully responsive and accessible
  • State can be reflected in bookmarkable URL

Usage examples

Get TIFY

npm install tify

Download TIFY 0.34.5

GitHub Repository

Getting Started

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.

Check out the demo.

Embedding TIFY

Add an empty HTML block element with an id and a set height:

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

Include TIFY:

  • Either via npm (recommended):

    npm install tify

    • If you are using a build tool like Vite, import the required files and create a TIFY instance:

      import 'tify/dist/tify.css'
import Tify from 'tify'

new Tify({
  container: '#tify',
  manifestUrl: 'https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json',
})

    • Otherwise, upload everything from node_modules/tify/dist to your web server and add this to the HTML output:

      <link rel="stylesheet" href="tify.css?0.34.4">

<script type="module">
import Tify from './tify.js?0.34.4'

new Tify({
  container: '#tify',
  manifestUrl: 'https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json',
})
</script>

      Adjust the paths as needed. Appending ?0.34.4 prevents caching issues when upgrading.

  • Or use a CDN like jsDelivr or UNPKG:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tify@0.34.4/dist/tify.css">

<script type="module">
import Tify from 'https://cdn.jsdelivr.net/npm/tify@0.34.4/dist/tify.js'

new Tify({
  container: '#tify',
  manifestUrl: 'https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json',
})
</script>

Upgrading

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

Configuration

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

See options for a documentation of all available options.

An example with most options set to non-default values:

new Tify({
  container: '#tify',
  language: 'de',
  manifestUrl: 'https://example.org/iiif-manifest.json',
  pageLabelFormat: 'P (L)',
  pages: [2, 3],
  pan: { x: .45, y: .6 },
  translationsDirUrl: '/translations/tify',
  urlQueryKey: 'tify',
  urlQueryParams: ['pages'],
  view: '',
  viewer: {
    immediateRender: false,
  },
  zoom: 1.2,
})

Customizing

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.

API

TIFY provides an API for controlling most of its features, see API documentation.

Options

  • annotationId

    Type
    string or null
    Default
    null

    The ID of the annotation to highlight when the text view is active. Only has effect for manifests with annotations.

  • annotationsVisible

    Type
    boolean or null
    Default
    null

    When the text view is active (or just the media view on small containers)TIFY displays clickable overlays on the image, which are linked to their corresponding annotation in the text view. Set to false to hide overlays by default. Annotation overlays can always be toggled by the user. Only has effect for manifests with annotations.

  • childManifestAutoloaded

    Type
    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

    Type
    string or null
    Default
    null

    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.

  • colorMode

    Type
    string
    Default
    'auto'

    Determines if TIFY is displayed in light or dark mode. auto: Determine color mode automatically based on browser preferences. light: Use light mode, regardless of browser preferences. dark: Use dark mode, regardless of browser preferences.

  • container

    Type
    string or HTMLElement or null
    Default
    null

    The HTML element into which TIFY is mounted. If not set, TIFY is not mounted until mount is called (see docs/api.md).

  • contentStateEnabled

    Type
    boolean
    Default
    false

    If enabled, the manifest URL can be set via the iiif-content URL query parameter, thus supporting the bare minimum of the IIIF Content State API. This query is only evaluated if manifestUrl is not set.

  • fallbackLanguage

    Type
    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

    Type
    object
    Default
    {}

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

  • language

    Type
    string
    Default
    'en'

    The interface language, matching the translation filename without extension. See which translations are available at https://github.com/tify-iiif-viewer/tify/tree/main/dist/translations or add your own.

  • layers

    Type
    Array.<number>
    Default
    []

    Determines the initially displayed layer index (0-based integer) for each visible page with multiple layers. This option is ignored for pages with only one layer or if the layer index does not exist.

  • manifestUrl

    Type
    string or null
    Default
    null

    The URL of the IIIF manifest to load.

  • optionsResetOnPageChange

    Type
    Array.<string>
    Default
    ['pan']

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

  • pageLabelFormat

    Type
    string
    Default
    'P&nbsp;· L'

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

  • pages

    Type
    Array.<number> or null
    Default
    null

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

  • pan

    Type
    object
    Default
    {}

    Sets the initial pan. The object has two optional properties x and yboth 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.

  • preferredImageFormat

    Type
    string or null
    Default
    null

    Sets the preferred IIIF image format by file extension. If the image format is null or if the set format is not supported, it is determined by the IIIF Image API, which usually defaults to jpg. Possible formats are avif (not in the IIIF spec yet, but supported by some servers)gif, jpg, png and webp. Some IIIF Image APIs advertise image formats without actually being able to provide them, so this should only be used when you have control over all loaded manifests.

  • rotation

    Type
    number or null
    Default
    null

    The initial rotation of the image in degrees. Should be a multiple of 90.

  • translationsDirUrl

    Type
    string or null
    Default
    null

    The URL of the directory where TIFY finds its translations, without a trailing /. If not set, TIFY tries to determine this URL automatically from its <script> element, but this may not work depending on how TIFY is loaded.

  • urlQueryKey

    Type
    string or null
    Default
    null

    If set, parameters are read from the URL query and any changes are reflected, using the key provided. This works with multiple concurrent instances, but each instance must use a unique key. Note that when urlQueryKey is set, all options defined by urlQueryParams can be overridden by changing the URL in the browser’s address bar. Only use characters A…Z a…z 0…9 - _. While this functionality can be used together with iiif-content (see contentStateEnabled), it does not yet conform to the IIIF Content State API.

  • urlQueryParams

    Type
    Array.<string>
    Default
    ['annotationId', 'annotationsVisible', 'childManifestUrl', 'layers', 'filters', 'pages', 'pan', 'rotation', 'view', 'zoom']

    The parameter keys to be read from and stored in the URL query. Only has effect if urlQueryKey is set, in which case parameters read from the URL override options of the same name.

  • view

    Type
    string or null
    Default
    null

    The initially displayed view (panel); text, thumbnails, toc, infohelp, or null to display (only) the media. On large containers, the media view is always shown next to the selected view.

  • viewer

    Type
    object
    Default
    {}

    An object with options for OpenSeadragon, TIFY’s image rendering component. See the OpenSeadragon documentation for all available options: https://openseadragon.github.io/docs/OpenSeadragon.html#.Options

  • zoom

    Type
    number or null
    Default
    null

    Sets the initial zoom level. The higher the number, the deeper the zoom. By default, zoom is set automatically so that the full image is visible.

Download TIFY 0.34.5

GitHub Repository

Usage examples