diff --git a/app/assets/images/static/ucla_iiif_crop-tool.png b/app/assets/images/static/ucla_iiif_crop-tool.png new file mode 100644 index 000000000..11c265380 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_crop-tool.png differ diff --git a/app/assets/images/static/ucla_iiif_detektiiif.jpg b/app/assets/images/static/ucla_iiif_detektiiif.jpg new file mode 100644 index 000000000..1da0ccffb Binary files /dev/null and b/app/assets/images/static/ucla_iiif_detektiiif.jpg differ diff --git a/app/assets/images/static/ucla_iiif_download-images.png b/app/assets/images/static/ucla_iiif_download-images.png index a81174846..3d86670b7 100644 Binary files a/app/assets/images/static/ucla_iiif_download-images.png and b/app/assets/images/static/ucla_iiif_download-images.png differ diff --git a/app/assets/images/static/ucla_iiif_full-screen.png b/app/assets/images/static/ucla_iiif_full-screen.png deleted file mode 100644 index 0ae7861fd..000000000 Binary files a/app/assets/images/static/ucla_iiif_full-screen.png and /dev/null differ diff --git a/app/assets/images/static/ucla_iiif_grayscale-image.png b/app/assets/images/static/ucla_iiif_grayscale-image.png new file mode 100644 index 000000000..1e0658edf Binary files /dev/null and b/app/assets/images/static/ucla_iiif_grayscale-image.png differ diff --git a/app/assets/images/static/ucla_iiif_image-20230921-185339.png b/app/assets/images/static/ucla_iiif_image-20230921-185339.png new file mode 100644 index 000000000..c0bfa2a78 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_image-20230921-185339.png differ diff --git a/app/assets/images/static/ucla_iiif_image-region.gif b/app/assets/images/static/ucla_iiif_image-region.gif new file mode 100644 index 000000000..20c9a8721 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_image-region.gif differ diff --git a/app/assets/images/static/ucla_iiif_manifest-explorer.png b/app/assets/images/static/ucla_iiif_manifest-explorer.png new file mode 100644 index 000000000..18abcddc6 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_manifest-explorer.png differ diff --git a/app/assets/images/static/ucla_iiif_manifest-properties.png b/app/assets/images/static/ucla_iiif_manifest-properties.png new file mode 100644 index 000000000..dee11f563 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_manifest-properties.png differ diff --git a/app/assets/images/static/ucla_iiif_manifest-url.png b/app/assets/images/static/ucla_iiif_manifest-url.png index 97a10c4ef..0f1a41657 100644 Binary files a/app/assets/images/static/ucla_iiif_manifest-url.png and b/app/assets/images/static/ucla_iiif_manifest-url.png differ diff --git a/app/assets/images/static/ucla_iiif_rotated-image.png b/app/assets/images/static/ucla_iiif_rotated-image.png new file mode 100644 index 000000000..5d5076ee6 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_rotated-image.png differ diff --git a/app/assets/images/static/ucla_iiif_navigation.gif b/app/assets/images/static/ucla_iiif_uv-contents.gif similarity index 75% rename from app/assets/images/static/ucla_iiif_navigation.gif rename to app/assets/images/static/ucla_iiif_uv-contents.gif index e9c4d6f52..d6afb9750 100644 Binary files a/app/assets/images/static/ucla_iiif_navigation.gif and b/app/assets/images/static/ucla_iiif_uv-contents.gif differ diff --git a/app/assets/images/static/ucla_iiif_uv-download.png b/app/assets/images/static/ucla_iiif_uv-download.png new file mode 100644 index 000000000..3d86670b7 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_uv-download.png differ diff --git a/app/assets/images/static/ucla_iiif_uv-fullscreen.png b/app/assets/images/static/ucla_iiif_uv-fullscreen.png new file mode 100644 index 000000000..f75eed732 Binary files /dev/null and b/app/assets/images/static/ucla_iiif_uv-fullscreen.png differ diff --git a/app/assets/images/static/ucla_iiif_view-mode.gif b/app/assets/images/static/ucla_iiif_uv-views.gif similarity index 73% rename from app/assets/images/static/ucla_iiif_view-mode.gif rename to app/assets/images/static/ucla_iiif_uv-views.gif index 7dbd420db..c5391288e 100644 Binary files a/app/assets/images/static/ucla_iiif_view-mode.gif and b/app/assets/images/static/ucla_iiif_uv-views.gif differ diff --git a/app/assets/images/static/ucla_iiif_uv-zoom.gif b/app/assets/images/static/ucla_iiif_uv-zoom.gif new file mode 100644 index 000000000..df5dffdcc Binary files /dev/null and b/app/assets/images/static/ucla_iiif_uv-zoom.gif differ diff --git a/app/assets/images/static/ucla_iiif_zoom-rotate.gif b/app/assets/images/static/ucla_iiif_zoom-rotate.gif deleted file mode 100644 index 8b32d72e0..000000000 Binary files a/app/assets/images/static/ucla_iiif_zoom-rotate.gif and /dev/null differ diff --git a/app/assets/stylesheets/base/templates/_static-page.scss b/app/assets/stylesheets/base/templates/_static-page.scss index 272fddde6..e243a27c2 100644 --- a/app/assets/stylesheets/base/templates/_static-page.scss +++ b/app/assets/stylesheets/base/templates/_static-page.scss @@ -1,16 +1,37 @@ -.static-page__row--ursus { +.static-page__row { @extend .row; + + padding: 1.5rem 0; } -.static-page__subtitle--ursus { +.static-page__subtitle { @extend .col-lg-4; + + font-size: $text-20; + letter-spacing: 0.15rem; + + @media (max-width: 991px) { + margin-bottom: 1rem; + } } -.static-page__text--ursus { +.static-page__text { @extend .col-lg-8; + + margin-bottom: 1rem; + font-size: $text-18; + line-height: 2; + + @media (max-width: 991px) { + font-size: $text-16; + } } -.static-page__list--ursus { +.static-page__list { + margin: 2rem; + font-size: $text-18; + line-height: 2; + @media (max-width: 991px) { font-size: $text-16; } @@ -38,29 +59,6 @@ } } -.static-page__row { - padding: 1.5rem 0; -} - -.static-page__subtitle { - font-size: $text-20; - letter-spacing: 0.15rem; - - @media (max-width: 991px) { - margin-bottom: 1rem; - } -} - -.static-page__text { - margin-bottom: 1rem; - font-size: $text-18; - line-height: 2; - - @media (max-width: 991px) { - font-size: $text-16; - } -} - .static_page__paragraph { margin: 2rem 0; font-size: $text-18; @@ -96,13 +94,6 @@ font-size: $text-14; } -.static-page__list { - margin: 15px 50px 25px 25px; - padding-left: 24px; - font-size: $text-18; - line-height: 2; -} - .static-page__steps { border: 1px solid $ucla-darker-blue; border-radius: 5px; @@ -116,3 +107,13 @@ .static-page__image { width: 80%; } + +.static-page__iiif-guide_code { + font-size: $text-16; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', monospace; + overflow-wrap: break-word; + + @media (max-width: 991px) { + font-size: 11px; + } +} diff --git a/app/assets/stylesheets/theme_ursus/pages/_ur-static-page.scss b/app/assets/stylesheets/theme_ursus/pages/_ur-static-page.scss index 58da1d390..d1b83809a 100644 --- a/app/assets/stylesheets/theme_ursus/pages/_ur-static-page.scss +++ b/app/assets/stylesheets/theme_ursus/pages/_ur-static-page.scss @@ -1,106 +1,141 @@ -.static-page__row--ursus { - @extend .row; +.content-container--static-page--ursus { + margin: 0 6rem; + + @media (max-width: 991px) { + margin: 0; + } } .static-page__subtitle--ursus { - @extend .col-lg-4; -} + font-size: $text-20; + letter-spacing: 0.15rem; -.static-page__text--ursus { - @extend .col-lg-8; + @media (max-width: 991px) { + margin-bottom: 1rem; + } } .static-page__list--ursus { + font-size: 1.1rem; + line-height: 1.5em; @media (max-width: 991px) { font-size: $text-16; } } -.content-container--static-page { - padding-bottom: 4rem; -} - -.static-page__title-row { - display: inline-block; - margin-bottom: 1.5rem; +.static-page__title--ursus { + font-size: $text-36; + font-weight: $font-bold; @media (max-width: 767px) { - margin-bottom: 1rem; + font-size: calc(80% + 0.875rem); } } -.static-page__title { - font-size: $text-36; - font-weight: $font-bold; +.static-page__hr_margins--ursus { + margin-top: 3rem; + margin-bottom: 3rem; +} - @media (max-width: 767px) { - font-size: calc(100% + 0.875rem); - } +.static-page_steps-container--ursus { + width: 100%; } -.static-page__row { - padding: 1.5rem 0; +.static-page__steps--ursus { + margin: 1.3rem -1rem 1.3rem 0.5rem; + padding: 0; + font-size: 1.1rem; + line-height: 1.5em; + + @media (max-width: 991px) { + margin: 1.3rem; + } } -.static-page__subtitle { - font-size: $text-20; - letter-spacing: 0.15rem; +.static-page__image--ursus { + margin-top: -0.5rem; + margin-left: 50px; + width: 50%; @media (max-width: 991px) { - margin-bottom: 1rem; + width: 80%; } } -.static-page__text { - margin-bottom: 1rem; - font-size: $text-18; - line-height: 2; +.static-page__image_manifest_code--ursus { + width: 80%; +} + +.static-page_fig-caption--ursus { + margin-left: 60px; + width: 50%; @media (max-width: 991px) { - font-size: $text-16; + width: 79%; } } -.static_page__paragraph { - margin: 2rem 0; - font-size: $text-18; - line-height: 2; +.static-page__responsive-iframe-container--ursus { + position: relative; + overflow: hidden; + padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ + width: 100%; - @media { - font-size: $text-16; + @media (max-width: 767px) { + margin-left: 20px; + width: 90%; + height: 600px; } } -.static-page__list { - padding-left: 24px; - font-size: $text-18; +.static-page__responsive-iframe--ursus { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + height: 100%; } -.static-page__italic { - font-style: italic; +.static-page__image_find--ursus { + width: 40%; } -.static-page__bold { - font-weight: bold; +.static-page__iiif-guide_p { + margin: 1.5rem; + font-size: 1.1rem; + line-height: 1.5em; } -.static-page__top_bottom_margin { - margin: 2rem 0; +.static-page__iiif-guide_code_blue--ursus { + color: #00f; } -.static-page__bottom_margin { - margin-bottom: 50px; +.static-page__iiif-guide_code_red--ursus { + color: #f00; } -.static-page__hr_margins { - margin: 75px 0; +.static-page__iiif-guide_code_blueviolet--ursus { + color: #8a2be2; } -.static-page__iiif-guide_p { - line-height: 1.7; - margin: 1rem; +.static-page__iiif-guide_code_forestgreen--ursus { + color: #228b22; +} + +.static-page__iiif-guide_code_goldenrod--ursus { + color: #daa520; +} + +.static-page__iiif-guide_code_hotpink--ursus { + color: #ff69b4; +} + +.static-page__iiif-guide_code_coral--ursus { + color: #ff7f50; } -.static-page__subtitle--iiif-guide { - @extend .col-lg-8; +.static-page__iiif-guide_code_dodgerblue--ursus { + color: #1e90ff; } diff --git a/app/views/static/ursus_about.html.erb b/app/views/static/ursus_about.html.erb index e723fc583..0902477ad 100644 --- a/app/views/static/ursus_about.html.erb +++ b/app/views/static/ursus_about.html.erb @@ -4,8 +4,8 @@ -
-
+
+
<%= t('static_pages.about.mission').upcase %>
diff --git a/app/views/static/ursus_contact.html.erb b/app/views/static/ursus_contact.html.erb index b103e6e2f..0a2666623 100644 --- a/app/views/static/ursus_contact.html.erb +++ b/app/views/static/ursus_contact.html.erb @@ -3,8 +3,8 @@

<%= t('static_pages.contact.page_title') %>

-
-
+
+
<%= t('static_pages.contact.collection_inquires').upcase %>
@@ -14,8 +14,8 @@
-
-
+
+
<%= t('static_pages.contact.special_collections').upcase %>
@@ -25,8 +25,8 @@
-
-
+
+
<%= t('static_pages.contact.not_working').upcase %>
diff --git a/app/views/static/ursus_copyright.html.erb b/app/views/static/ursus_copyright.html.erb index 51150cee5..7c91f2603 100644 --- a/app/views/static/ursus_copyright.html.erb +++ b/app/views/static/ursus_copyright.html.erb @@ -3,17 +3,17 @@

<%= t('static_pages.copyright_and_collections.page_title') %>

-
-
+
+
<%= t('static_pages.copyright_and_collections.permission_to_publish').upcase %>
- The UCLA Digital Library does not handle requests for reproductions or permissions to publish. All requests for reproductions or permissions to publish should be directed to the item's holding repository. In most cases, the owning repository is the UCLA Library Special Collections unit. Users can find information on requesting reproductions, as well as the "Request to Publish Form" on the "Special Collections Reproductions" page, or you can email askLSC@library.ucla.edu. + The UCLA Digital Library does not handle requests for reproductions or permissions to publish. All requests for reproductions or permissions to publish should be directed to the item's holding repository. In most cases, the owning repository is the UCLA Library Special Collections unit. Users can find information on requesting reproductions, as well as the "Request to Publish Form" on the "Special Collections Reproductions" page, or you can email askLSC@library.ucla.edu.
-
-
+
+
<%= t('static_pages.copyright_and_collections.copyright_statement').upcase %>
@@ -21,8 +21,8 @@
-
-
+
+
<%= t('static_pages.copyright_and_collections.opt_out_procedure').upcase %>
@@ -31,3 +31,4 @@ If your material has been included in our digital collections, you can request that we limit its public access. We ask that you consider this option very carefully. Should you decide that your content should be removed from our pages, we will continue to preserve it. For more information, contact: copyright@library.ucla.edu.
+
diff --git a/app/views/static/ursus_iiif_guide.html.erb b/app/views/static/ursus_iiif_guide.html.erb index 8683df78a..ff3fadd6b 100644 --- a/app/views/static/ursus_iiif_guide.html.erb +++ b/app/views/static/ursus_iiif_guide.html.erb @@ -1,6 +1,6 @@ -
+
-

<%= t('static_pages.iiif_guide.page_title') %>

+

<%= t('static_pages.iiif_guide.page_title') %>

The UCLA Digital Library Program preserves and provides access to local and global cultural heritage materials to support teaching, research, and expanded use of these materials. Central to this mission is our commitment to inclusive digital collections that encourage participation from researchers, students, and communities to make new connections and discoveries and to reshape historical narratives around them. To this end, we adopt and develop technologies that promote and enable sharing, reusing, and reframing the digital collections content that we steward. One such technology, and the focus of this guide, is the International Image Interoperability Framework (IIIF).

@@ -19,142 +19,260 @@

Note: Copyright laws may apply to materials within our collections, so remember to consult the UCLA Library copyright policies when reusing images.

-
+
-
-
- <%= t('static_pages.iiif_guide.viewing_experience').upcase %> -
+ <%# A Rich Viewing Experience %> +
+

<%= t('static_pages.iiif_guide.viewing_experience').upcase %>

+
+ +

+ The UCLA Library Digital Collections uses Universal Viewer (UV) for displaying images and playing streaming audio and video. Universal Viewer is a IIIF-compliant viewer which supports deep zoom of high-resolution images and allows you to pan, zoom, or rotate images, as well as navigate paginated resources, such as books, manuscripts, or pamphlets. +

+ + <%# Zoom and Rotate %> +

Zoom, pan, and rotate: Zoom and rotate buttons are located in the top left of the viewer. You can zoom in (+) or out (-) and rotate the image (⟳) in 90-degree increments. If you zoom in closer than 100%, you can click in the viewing area and use your cursor to move the image and pan horizontally and vertically.

+ +
+ <%= image_tag 'static/ucla_iiif_uv-zoom.gif', alt: 'A GIF demonstrating the zoom, rotate, and pan functions on a page image from an autograph album', class: "static-page__image static-page__image--ursus" %>
Autograph album no. 4, from Five autograph albums belonging to nurse E.F. Raynes Plante and signed by soldiers recuperating at the Red Cross Hospital at 6 Third Avenue, Hove, Sussex, England, 1914-1943, bulk 1914-1918, UCLA Library Digital Collections.
+
+ + <%# Viewing Mode %> +

Viewing mode: The view mode icons in the upper right-hand corner of the viewer allow you to toggle between viewing modes: a single image, a book view with facing pages (for paginated items), or a gallery view (when there are multiple images).

+ + <%= image_tag 'static/ucla_iiif_uv-views.gif', alt: 'A GIF demonstrating the different view modes.', class: "static-page__image static-page__image--ursus" %> + + <%# Navigation of Paginated Objects %> +

Navigation of paginated objects: The Contents panel (on the left side of the viewer) displays thumbnail images of each image in sequence. You can browse the thumbnails to select specific pages of a resource. You can minimize the Contents panel using the double arrow (<<) on the panel’s top right side. The page navigation icons located in the center of the top bar of the viewer also allow you to page through an item, jump to the first or last image, or choose a specific image in the sequence.

+ + <%= image_tag 'static/ucla_iiif_uv-contents.gif', alt: 'A GIF demonstrating navigation of autograph album pages via thumbnail images in the UV “Contents” panel.', class: "static-page__image static-page__image--ursus" %> + + <%# Full Screen %> +

Full screen: Clicking on the frame icon in the lower right-hand corner will pop the viewer out of the webpage for a full screen viewing experience.

+ + <%= image_tag 'static/ucla_iiif_uv-fullscreen.png', alt: 'Screenshot of an album displayed on Universal Viewer frame icon circled in red on the lower righhand corner of the screen.', class: "static-page__image static-page__image--ursus" %> + + <%# Download Images %> +

Download images: The download icon in the lower left-hand corner gives you the option to download the image displayed in the main viewing area. After clicking on the download icon, a white download menu will appear. Click on the “Download” button to open the image in a new tab in your web browser. You can then download the image using your browser’s Save command. The URL for the image can also be copied and used in new contexts, which is covered in the “Reusing IIIF Images” section below.

+ <%= image_tag 'static/ucla_iiif_download-images.png', alt: 'Left screenshot displays an album page displayed on Universal Viewer with the download icon circled in red at the bottom left of the screen. Right screenshot displays the download menu that appears after clicking on the icon.', class: "static-page__image static-page__image--ursus" %> + +
+ + <%# Compare images %> +
+

<%= t('static_pages.iiif_guide.compare_images').upcase %>

+
+ +

Since IIIF content is interoperable and portable, you can easily compare images from different collections, or even from different institutions, by importing images into a IIIF-enabled viewer that supports comparison, such as the web-based Mirador viewer.

+ +

In order to import IIIF resources into other IIIF-enabled viewers or tools, you’ll need the item’s IIIF Manifest. A IIIF Manifest is a JSON-formatted document that contains all the information about the image (or images in the case of paginated objects) along with information on how the image(s) should be presented inside a viewer. Luckily, you do not need to be able to read or understand a IIIF Manifest to make use of it! Each IIIF Manifest represents a discrete resource, such as a photograph or a newspaper issue with multiple pages.

+ +

To use the IIIF Manifest, you first need to locate the IIIF Manifest URL for the resources that you wish to compare. For resources in the UCLA Library Digital Collections portal, you will find the IIIF Manifest URL in the “Find this Item” section of the resource’s item page.

+ + <%= image_tag 'static/ucla_iiif_manifest-url.png', alt: 'Screenshot of the - Find This Item - section from the item record for the mural Our People.', class: "static-page__image static-page__image--ursus static-page__image_find--ursus" %> + +

To copy the IIIF Manifest URL, right click the IIIF logo <%= image_tag 'static/ucla_iiif_logo.png', alt: 'iiif logo icon', width: '20px', style: 'display:inline' %> and select “Copy Link.” Clicking on the IIIF logo will open the IIIF Manifest in a new tab in your browser.

+ +

A IIIF Manifest URL from our collections will look something like this: https://ingest.iiif.library.ucla.edu/ark%3A%2F21198%2Fzz0025q3sx/manifest

+ +

Once you have your IIIF Manifest URLs, you can import the IIIF-enabled content to Mirador or other IIIF-friendly viewers and tools. Try it out with UCLA Library’s Mirador viewer following these steps:

+ +
+
    +
  • + Step 1: Open the UCLA Library Mirador viewer. Copy the IIIF Manifest URL for one of the resources that you would like to compare, for example the mural "Our People" from the Nancy Tovar Murals of East LA Collection. +
    • + +
  • + Step 2: Click on the blue " + Start Here " button in the top left corner. +
    • + +
  • + Step 3: Click on the blue " + Add Resource " button at the bottom right corner of the page and paste the IIIF Manifest URL into the text box. Click "Add." The item should now appear in the list of available IIIF resources. Click on the resource you just added to open it in Mirador. +
    • + +
  • <%= image_tag 'static/ucla_iiif_import-manifest.gif', alt: 'A GIF demonstrating how to import a IIIF Manifest into Mirador.', class: 'static-page__image static-page__image--ursus' %>
    • + +
  • + Step 4: Copy the IIIF Manifest URL for the second resource that you would like to compare, for example a the mural "Untitled" by El Congreso de Artistas Cosmicos de las Americas de San Diego from the same collection. Select the blue " + " button in the top left corner. Click the " + Add Resource " button to import this IIIF resource. You can add more items to the list of resources and compare multiple images side-by-side in the Mirador viewer. +
    • + +
  • <%= image_tag 'static/ucla_iiif_open-2-images.gif', alt: 'A GIF demonstrating how to open two different images in the Mirador viewer.', class: 'static-page__image static-page__image--ursus' %>
    • +
+
+ +
+ + <%# Discover and Collect %> +
+

<%= t('static_pages.iiif_guide.discover_and_collect').upcase %>

+
+ +

There is no unified search for IIIF resources, but many institutions across the globe have guides for finding IIIF resources within their digital collections. For a list of these resources, visit the IIIF’s Guides to finding IIIF resources page.

+ +

detektIIIF is a browser extension for Chrome and Firefox that detects IIIF resources (manifests, images, and collections) in websites. It allows you to collect IIIF manifests in a basket and send them to any compatible IIIF application.

+ + <%= image_tag 'static/ucla_iiif_detektiiif.jpg', alt: 'Screenshot of detekt iiif selecting a basket', class: "static-page__image static-page__image--ursus" %> + +
+ + <%# Build your own digital exhibit %> +
+

<%= t('static_pages.iiif_guide.build_your_own').upcase %>

+
+ +

With IIIF Manifests, you can also build your own digital exhibits using items from the UCLA Library Digital Collections. Exhibits can be used to create a narrative around digital resources, recontextualize items in the collections, or highlight a particular history or experience using primary sources from one or more institutional digital collections. Thanks to the efforts of the IIIF community, there are a number of IIIF-friendly tools that allow you to create exhibits using IIIF, such as Wax, Exhibit.so, Storiiies, and Collection Builder.

+ +

Exhibit.so, a browser-based IIIF storytelling application, allows you to build exhibits using IIIF Manifests with just a few clicks. Exhibits made with Exhibit.so can be shared via a URL or can be embedded into any web page using HTML. See the exhibit “Eadweard Muybridge's Animal Locomotion.” To create your own exhibit, follow the Exhibit.so’s Creating an Exhibit guide.

-

The UCLA Library Digital Collections uses Universal Viewer (UV) for displaying images and playing streaming audio and video. Universal Viewer is a IIIF-compliant viewer which supports deep zoom of high-resolution images and allows you to pan, zoom, or rotate images, as well as navigate paginated resources, such as books, manuscripts, or pamphlets.

+
+ +
+ +
-

Zoom, pan, and rotate: Zoom and rotate buttons are located in the top left of the viewer. You can zoom in (+) or out (-) and rotate the image (⟳) in 90-degree increments. If you zoom in closer than 100%, you can click in the viewing area and use your cursor to move the image and pan horizontally and vertically.

- <%= image_tag 'static/ucla_iiif_zoom-rotate.gif', alt: 'A GIF demonstrating the zoom, rotate, and pan functions on a page image from an autograph album', class: "static-page__image" %> + <%# Annotate images %> +
+

<%= t('static_pages.iiif_guide.annotate_images').upcase %>

+
- <%#= Viewing Mode %> -

Viewing mode: The view mode icons in the upper right-hand corner of the viewer allow you to toggle between viewing modes: a single image, a book view with facing pages (for paginated items), or a gallery view (when there are multiple images).

- <%= image_tag 'static/ucla_iiif_view-mode.gif', alt: 'A GIF demonstrating the different view modes.', class: "static-page__image" %> +

IIIF also supports web annotation of images using the W3C Web Annotation Model. Annotating images requires connecting a dedicated annotation server to a viewing interface, however there are a few IIIF-friendly tools that support annotation through a built-in annotation environment, such as Annonatate or Recogito. The Mirador viewer has an Annotation plugin, which does require a dedicated annotation server to store annotations, but you can try out the annotation feature using the Mirador Annotations demo. Try importing a resource into the Annotations demo using a IIIF Manifest URL and annotate some images using the annotation tools provided.

- <%#= Navigation of Paginated Objects %> -

Navigation of paginated objects: The Contents panel (on the left side of the viewer) displays thumbnail images of each image in sequence. You can browse the thumbnails to select specific pages of a resource. You can minimize the Contents panel using the double arrow (<<) on the panel’s top right side. The page navigation icons located in the center of the top bar of the viewer also allow you to page through an item, jump to the first or last image, or choose a specific image in the sequence.

- <%= image_tag 'static/ucla_iiif_navigation.gif', alt: 'A GIF demonstrating navigation of autograph album pages via thumbnail images in the UV “Contents” panel.', class: "static-page__image" %> + <%= image_tag 'static/ucla_iiif_annotation.png', alt: 'Screenshot of an annotation on Vincent Van Gogh’s self-portrait in the Mirador viewer.', class: 'static-page__image static-page__image--ursus' %> - <%#= Full Screen %> -

Full screen: Clicking on the frame icon in the lower right-hand corner will pop the viewer out of the webpage for a full screen viewing experience.

- <%= image_tag 'static/ucla_iiif_full-screen.png', alt: 'Screenshot of an album displayed on Universal Viewer frame icon circled in red.', class: "static-page__image" %> +
- <%#= Download Images %> -

Download images: The download icon in the lower left-hand corner gives you the option to download the image displayed in the main viewing area. After clicking on the download icon, a white download menu will appear. Click on the “Download” button to open the image in a new tab in your web browser. You can then download the image using your browser’s Save command. The URL for the image can also be copied and used in new contexts, which is covered in the “Reusing IIIF Images” section below.

- <%= image_tag 'static/ucla_iiif_download-images.png', alt: 'Left screenshot displays an album page displayed on Universal Viewer with the download icon circled in red. Right screenshot displays the download menu that appears after clicking on the icon.', class: "static-page__image" %> -
+ <%# More IIIF-friendly tools and viewers %> +
+

<%= t('static_pages.iiif_guide.iiif_friendly').upcase %>

-
+

There are a variety of IIIF-enabled tools that you can use to work with IIIF resources in addition to the tools mentioned above. Listed here are just a few, but you can explore more options through IIIF Awesome’s lists of Image Viewers and Exhibition and Guided Viewing Tools, or on the IIIF website’s “Resources for end users”.

+ +
    +
  • Tranksribus is a comprehensive platform for the digitisation, AI-powered text recognition, transcription and searching of historical documents – from any place, any time, and in any language.
    • + +
  • Recogito supports annotation of entities such as people, places, and relationships in text and image documents that can be exported for use in other data applications.
    • + +
  • Storiiies is a web platform for creating digital stories around a single IIIF resource.
    • + +
  • IIIF Curation Viewer is an image viewer compliant with IIIF standards. In addition to zoom and page-view capabilities, it offers a light box feature that allows users to cut and curate parts of images from multiple IIIF objects.
    • +
+ +
+ + <%# Use and transform IIIF Images %> +
+

<%= t('static_pages.iiif_guide.use_and_transform').upcase %>

+
-
-
- <%= t('static_pages.iiif_guide.compare_images').upcase %> -
+

IIIF also supports transformation and embedding of image resources without the use of a IIIF Manifest in a dedicated viewer. A IIIF-enabled image, or even regions of that image, can be embedded in numerous contexts such as web pages, presentation slides, social media, and teaching and learning materials. In this way, you can easily share curated and transformed content in new contexts across the web using the IIIF image URL.

-

Since IIIF content is interoperable and portable, you can easily compare images from different collections, or even from different institutions, by importing images into a IIIF-enabled viewer that supports comparison, such as the web-based Mirador viewer.

+
-

In order to import IIIF resources into other IIIF-enabled viewers or tools, you’ll need the item’s IIIF Manifest. A IIIF Manifest is a JSON-formatted document that contains all the information about the image (or images in the case of paginated objects) along with information on how the image(s) should be presented inside a viewer. Luckily, you do not need to be able to read or understand a IIIF Manifest to make use of it! Each IIIF Manifest represents a discrete resource, such as a photograph or a newspaper issue with multiple pages.

+ <%# The IIIF image URL %> +
+

<%= t('static_pages.iiif_guide.the_iiif_image_url').upcase %>

+
- <%#= IIIF Manifest URL %> -

To use the IIIF Manifest, you first need to locate the IIIF Manifest URL for the resources that you wish to compare. For resources in the UCLA Library Digital Collections portal, you will find the IIIF Manifest URL in the “Find this Item” section of the resource’s item page.

- <%= image_tag 'static/ucla_iiif_manifest-url.png', alt: 'The “Find This Item” section from the Map of Frankfurt and Its Environs item page.', class: "static-page__image" %> +

Using or transforming a IIIF image resource requires the image’s IIIF image URL. IIIF image URLs are used in IIIF Manifests to reference the image files that make up the IIIF resource represented by the Manifest, such as a photograph or the individual page images of a book. Finding the IIIF image URLs for a resource once required a deeper look within a IIIF Manifest, but now there are tools, such as the detekIIIF browser plugin mentioned above and the Universal Viewer’s download option, that will allow you to find the IIIF image URL for an image in order to embed or transform an image.

-

To copy the IIIF Manifest URL, right click the IIIF logo <%= image_tag 'static/ucla_iiif_logo.png', alt: 'iiif logo icon', width: '20px', style: 'display:inline' %> and select “Copy Link.” Clicking on the IIIF logo will open the IIIF Manifest in a new tab in your browser.

+

IIIF image URLs follow a standard syntax and contain parameters at the end that can be edited to transform an image:
{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

-

A IIIF Manifest URL from our collections will look something like this: https://iiif.library.ucla.edu/ark%3A%2F21198%2Fzz002h6jvn/manifest

+

Here is an example IIIF image URL for a photograph of the political activist and philosopher, Angela Davis:
https://iiif.library.ucla.edu/iiif/2/ark%3A%2F13030%2Fhb300005c2/full/3072,/0/default.jpg

-

Once you have your IIIF Manifest URLs, you can import the IIIF-enabled content to Mirador or other IIIF-friendly viewers and tools. Try it out with UCLA Library’s Mirador viewer following these steps:

+

Let’s take a look at a IIIF image URL in a IIIF Manifest. The IIIF Manifest for the Angela Davis image contains the IIIF image URL in the “resource.@id” property (circled in red).

-
    -
  • - Step 1: Open the UCLA Library Mirador viewer. Copy the IIIF Manifest URL for one of the resources that you would like to compare, for example this mural photograph. -
    • + <%= image_tag 'static/ucla_iiif_manifest-properties.png', alt: 'Screenshot of the IIIF image URL in the resource at id property', class: "static-page__image static-page__image--ursus static-page__image_manifest_code--ursus" %> -
  • - Step 2: Click on the blue " + Start Here " button in the top left corner. -
    • +

    There is a lot of information in a IIIF Manifest, so the image URL can be tricky to find. Tip: Use your browser’s “Find” or “Search page” function (Ctrl + F, etc.) to look for “.jpg” in the Manifest when you are viewing a IIIF Manifest.

    -
  • - Step 3: Click on the blue " + Add Resource " button at the bottom right corner of the page and paste the IIIF Manifest URL into the text box. Click "Add." The item should now appear in the list of available IIIF resources. Click on the resource you just added to open it in Mirador. -
    • +

    Of course, if you are looking at a Manifest with a lot of images, such as for a book with tens or hundreds of page images, it can be difficult to find the IIIF image URL for a specific image. Luckily, the IIIF Community has developed some wonderful tools to help you locate IIIF image URLs easily. The easiest way to find a IIIF image URL in the UCLA Library Digital Collections is to use the “Download” option for the image you would like to use. See the “Download images” section above for details.

    -
  • - Step 4: Copy the IIIF Manifest URL for the second resource that you would like to compare, for example a second mural photograph. Select the blue " + " button in the top left corner. Click the " + Add Resource " button to import this IIIF resource. You can add more items to the list of resources and compare multiple images side-by-side in the Mirador viewer. -
    • -
+

Another useful tool is the IIIF Manifest Explorer by Liz Fischer. This tool will display all of the images from a IIIF Manifest and their corresponding IIIF image URLs as a browsable list. Just input a IIIF Manifest URL to generate the list of images. From the links available, choose the “Direct image URL” option for the IIIF image URL as highlighted in the screenshot below.

-

The images used in this example are from the Nancy Tovar Murals of East L.A. Collection.

+ <%= image_tag 'static/ucla_iiif_manifest-explorer.png', alt: 'Screenshot of the IIIF image URL in the resource at id property', class: 'static-page__image static-page__image--ursus' %> - <%= image_tag 'static/ucla_iiif_import-manifest.gif', alt: 'A GIF demonstrating how to import a IIIF Manifest into Mirador.', class: 'static-page__image static-page__top_bottom_margin' %> +

The detektIIIF browser plugin discussed above is also an easy way to find IIIF images URLs that are present on your current web page.

+

Now that you can find your IIIF image URLs, you are ready to transform your images. Some of the transformations you can achieve using only the IIIF image URL include adjusting the region (cropping), adjusting the size or rotation, and adjusting the image quality.

- <%= image_tag 'static/ucla_iiif_open-2-images.gif', alt: 'A GIF demonstrating how to open two different images in the Mirador viewer.', class: 'static-page__image static-page__top_bottom_margin' %> +
+ <%# Crop images with the IIIF image URL %> +
+

<%= t('static_pages.iiif_guide.crop_images_with_iiif').upcase %>

-
+

IIIF images can be cropped by adjusting the region parameter of a IIIF image URL:
{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

+ +

The default value of a region is “full” – meaning the full image. You can change this value directly in the URL to a specific pixel region defined by x, y, height, and width.

+ + <%= image_tag 'static/ucla_iiif_image-region.gif', alt: '', class: "static-page__image static-page__image--ursus" %> -
-
- <%= t('static_pages.iiif_guide.build_your_own').upcase %> -
+

Guessing at and inputting the pixel dimension for a cropped region isn’t ideal, but you can use tools such as the NCSU Libraries Cropping Tool to crop your images. You will need to provide a IIIF image URL, such as this one from E.F. Raynes Plante Autograph album No. 4, and drag the cropping box to enclose the region you need. The Cropping Tool will generate an updated IIIF image URL that you copy for use in another context. Note that as you change the selected area and zoom in and out, the URL in the left-hand column also changes. If you paste this new URL into your browser, you will see the cropped version of your image.

-

With IIIF Manifests, you can also build your own digital exhibits using items from the UCLA Library Digital Collections. Exhibits can be used to create a narrative around digital resources, recontextualize items in the collections, or highlight a particular history or experience using primary sources from one or more institutional digital collections. Thanks to the efforts of the IIIF community, there are a number of IIIF-friendly tools that allow you to create exhibits using IIIF, such as Wax, Exhibit.so, Storiiies, and Collection Builder.

+ <%= image_tag 'static/ucla_iiif_crop-tool.png', alt: '', class: "static-page__image static-page__image--ursus" %> -

Exhibit.so, a browser-based IIIF storytelling application, allows you to build exhibits using IIIF Manifests with just a few clicks. Exhibits made with Exhibit.so can be shared via a URL or can be embedded into any web page using HTML. See the exhibit “Eadweard Muybridge's Animal Locomotion” by Edward Martin embedded below. To create your own exhibit, follow the Exhibit.so’s Creating an Exhibit guide.

+
- + <%# Resize and rotate images with the IIIF image URL %> +
+

<%= t('static_pages.iiif_guide.resize_and_rotate').upcase %>

-
+

Images can also be resized and rotated by editing the IIIF image URL size and rotation parameters:
{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

+ +

For example:
+https://iiif.library.ucla.edu/iiif/2/ark%3A%2F21198%2Fn12k6g%2F5x359j7r/full/full/0/default.jpg +

-
-
- <%= t('static_pages.iiif_guide.annotate_images').upcase %> -
+
    +
  • +

    When an image is not scaled (resized) the parameter value is “full.” An image can be resized by changing the value in the URL to the desired width (w,) or height (,h) in pixels, for example:

    -

    IIIF also supports web annotation of images using the W3C Web Annotation Model. Annotating images requires connecting a dedicated annotation server to a viewing interface, however there are a few IIIF-friendly tools that support annotation through a built-in annotation environment, such as Annonatate or Recogito. The Mirador viewer has an Annotation plugin, which does require a dedicated annotation server to store annotations, but you can try out the annotation feature using the Mirador Annotations demo. Try importing a resource into the Annotations demo using a IIIF Manifest URL and annotate some images using the annotation tools provided.

    - <%= image_tag 'static/ucla_iiif_annotation.png', alt: 'Screenshot of an annotation on Vincent Van Gogh’s self-portrait in the Mirador viewer.', class: 'static-page__image static-page__top_bottom_margin' %> +

    Setting the exact width of the image to 300 px:
    .../full/300,/0/default.jpg

    + +

    Or setting the exact height of the image to 500 px:
    .../full/,500/0/default.jpg

    + +

    The size can also be expressed as a percentage, for example 50% of the original size:
    .../full/pct:50/0/default.jpg

    + +

    For more information on resizing IIIF images using the URL parameters, see the IIIF Image API Size Parameter documentation.

    + +

    You can rotate the image by changing the rotation value anywhere from 0 to 360 degrees. For example, an image rotated 180 degrees (halfway)::
    .../full/>180/default.jpg

    + +

    For more information on rotating IIIF images using the URL parameters, see the IIIF Image API Rotation Parameter documentation.

    + + <%= image_tag 'static/ucla_iiif_rotated-image.png', alt: 'Screenshot of image shown upsidedown', class: "static-page__image static-page__image--ursus" %> +
    • +
+ +
+ + <%# Adjust the image quality using the IIIF image URL %> +
+

<%= t('static_pages.iiif_guide.adjust_image_quality').upcase %>

-
- -
-
- <%= t('static_pages.iiif_guide.iiif_friendly').upcase %> -
- -

There are a variety of IIIF-enabled tools that you can use to work with IIIF resources in addition to the tools mentioned above. Listed here are just a few, but you can explore more options through IIIF Awesome’s lists of Image Viewers and Exhibition and Guided Viewing Tools, or on the IIIF website’s “Resources for end users”.

- -
    -
  • Tranksribus
    • -
      -
    • “Transkribus is a comprehensive platform for the digitisation, AI-powered text recognition, transcription and searching of historical documents – from any place, any time, and in any language.”
      • -
    - -
  • Recogito
    • -
      -
    • Recogito supports annotation of entities such as people, places, and relationships in text and image documents that can be exported for use in other data applications.
      • -
    - -
  • Storiiies
    • -
      -
    • Storiiies is a web platform for creating digital stories around a single IIIF resource.
      • -
    - -
  • IIIF Curation Viewer
    • -
      -
    • IIIF Curation Viewer is an image viewer compliant with IIIF standards. In addition to zoom and page-view capabilities, it offers a light box feature that allows users to cut and curate parts of images from multiple IIIF objects.
      • -
    -
-
-
- -

- <%= t('static_pages.iiif_guide.contributors').upcase %> -

+

IIIF also allows you to change the image “quality” using the IIIF image parameters. The quality parameter determines whether the image is delivered in color, grayscale, or black and white. For example, to render a color image in black and white, change the quality parameter from “default” or “color” to “bitonal”. Note that images originally in greyscale and black and white cannot be rendered in color.
https://iiif.library.ucla.edu/iiif/2/ark%3A%2F21198%2Fn12k6g%2F5x359j7r/full/full/0/bitonal.jpg

+ +

To generate an image in grayscale, set the parameter to “gray”:
https://iiif.library.ucla.edu/iiif/2/ark%3A%2F21198%2Fn12k6g%2F5x359j7r/full/full/0/gray.jpg

+ + <%= image_tag 'static/ucla_iiif_grayscale-image.png', alt: 'Screenshot of image shown in grayscale', class: "static-page__image static-page__image--ursus" %> + +

If you want to experiment with adjusting the IIIF image URL parameters, try the IIIF Image API Playground.

+ +
+ + <%# Embed images in new contexts %> +
+

<%= t('static_pages.iiif_guide.embed_images').upcase %>

+
+ +

Once you have a IIIF image URL and have transformed it to meet your needs, you can share or embed the resulting image just like you would any other image where you can use a direct image URL. For example:

+ +
    +
  • Add the image to a Google slide using the “Insert image from web” option
    • +
  • Include the image in a web page using the HTML <img> tag
    • +
  • Share the image URL on social media, via email, etc.
    • +
diff --git a/app/views/static/ursus_privacy.html.erb b/app/views/static/ursus_privacy.html.erb index 50defc87e..474819540 100644 --- a/app/views/static/ursus_privacy.html.erb +++ b/app/views/static/ursus_privacy.html.erb @@ -3,8 +3,8 @@

<%= t('static_pages.privacy.page_title') %>

-
-
+
+
<%= t('static_pages.privacy.privacy_statement').upcase %>
diff --git a/config/locales/staticpages.en.yml b/config/locales/staticpages.en.yml index 93fe3da33..4650bc36c 100644 --- a/config/locales/staticpages.en.yml +++ b/config/locales/staticpages.en.yml @@ -1,7 +1,7 @@ ---- -en: - static_pages: - copyright_and_collections: +--- +en: + static_pages: + copyright_and_collections: copyright_statement: 'Copyright' opt_out_procedure: 'Opt-Out Procedure' page_title: 'Copyright and Collections' @@ -26,7 +26,14 @@ en: page_title: 'Using Digital Collections Content with IIIF' viewing_experience: 'A rich viewing experience' compare_images: 'Compare images' + discover_and_collect: 'Discover and collect IIIF resources' build_your_own: 'Build your own digital exhibit' annotate_images: 'Annotate images' iiif_friendly: 'More IIIF-friendly tools and viewers' + use_and_transform: 'Use and transform IIIF Images' + the_iiif_image_url: 'The IIIF image URL' + crop_images_with_iiif: 'Crop images with the IIIF image URL' + resize_and_rotate: 'Resize and rotate images with the IIIF image URL' + adjust_image_quality: 'Adjust the image quality using the IIIF image URL' + embed_images: 'Embed images in new contexts' contributors: 'Contributors: Patricia Ledesma Villon, Syan Lunsford, Julia Tennenbaum, Dawn Childress'