IIIF for Educators

Mind the Gap

Students are introduced to the practice of "Ekphrasis" to practice "reading" an image/photograph.

Mind the Gap

💡 Concept

Detail from frontispiece of Wither's Book of Emblems Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Emblem is a visual code

🖥️ Activity

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

👓 Example

HTML
Take a deep look at the code (click to open and close)

<table>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3790,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,2277,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,3036,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,2277,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,3036,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,2277,758,759/120,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,3795,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,759,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,759,758,759/120,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,1518,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,3795,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3790,1518,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,3795,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,1518,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,3036,758,759/120,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,3795,758,759/120,/0/default.jpg"/></td>
    <td><img src=""/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3790,759,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,3036,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,2277,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,1518,758,759/120,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/0,759,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,3795,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,0,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3790,3036,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/1516,3036,758,759/120,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,2277,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,1518,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3032,759,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/2274,759,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/758,1518,758,759/120,/0/default.jpg"/></td>
    <td><img src="https://collections.library.yale.edu/iiif/2/1036489/3790,2277,758,759/120,/0/default.jpg"/></td>
</tr>
</table>

🧱 Materials

🛠️ Tools

Puzzle Creator
Use this tool to scramble an image and make a puzzle. (click to open and close)

🪜 Steps

Cropping a IIIF image
To select a portion of an image (click to open and close)

Select the Cropping icon in an item thumbnail
Click thumbnail to load in the IIIF Cropping Tool viewer
Zoom and view
To crop a detail from the image, click the white pencil icon, and highlight the desired rectangle by clicking and dragging a rectangle from corner to corner
A thumbnail of your selected detail will appear in a slider at the bottom of the Cropping Tool. You can repeat to collect multiple details.
Click the Copy icon on the left side of the thumbnail

Create a puzzle
To load an item for viewing in deep zoom. (click to open and close)

steps

✉️ Share

Share your emblem in a post with reflective comment
Add a link to your puzzle, and add a comment to your link. (Click to open and close)

Steps

Solve and share your own emblem in HTML
Use the discussion to share your "puzzle" solved . (Click to open and close)

Highlight and copy the entire block of HTML code.
Scroll to the bottom of the screen, and click Reply
When the "WYSIWYG" (what you see is what you get) editor appears, look just under the box to the right for the HTML symbol </> and click it. You should see a gray field and the number 1.
Paste your code into the field.
Click the HTML symbol </> again to switch back to the default editor. You should see something you can play with.
To the right of the HTML </> symbol is an eight-dot "resize" symbol , which you can slide down to enlarge your WYSIWYG editing field. Use it to view the full image set at once (you may need to do this a couple times).
Following standard rules of a sliding puzzle, your task is to unscramble an image: click into any image and drag or cut and paste it into the only empty box, until you have "solved" the puzzle by putting all its scrambled pieces in the right order.
Add a p

🤝 Collaborate

Click into and complete