Skip to content

Load all images through IIIF

Jump to bottom
Don Richards edited this page Mar 10, 2023 · 7 revisions

DRAFT

There might be a better approach for this. This is doing logic that is best suited for your THEME_NAME.theme file. This is a work in progress.

Create a new file in your theme that represents the image twig.

Add a new file ../web/themes/contrib/YOUR_THEME/templates/field/image.html.twig

image.html.twig

{#
/**
 * @file
 * Theme override of an image.
 *
 * Available variables:
 * - attributes: HTML attributes for the img tag.
 * - style_name: (optional) The name of the image style applied.
 *
 * - uri: Either the path of the image file (relative to base_path()) or a full URL.
 * - width: The width of the image (if known).
 * - height: The height of the image (if known).
 * - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft allows the alt attribute to be omitted in some cases. Therefore, this variable defaults to an empty string, but can be set to NULL for the attribute to be omitted. Usually, neither omission nor an empty string satisfies accessibility requirements, so it is strongly encouraged for code building variables for image.html.twig templates to pass a meaningful value for this variable.
 * - title: The title text is displayed when the image is hovered in some popular browsers.
 * - attributes: Associative array of attributes to be placed in the img tag.
 * - srcset: Array of multiple URIs and sizes/multipliers.
 * - sizes: The sizes attribute for viewport-based selection of images
 *
 * @see template_preprocess_image()
 */
#}

{%
set classes = [
  style_name ? 'image-style-' ~ style_name|clean_class,
]
%}
{# <img{{ attributes.addClass(classes) }} /> #}

{# For more information go to https://iiif.io/api/image/2.0/#region #}

{% set domain = 'https://' ~ url('<front>')|render|split('/')[2] %}
{% set url_prefix = domain ~ '/cantaloupe/iiif/2/' %}

{% if uri|split(':')[0] == 'public' %}
  {% set src = domain|url_encode ~ uri|replace({'/public/': "/"})|replace({'/styles/medium/': "/"})|replace({' ': "%20"})|split('?')|first %}
{% else %}
  {% set src = uri|replace({'/public/': "/"})|replace({'/styles/medium/': "/"})|replace({' ': "%20"})|split('?')|first|url_encode %}
{% endif %}

{% set srcset = [
  url_prefix ~ src ~ '/full/100,/0/default.webp 100w',
  url_prefix ~ src ~ '/full/200,/0/default.webp 200w',
  url_prefix ~ src ~ '/full/400,/0/default.webp 400w',
  url_prefix ~ src ~ '/full/full/0/default.webp 800w',
] %}

<picture>
  <img 
    src="{{ url_prefix ~ src ~ '/full/!400,400/0/default.webp' }}"
    srcset="{{ srcset }}"
    sizes="(max-width: 800px) {{ attributes.width }}, calc(100vw-20px)"
    style="{{ attributes.class }}"
    loading="lazy"
    decoding="async"
    typeof="{{ attributes.typeof }}"
    alt="{{ attributes.alt }}"
  />
</picture>

In general, WebP is a more efficient format than JPEG for web delivery, as it provides better compression without compromising image quality. WebP images are usually smaller in size than their equivalent JPEG counterparts, which can result in faster loading times and lower bandwidth usage. When used with a IIIF image processor, WebP images can also take advantage of the advanced caching and delivery capabilities offered by the IIIF protocol, which can further improve their delivery speed. IIIF's caching is comparable to Drupal's built-in caching.

Pro tips

If you ever need to reset the cache for an individual image, append ?cache=false to the URL. This should tell the IIIF server to ignore any previously cached versions of the image and generate a new one. Keep in mind that this may increase the server load and response times. It's also worth noting that some IIIF image servers may have their own caching settings that need to be adjusted to reflect the changes.

Clone this wiki locally