Display high-quality images from our IIIF server that automatically adapt.
Use this pattern when you need to display images from Digital Collections. The pattern will automatically fetch the the correct size and quality image to render in browser for you without any extra configuration.
This pattern is available to preview, but is not finalized and in development. If you'd like to try it out and give feedback, it's available in release 1.1.1-dev.*.
Use the identifier (uuid) of the image. You'll need this as it is a required attribute.
Write meaningful alt text. Describe what the image shows. Use an empty string (alt="") only when the image is purely decorative. See the W3C Web Accessibility Initiative (WAI) Images Tutorial for guidance on writing effective alt text.
Crop and configure as needed. Show just the portion you need, rotate images, or adjust quality using IIIF attributes. See attributes below for all configuration options.
<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt=""></pennlibs-iiif-img>
Use IIIF's percentage-based region syntax to crop specific portions of the image:
<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt="" region="pct:50,31,31,23"></pennlibs-iiif-img>
Center crop images to a specific aspect ratio:
<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt="" region="4:1"></pennlibs-iiif-img>
<pennlibs-iiif-img
uuid="f0210189-db76-48af-b835-dd710d66d8b8"
alt="Two people walking in the snow by a large tree"
style="max-width: 32rem;"
></pennlibs-iiif-img>
| Attribute | Description | Type | Default |
|---|---|---|---|
alt | Alternative text that describes the image content for screen readers and when images fail to load. Use an empty string for purely decorative images. | string | |
loading | Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport, or "eager" to load immediately. | "eager" | "lazy" | 'lazy' |
quality | The IIIF quality of the image.
Controls the color delivery mode.
| string | 'default' |
region | The IIIF region of the image to display.
Defines the rectangular portion of the underlying image to return.
| string | 'full' |
rotation | The IIIF rotation to apply to the image.
Specifies mirroring and clockwise rotation in degrees (0-360).
| string | '0' |
show-fallback | Whether to display a fallback placeholder image when the IIIF image fails to load. | boolean | true |
uuid | The IIIF UUID identifier of the image resource on the Penn Libraries IIIF server. | string | |