The online Archives images are stored in a system called International Image Interoperability Framework (IIIF). This allows viewers to zoom in and read archival information in one stop, so for most of the images in the WUpedia posts, we will be using the "custom HMTL" WordPress block. This means that while you have to learn to use the custom HTML block, you don't have to download and upload the images for your entry. Exceptions to this would be your featured image, and if you want to use a special block like the Image Compare (which has a slider feature) or Slideshow.
Note: If you decide to use the WordPress image features, you need to make sure that you are setting alt-text, captions, descriptions, and so on.
You can embed single images or groups of images in your entry. Please note that the process is slightly different.
First, locate the image you want to embed on the Archives website. If you want to use an image that does not have an entry in the archives website, please talk to one of the archivists about having it scanned and added. If you want viewers to look at a page in a scanned document, please include the page number in your entry.
Next, locate the share option for your archival object. Click the 3 dots at the right side of the object's viewscreen, then click "Share" in the drop down menu.
This will bring up a modal with different sharing options. You will be embedding an image, so click on the "800x600" option for viewer size, then click the "Copy" button to copy the embed code. (The view screen that will be embedded is called an iframe).
Now go back to your WUpedia post. Click on the blue "+" button at the top of the screen to add a new block, and search for the custom HTML block (just typing "html" into the search bar should bring it up for you). Place your cursor where you want to the block to be and click on the icon to add the block. (You can always rearrange blocks in your post using the up and down arrows that appear when you click on a block).
Paste the embed code that you copied from your archival object in the field that appears. Look for the "width" part of the code. It should read "800", which tells us the default width is 800 pixels.
You preview what the image looks like by clicking on the "preview" button next to the "HTML" button in the menu that appears when you click on the block. As you can see from the screenshot, 800 pixels does not fill the width of the post screen, and we cannot make text wrap around it, so we will be changing the width of the iframe.
To change the width, click on the HTML button in the menu and locate the width="800" part of the code (given in the snippet below).
<iframe src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/5e6f1aa5-ebf9-46ae-85f3-8443a104eb58/manifest" title="Image viewer" width="800" height="600" allowfullscreen frameborder="0"></iframe>
Change the "800" to "100%". This will make the iframe (view screen) take up the full width of the post.
<iframe src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/5e6f1aa5-ebf9-46ae-85f3-8443a104eb58/manifest" title="Image viewer" width="100%" height="600" allowfullscreen frameborder="0"></iframe>
Now you can preview your image and see that the iframe is now the full width of your post.
Don't forget to click the "save draft" button at the top of your workspace to save your entry!
You can embed a group of images that will appear in 2 columns, so stick to even-numbered groups of objects. It's best to embed either pairs or groups of 4 because if you group more images, the images will become small and difficult for the reader to see.
Here's what a group of 4 images looks like:
To embed a group of images, you will use the custom HTML block, just as you did with a single image. However, you will need to locate the IIIF manifest for each image you want to include in the group iframe. Click on the hamburger menu (3 horizontal lines) at the top right of the view screen on the archive object page. Scroll down in the sidebar menu that appears until you see the "IIIF manifest" section and copy the link.
Now you need to decide if you are embedding 2 objects side-by-side, or a group of 4 objects. Once you have decided, use the code snippets in the next section to set up your iframe. You can do all of this in the custom HTML block directly in your entry, or you might want to paste the snippet into a document, edit it, and then paste your updated snippet into the custom HTML block.
Once you're done, don't forget to save your entry draft!
If you reference a specific page from one of the Archive's digitized resources, you should set that page as the default view in the embedded viewer. The easiest way to do this is to copy and adjust the code snippet provided below, replace the highlighted sections with your object's URL, and set the page number.
The code snippet below will set up the iframe viewer. You will need to locate and copy your object's manifest. Click on the hamburger menu (3 horizontal lines" at the top right of the view screen on the archive object page. Scroll down in the sidebar menu that appears until you see the "IIIF manifest" section and copy the link.
Once you have your object's manifest, adjust the code snippet provided below with your URL.
Next, determine the page you want to set as default. You will need to subtract 1 from your page number. The first page of an object is 0, the second page is 1, the tenth page is 9, and so on. In the provided code snippet replace the number following "c" with the number of your page.
Copy your updated code snippet and paste it into the custom HTML field in your entry.
NOTE: you can put a manifest with a specifically-selected page into a group of images, but only one, and it must be in a specific position in the code (see snippet below).
You can put multiple images or archive objects together in a viewing frame. Stick to either 2 or 4 objects per frame so that it's easy for the reader to interact with them.
You can copy the code snippets below and replace the highlighted manifests provided with the manifests for your own archive objects.
NOTE: manifests must be separated by commas.
2 objects side-by-side
The code for a frame with side-by-side objects looks like this. The manifest for the first object is highlighted in green. The manifest for the second object is in yellow.
<iframe title="Image viewer" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/5e809578-5258-4c06-bff9-0bf440663f4e/manifest,https://digitalcollections.willamette.edu/server/iiif/ce207c1f-83ed-4f8c-935c-63429245df6d/manifest" width="100%" height="600" allowfullscreen="allowfullscreen"></iframe>
4 objects in a 2-column grid
The code for a grid of 4 objects in 2 columns and 2 rows looks like this. The first and third manifests are highlighted in green. The second and fourth manifests are highlighted in yellow.
<iframe title="Image viewer" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/9de5408a-d152-4cb9-b490-a38edb741ba8/manifest,https://digitalcollections.willamette.edu/server/iiif/bba1bb5c-5da0-460b-bd28-570df2b2bb27/manifest,https://digitalcollections.willamette.edu/server/iiif/459641ce-52f5-4d0c-bf48-c6d51589b855/manifest,https://digitalcollections.willamette.edu/server/iiif/aacbc224-1bb1-40e3-a68f-826fc508e29d/manifest" width="100%" height="600" allowfullscreen="allowfullscreen"></iframe>
Setting a specific page as default in the viewer
Replace the highlighted part of the snippet with your manifest URL.
Set the page number MINUS 1 as the number following the highlighted "c."
<iframe src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/949fde4b-f251-4d24-a415-3258be4ca213/manifest&canvas=https://digitalcollections.willamette.edu/server/iiif/949fde4b-f251-4d24-a415-3258be4ca213/canvas/c3" title="Image viewer" width="100%" height="600" allowfullscreen frameborder="0"></iframe>
Note that if you copy the share link you will need need to delete "/manifest" from the end of the URL.
https://digitalcollections.willamette.edu/server/iiif/949fde4b-f251-4d24-a415-3258be4ca213/manifest
A group with a specifically-selected page
You can only include one file with a specifically-selected page in a group. It is the second manifest, highlighted in yellow.
<iframe title="Image viewer" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/c450619a-c639-4f4f-959b-a222d5e7047b/manifest,https://digitalcollections.willamette.edu/server/iiif/9b2ecec1-971f-439a-a31a-ba568c9d76ed/manifest&canvas=https://digitalcollections.willamette.edu/server/iiif/c450619a-c639-4f4f-959b-a222d5e7047b/canvas/c7" width="100%" height="600" allowfullscreen="allowfullscreen"></iframe>
If you're interested in learning more about IIIF, check out the IIIF Demo Page created by librarian Michael Spalti.