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 documentation.

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:

     <script src="tify.js?v0.32.0"></script>
     <link rel="stylesheet" href="tify.css?v0.32.0">

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

   • Or use jsDelivr:

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

   • 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 id="tify" style="height: 640px"></div>

3. Create a TIFY instance.

   <script>
   new Tify({
     container: '#tify',
     manifestUrl: 'https://example.org/iiif-manifest.json',
   })
   </script>

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.

Configuration

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

See config.js 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,
})

API

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

Build Setup

You need to have Node.js v18.0 or above, npm (usually comes with Node.js) and git installed.

Install dependencies:

npm install

Run in development mode with hot reload and automatic linting:

npm run dev

Build for production with minification:

npm run build

The production build will be stored in dist.

Running Tests

Run unit tests: npm run test:unit

Run end-to-end tests:

• Development build: npm run dev
• Production build: npm run build && npm run test:e2e

Translations

Translations reside in public/translations. Each language is represented by a JSON file, where the file name is the language’s ISO 639 alpha-2 code. Each file consists of a single object of key-value pairs; the key is the original English string, the value is the translation. The first key $language denotes the native name of the translation’s language. There are a few other special keys starting with $; while all other keys are to be translated literally, these keys serve as placeholders for longer sections of text. Search the source files for these keys to reveal their corresponding texts.

To create a new empty translation, run node build/create-translation.js and follow the prompts.

To check all translations for validity and completeness, use npm run test:i18n or npm run test:i18n:fix, the latter adding missing keys, removing unused keys, and sorting keys.