README.md

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.31.0"></script>
      <link rel="stylesheet" href="tify.css?v0.31.0">

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

   • Or use jsDelivr:

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tify.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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

---