arIiifPlugin - IIIF Integration for AtoM

plugins/arIiifPlugin/config/app.yml

@@ -0,0 +1,39 @@
+# arIiifPlugin application configuration
+
+all:
+  # IIIF Image Server Configuration
+  iiif:
+    # Base URL for your IIIF Image Server
+    # Example: https://iiif.example.com/iiif/2
+    base_url: ~
+
+    # IIIF API version (2 or 3)
+    api_version: 2
+
+    # Image server type (cantaloupe, iipimage, loris, etc.)
+    server_type: cantaloupe
+
+    # Enable IIIF Presentation API manifest generation
+    enable_manifests: true
+
+    # Carousel default settings
+    carousel:
+      auto_rotate: true
+      rotate_interval: 5000  # milliseconds
+      show_navigation: true
+      show_thumbnails: false
+      viewer_height: 600     # pixels
+
+    # Viewer settings
+    viewer:
+      enable_zoom: true
+      enable_rotation: true
+      enable_fullscreen: true
+      max_zoom_level: 4
+
+    # Thumbnail settings
+    thumbnail:
+      width: 150
+      height: ~  # null = auto
+      quality: default
+      format: jpg

plugins/arIiifPlugin/config/arIiifPluginConfiguration.class.php

@@ -0,0 +1,83 @@
+<?php
+
+/*
+ * This file is part of the Access to Memory (AtoM) software.
+ *
+ * Access to Memory (AtoM) is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Access to Memory (AtoM) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Access to Memory (AtoM).  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * arIiifPlugin configuration.
+ *
+ * IIIF Image Carousel Plugin for AtoM
+ * Modified by Johan Pieterse The Archive and Heritage Group <johan@theahg.co.za>
+ */
+class arIiifPluginConfiguration extends sfPluginConfiguration
+{
+    // Summary and version
+    public static $summary = 'IIIF Image Carousel and Viewer plugin for AtoM';
+    public static $version = '1.0.0';
+
+    /**
+     * Plugin installation hook.
+     */
+    public function contextLoadFactories()
+    {
+        // Nothing to do here for now
+    }
+
+    /**
+     * Initialize plugin.
+     */
+    public function initialize()
+    {
+        $this->dispatcher->connect('routing.load_configuration', [$this, 'listenToRoutingLoadConfigurationEvent']);
+    }
+
+    /**
+     * Listen to routing.load_configuration event.
+     *
+     * @param sfEvent $event
+     */
+    public function listenToRoutingLoadConfigurationEvent(sfEvent $event)
+    {
+        $routing = $event->getSubject();
+
+        // Load plugin routing rules
+        $routing->prependRoute('iiif_manifest', new sfRoute(
+            '/iiif/:slug/manifest',
+            ['module' => 'iiif', 'action' => 'manifest']
+        ));
+
+        $routing->prependRoute('iiif_object_manifest', new sfRoute(
+            '/iiif/object/:id/manifest',
+            ['module' => 'iiif', 'action' => 'objectManifest']
+        ));
+
+        $routing->prependRoute('iiif_canvas', new sfRoute(
+            '/iiif/:slug/canvas/:canvas',
+            ['module' => 'iiif', 'action' => 'canvas']
+        ));
+    }
+
+    /**
+     * Establish plugin version.
+     *
+     * @return string
+     */
+    public static function getVersion()
+    {
+        return self::$version;
+    }
+}

plugins/arIiifPlugin/config/iiif.yml

@@ -0,0 +1,27 @@
+# arIiifPlugin IIIF Configuration
+# This file is processed by sfDefineEnvironmentConfigHandler
+
+# IIIF Image Server Configuration
+iiif_base_url: ~
+iiif_api_version: 2
+iiif_server_type: cantaloupe
+iiif_enable_manifests: true
+
+# Carousel Settings
+iiif_carousel_auto_rotate: true
+iiif_carousel_rotate_interval: 5000
+iiif_carousel_show_navigation: true
+iiif_carousel_show_thumbnails: false
+iiif_carousel_viewer_height: 600
+
+# Viewer Settings
+iiif_viewer_enable_zoom: true
+iiif_viewer_enable_rotation: true
+iiif_viewer_enable_fullscreen: true
+iiif_viewer_max_zoom_level: 4
+
+# Thumbnail Settings
+iiif_thumbnail_width: 150
+iiif_thumbnail_height: ~
+iiif_thumbnail_quality: default
+iiif_thumbnail_format: jpg

plugins/arIiifPlugin/css/iiif-carousel.css

@@ -0,0 +1,209 @@
+/**
+ * IIIF Image Carousel Styles for AtoM
+ */
+
+.iiif-carousel-wrapper {
+  position: relative;
+  width: 100%;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.iiif-viewer-container {
+  width: 100%;
+  height: 600px;
+  background: #1a1a1a;
+  position: relative;
+}
+
+/* Navigation Controls */
+.iiif-carousel-nav {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 10px 20px;
+  border-radius: 25px;
+  z-index: 1000;
+}
+
+.iiif-nav-btn {
+  background: transparent;
+  border: 2px solid #fff;
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  font-size: 18px;
+}
+
+.iiif-nav-btn:hover {
+  background: #fff;
+  color: #000;
+  transform: scale(1.1);
+}
+
+.iiif-nav-btn:active {
+  transform: scale(0.95);
+}
+
+.iiif-carousel-counter {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.iiif-play-pause {
+  background: transparent;
+  border: 2px solid #fff;
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  font-size: 16px;
+}
+
+.iiif-play-pause:hover {
+  background: #fff;
+  color: #000;
+}
+
+/* Thumbnails */
+.iiif-carousel-thumbnails {
+  display: flex;
+  gap: 10px;
+  padding: 15px;
+  background: #2a2a2a;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.iiif-thumbnail {
+  flex-shrink: 0;
+  width: 120px;
+  height: 80px;
+  cursor: pointer;
+  border: 3px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  opacity: 0.6;
+}
+
+.iiif-thumbnail:hover {
+  opacity: 1;
+  border-color: #4a90e2;
+  transform: scale(1.05);
+}
+
+.iiif-thumbnail.active {
+  opacity: 1;
+  border-color: #fff;
+}
+
+.iiif-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Icon styles (assuming Font Awesome or similar) */
+.icon-left-arrow::before {
+  content: '‹';
+  font-size: 24px;
+}
+
+.icon-right-arrow::before {
+  content: '›';
+  font-size: 24px;
+}
+
+.icon-pause::before {
+  content: '❚❚';
+  font-size: 12px;
+}
+
+.icon-play::before {
+  content: '▶';
+  font-size: 14px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .iiif-viewer-container {
+    height: 400px;
+  }
+
+  .iiif-carousel-nav {
+    bottom: 10px;
+    padding: 8px 15px;
+    gap: 10px;
+  }
+
+  .iiif-nav-btn,
+  .iiif-play-pause {
+    width: 35px;
+    height: 35px;
+    font-size: 16px;
+  }
+
+  .iiif-carousel-counter {
+    font-size: 12px;
+  }
+
+  .iiif-thumbnail {
+    width: 80px;
+    height: 60px;
+  }
+}
+
+@media (max-width: 480px) {
+  .iiif-viewer-container {
+    height: 300px;
+  }
+
+  .iiif-carousel-thumbnails {
+    padding: 10px;
+    gap: 8px;
+  }
+}
+
+/* Loading state */
+.iiif-carousel-wrapper.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  margin: -25px 0 0 -25px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: iiif-spin 1s linear infinite;
+  z-index: 999;
+}
+
+@keyframes iiif-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}