diff --git a/iiif-online-workshop/extras/webpage/README.md b/iiif-online-workshop/extras/webpage/README.md index adc65543..abc7ff4d 100644 --- a/iiif-online-workshop/extras/webpage/README.md +++ b/iiif-online-workshop/extras/webpage/README.md @@ -12,6 +12,10 @@ Which has the following Github repository: https://github.com/iiif-test/Space/tree/main +## Embedding the Universal Viewer + +Embedding the Universal Viewer and Mirador follow very similar patterns but the embed code (Step 3) is different. + ## Step 1: Find your Github repository The way to find your Github repository from the Workbench is to open up your project and select the Files tab at the top: @@ -130,4 +134,46 @@ Now scroll to the bottom of the page and you should see the new heading and link Following that link you should get to the UV with your manifest loaded. -![UV page](imgs/website_uv.png) \ No newline at end of file +![UV page](imgs/website_uv.png) + +## Embedding Mirador + +Embedding Mirador is similar to the UV. We need to start by adding a new Web page in the same way as Step 2 above. I am going to navigate to my main Github repository: + +https://github.com/iiif-test/Space/tree/main + +and click `Add file` then `+ Create new file`. In this case I am going to call it mirador.md and add the following text: + +``` +# This page will show Mirador my Manifest + +This is a short intro and the Mirador viewer will appear below: +``` + +![Edit the mirador web page](imgs/mirador_web.png) + +I now need to embed Mirador. Unforunately Mirador doesn't have the same easy way of embedding as the UV but its possible to use a hosted version and place it into your page by using an [iframe](). An iframe places a remote web page into your webpage. A iframe looks as follows: + +``` + +``` + +The URL in the `src` attribute needs to be changed so that after the `iiif-content=` it contains a link to your Manifest. The width and height are required so that the iframe doesn't squeeze Mirador into too small a box. Once you have done this your mirador.md should look as follows: + +![Mirador embed web page](imgs/mirador_page.png) + +Now click commit changes and in the dialog click commit changes. Next we want to update the main page to include a link to this new page. So similar to Step 5 navigate to the main page of your repository and click the index.md file and then the pencil icon to start editing. + +Scroll to the bottom of the index.md file and add a link to Mirador next to the UV one: + +``` + * [Mirador](mirador.md) +``` + +Once completed it should look as follows: + +![Index page with links to UV and Mirador](imgs/website_2_viewers.png) + +Then scroll to the top of the page and click Commit changes. Then click the Code tab to get back to the main repository page. You should now see the orange dot as mentioned in Step 6. Wait for this to turn green and when it does you can go to your Github pages site to see the new page. + +![Mirador on Github Pages](imgs/pages_mirador.png) \ No newline at end of file diff --git a/iiif-online-workshop/extras/webpage/imgs/mirador_page.png b/iiif-online-workshop/extras/webpage/imgs/mirador_page.png new file mode 100644 index 00000000..48496dc1 Binary files /dev/null and b/iiif-online-workshop/extras/webpage/imgs/mirador_page.png differ diff --git a/iiif-online-workshop/extras/webpage/imgs/mirador_web.png b/iiif-online-workshop/extras/webpage/imgs/mirador_web.png new file mode 100644 index 00000000..96af112f Binary files /dev/null and b/iiif-online-workshop/extras/webpage/imgs/mirador_web.png differ diff --git a/iiif-online-workshop/extras/webpage/imgs/pages_mirador.png b/iiif-online-workshop/extras/webpage/imgs/pages_mirador.png new file mode 100644 index 00000000..4e9160ab Binary files /dev/null and b/iiif-online-workshop/extras/webpage/imgs/pages_mirador.png differ diff --git a/iiif-online-workshop/extras/webpage/imgs/website_2_viewers.png b/iiif-online-workshop/extras/webpage/imgs/website_2_viewers.png new file mode 100644 index 00000000..69f83926 Binary files /dev/null and b/iiif-online-workshop/extras/webpage/imgs/website_2_viewers.png differ