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.

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

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.35.0">
    
    <script type="module">
    import Tify from './tify.js?0.35.0'
    
    new Tify({
      container: '#tify',
      manifestUrl: 'https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json',
    })
    </script>

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

• Or use a CDN like jsDelivr or UNPKG:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tify.css">
  
  <script type="module">
  import Tify from 'https://cdn.jsdelivr.net/npm/[email protected]/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 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,
})

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.

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 for TIFY and in src/demo/translation for the demo application. Each language is represented by a JSON file, its name is the language’s ISO 639 alpha-2 code, e.g. de.json for the German translation. Each file consists of a single object of key-value pairs; the key is the original English string, the value is the translated string.

The first key $language denotes the native name (endonym) of the translation’s language.

TIFY uses 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 as defined in src/strings.json.

English keys (but not translated values) may contain translation hints in square brackets, e.g. View [noun] should be treated as a noun, not as a verb.

To add a new language to TIFY and its demo, run

node build/create-translation.js

and follow the prompt.

To check all translations for validity and completeness:

• Lint and report problems: npm run test:i18n
• Lint, report, and update translation files by adding missing keys, removing unused keys, and sorting all entries: npm run test:i18n:fix