IIIF #5 - Updating to convert resource image to TIF files; Updating t…

…o service images via IIIF server

Gemfile

@@ -39,6 +39,9 @@ gem 'controlled_vocabulary', git: 'https://github.com/performant-software/contro
 # Active storage service
 gem 'aws-sdk-s3'
 
+# Image processing
+gem 'mini_magick', '~> 4.11'
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem 'debug', platforms: %i[ mri mingw x64_mingw ]

Gemfile.lock

@@ -132,6 +132,7 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
     method_source (1.0.0)
+    mini_magick (4.11.0)
     mini_mime (1.1.2)
     mini_portile2 (2.8.0)
     minitest (5.15.0)
@@ -218,6 +219,7 @@ DEPENDENCIES
   debug
   dotenv-rails
   jwt
+  mini_magick (~> 4.11)
   pagy (~> 5.10)
   pg
   puma (~> 5.0)

app/models/concerns/attachable.rb

@@ -64,7 +64,7 @@ def generate_url_method(name)
         attachment = self.send(name)
         return nil unless attachment.attached?
 
-        url_for(attachment)
+        "#{ENV['IIIF_HOST']}/iiif/3/#{attachment.key}/full/500,/0/default.jpg"
       end
 
       define_method("#{name}_download_url") do
@@ -73,6 +73,13 @@ def generate_url_method(name)
 
         attachment.service_url({ disposition: 'attachment' })
       end
+
+      define_method("#{name}_thumbnail_url") do
+        attachment = self.send(name)
+        return nil unless attachment.attached?
+
+        "#{ENV['IIIF_HOST']}/iiif/3/#{attachment.key}/square/250,250/0/default.jpg"
+      end
     end
 
     def attachment_preloads

app/models/resource.rb

@@ -8,6 +8,37 @@ class Resource < ApplicationRecord
   # Resourceable parameters
   allow_params :project_id, :name, :metadata, :content
 
+  # Callbacks
+  after_create_commit :convert_to_tif
+
   # ActiveStorage
   has_one_attached :content
+
+  private
+
+  def convert_to_tif
+    return unless content.attached? && content.image?
+
+    content.open do |file|
+      output_file = "#{File.basename(file.path, '.*')}.tif"
+      output_path = File.join(File.dirname(file.path), output_file)
+
+      convert = MiniMagick::Tool::Convert.new
+      convert << file.path
+      convert << '-define'
+      convert << 'tiff:tile-geometry=1024x1024'
+      convert << '-depth'
+      convert << '8'
+      convert << '-compress'
+      convert << 'jpeg'
+      convert << "ptif:#{output_path}"
+      convert.call
+
+      content.attach(
+        io: File.open(output_path),
+        filename:  output_file,
+        content_type: 'image/tiff'
+      )
+    end
+  end
 end

app/serializers/projects_serializer.rb

@@ -1,4 +1,4 @@
 class ProjectsSerializer < BaseSerializer
-  index_attributes :id, :uid, :name, :description, :avatar_url, :organization_id, organization: OrganizationsSerializer
+  index_attributes :id, :uid, :name, :description, :avatar_url, :avatar_thumbnail_url, :organization_id, organization: OrganizationsSerializer
   show_attributes :id, :uid, :name, :description, :api_key, :avatar_url, :organization_id, organization: OrganizationsSerializer
 end

app/serializers/resources_serializer.rb

@@ -1,4 +1,4 @@
 class ResourcesSerializer < BaseSerializer
-  index_attributes :id, :name, :metadata, :exif, :project_id, :content_url
+  index_attributes :id, :name, :metadata, :exif, :project_id, :content_url, :content_thumbnail_url
   show_attributes :id, :name, :metadata, :exif, :project_id, :content_url
 end

app/serializers/users_serializer.rb

@@ -1,4 +1,4 @@
 class UsersSerializer < BaseSerializer
-  index_attributes :id, :name, :email, :admin, :avatar_url
+  index_attributes :id, :name, :email, :admin, :avatar_url, :avatar_thumbnail_url
   show_attributes :id, :name, :email, :admin, :avatar_url, user_organizations: [:id, :organization_id, organization: OrganizationsSerializer]
 end

client/src/pages/Projects.js

@@ -25,7 +25,7 @@ const Projects: ComponentType<any> = () => {
       onDelete={(project) => ProjectsService.delete(project)}
       renderDescription={(project) => project.description}
       renderHeader={(project) => project.name}
-      renderImage={(project) => <LazyImage src={project.avatar_url} />}
+      renderImage={(project) => <LazyImage dimmable={false} src={project.avatar_thumbnail_url} />}
       renderMeta={(project) => project.organization && project.organization.name}
     />
   );

client/src/pages/Resources.js

@@ -61,7 +61,7 @@ const Resources: ComponentType<any> = () => {
       onDelete={(resource) => ResourcesService.delete(resource)}
       perPageOptions={[10, 25, 50, 100]}
       renderHeader={(resource) => resource.name}
-      renderImage={(resource) => <LazyImage src={resource.content_url} />}
+      renderImage={(resource) => <LazyImage dimmable={false} src={resource.content_thumbnail_url} />}
       renderMeta={() => ''}
       renderDescription={() => <div>Test</div>}
       saved={location.state && location.state.saved}

client/src/pages/Users.js

@@ -25,7 +25,7 @@ const Users: ComponentType<any> = withTranslation()(() => {
       onLoad={(params) => UsersService.fetchAll(params)}
       onDelete={(user) => UsersService.delete(user)}
       renderHeader={(user) => user.name}
-      renderImage={(user) => <LazyImage src={user.avatar_url} />}
+      renderImage={(user) => <LazyImage dimmable={false} src={user.avatar_thumbnail_url} />}
       renderMeta={(user) => user.email}
     />
   );

client/src/types/Project.js

@@ -9,5 +9,8 @@ export type Project = {
   description: string,
   api_key: string,
   organization_id: number,
-  organization: Organization
+  organization: Organization,
+  avatar_url: string,
+  avatar_download_url: string,
+  avatar_thumbnail_url: string
 };

client/src/types/Resource.js

@@ -6,6 +6,8 @@ export type Resource = {
   id: number,
   name: string,
   content_url: string,
+  content_download_url: string,
+  content_thumbnail_url: string,
   exif: any,
   metadata: any,
   project_id: number,

client/src/types/User.js

@@ -8,5 +8,8 @@ export type User = {
   email: string,
   password: string,
   password_confirmation: string,
+  avatar_url: string,
+  avatar_download_url: string,
+  avatar_thumbnail_url: string,
   user_organizations: Array<UserOrganization>
 };