This extension has been setup to automate the process of creating formatted lists and galleries using Bootstrap. It is an example of a special page that can be added to the pages.json file.
This example is displaying a list of four entries, displayed four times, demonstrating all four available display formats. An optional table of contents providing links to each of the defined groups has also been included.
This the most complex formatting provided presenting all of the main details in an interactive card like presentation
This is a simplified version of the full card, the sizes of the image is generally limited, the second title is not shown and the cards are arrange in columns rather than rows.
This is simplest card format, limited to a clickable image with the primary title shown as hover text.
The list format only display clickable titles and the comment for each entry, arranged as a simple bulet point list.
This additional format, requires additional variables and is specifically for formatting the resources used to present a lecture or presentation, video, slides, pdf, transcript, etc.
The slides for this presentation can be downloaded here
The transcript for this presentation can be downloaded here
Joe Padfield will present details of how IIIF has been used as the basis for the National Gallery’s internal image sharing and presentation system and how these resources have been re-used to create a digital documentation system to record the delicate process of sampling old master paintings.
The slides for this presentation can be downloaded here
Joe Padfield will present details of the Simple Site GitHub project and how it can be used by researchers to create their own IIIF workspace to explore, compare and present their own arrangement of existing IIIF resources.
The slides for this presentation can be downloaded here
For this extension to work the class variable needs to be set to list and the file variable needs to give the name of the additional json file including the list data as shown below.
The details included in the content and content right variable will be presented as previously described, however the data included in the named file, in this case timeline.json will be processed to add a formatted timeline to the page.
As with the other JSON files the list data needs to be organised in a series of JSON objects, these are documented below, but for an example of a fully formatted JSON file please see the list-example.json file.
The rest of the data within the JSON file relates to a series of entries organised as a list, it is ok just to have a single item in the list.
List entries ....
{
"parent": "extensions",
"class": "list",
"file": "list-example.json",
"title": "Simple Site - The <b>List and Gallery Extension</b>",
"content": "<p>This extension has been setup to automate the process of creating formatted lists and galleries using [Bootstrap|https://getbootstrap.com/]. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.</p>\r\n\r\n<h3>The Example</h3><p>This example is displaying a list of four entries, displayed four times, demonstrating all four available display formats. An optional table of contents providing links to each of the defined groups has also been included.</p>\r\n[##]\r\n\r\n<h3>Summary</h3>\r\n\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables</h4><p>For this extension to work the <b>class</b> variable needs to be set to <b>list</b> and the <b>file</b> variable needs to give the name of the additional json file including the list data as shown below.</p></div>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n \"<b>List - Gallery Example</b>\": {\r\n \"<b>parent</b>\": \"extensions\",\r\n \"<b>class</b>\": \"list\",\r\n \"<b>file</b>\": \"list-example.json\",\r\n \"<b>title</b>\": \"Simple Site - The <b>List Extension Gallery of Supporters</b>\",\r\n \"<b>content</b>\": \"<p>This extension has been setup to automate the process of creating formatted lists and galleries using [Bootstrap|https://getbootstrap.com/]. It is an example of a special page that can be added to the ... \",\r\n \"<b>content right</b>\": \"\"\r\n },\r\n...\r\n</code>\r\n\t</pre>\r\n\t<figcaption class=\"figure-caption\">Simplified version of the JSON object used to describe this page.</figcaption>\r\n</figure>\r\n\r\n<p>The details included in the <b>content</b> and <b>content right</b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>timeline.json</b> will be processed to add a formatted timeline to the page.</p>\r\n\r\n<h3>List JSON file</h3>\r\n\r\n<p>As with the other JSON files the list data needs to be organised in a series of JSON objects, these are documented below, but for an example of a fully formatted JSON file please see the [list-example.json|https://github.com/jpadfield/simple-site/blob/master/build/list-example.json] file.</p>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>defaultcard</b>\": \"<b>list</b>, <b>full</b>, <b>simple</b>, <b>presentation</b> or <b>image</b> - selected default formatting used for each of the included list entries\",\r\n \"<b>displaychecked</b>\": \"<b>true</b> or <b>false</b> - option to display dates of when included or listed links where last checked.\",\r\n \"<b>tableofcontents</b>\": \"<b>true</b> or <b>false</b> - option to include a table of contents\",\r\n \"<b>groups\"</b>: \"<b>{}</b>\" - optional array of extra variables to define alternative formatting and to include a comment for each defined group of list entries, see below.\",\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">The top four variables required in the list JSON file.</figcaption>\r\n</figure>\r\n\r\n<figure>\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n...\r\n \"group name\" : {\r\n \"<b>comment</b>\": \"Optional comment or summary used to describe all of the list items in a given group.\",\r\n \"<b>card</b>\": \"<b>list</b>, <b>full</b>, <b>simple</b> or <b>image</b> - selected formatting to be used for this specific group of list entries.\"\r\n \"<b>maxcols</b>\": \"Optional number from 1 - 12 to indicate the maximum number of columns to allow for simple cards and image cards. The default value is 3.\"\r\n },\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">An example of the optional variables that can be used to further define individual groups of list entries.</figcaption>\r\n</figure>\r\n\r\n<p>The rest of the data within the JSON file relates to a series of entries organised as a <b>list</b>, it is ok just to have a single item in the list.</p>\r\n\r\n<p>List entries ....</p>\r\n\r\n<figure>\r\n\r\n<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n\"list\": [\r\n {\r\n \"groups\": [\"Group Name 1\", \"Group Name 2\"], - \"comma separated list of groups this particular list entry should be display in - normally just a single entry\"\r\n \"ptitle\": \"Primary entry title\",\r\n \"stitle\": \"Optional secondary title\",\r\n \"comment\": \"Optional comment or summary used to describe this particular list entry\",\r\n \"image\": \"Optional file path for image\", \"this can be a full public URL or a local link to an image uploaded into the local <b>graphics</b> folder within your GitHub repository\",\r\n \"link\": \"Optional html link to further information or details related to this list entry\",\r\n \"checked\": \"Optional date to define when the provided link was last checked - list format only\",\r\n \"video\": \"Optional - YouTube link or file path pointing to the recording of a given presentation - presentation format only\",\r\n \"slides\": \"Optional - link or file path pointing to the pdf of the slides used in a given presentation - presentation format only\",\r\n \"transcript\": \"Optional - link or file path pointing to the text file of the transcription of the relevant video of a given presentation - presentation format only\",\r\n},\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">The required and optional variables used to define each list entry.</figcaption>\r\n</figure>",
"content right": "",
"copy": false,
"displayName": "Galleries and Lists",
"aliases": "Galleries and Lists",
"displaycode": true
}
{
"defaultcard": "full",
"displaychecked": true,
"tableofcontents": true,
"groups": {
"Full Card Format": {
"comment": "This the most complex formatting provided presenting all of the main details in an interactive card like presentation",
"card": "full"
},
"Simple Card Format": {
"comment": "This is a simplified version of the full card, the sizes of the image is generally limited, the second title is not shown and the cards are arrange in columns rather than rows.",
"card": "simple",
"maxcols": 2
},
"Image Only Format": {
"comment": "This is simplest card format, limited to a clickable image with the primary title shown as hover text.",
"card": "image",
"maxcols": 3
},
"List Format": {
"comment": "The list format only display clickable titles and the comment for each entry, arranged as a simple bulet point list.",
"card": "list"
},
"Presentations": {
"comment": "This additional format, requires additional variables and is specifically for formatting the resources used to present a lecture or presentation, video, slides, pdf, transcript, etc.",
"card": "presentation"
}
},
"list": [
{
"groups": [
"Full Card Format",
"Simple Card Format",
"Image Only Format",
"List Format"
],
"ptitle": "The IIIF - TANC Project",
"stitle": "Practical applications of IIIF as a building block towards a digital National Collection",
"comment": "AHRC funded - IIIF-TNC | Practical applications of IIIF as a building block towards a digital National Collection - IIIF - TNC",
"image": "graphics/TANC%20-%20IIIF.png",
"checked": "",
"link": "https://tanc-ahrc.github.io/IIIF-TNC"
},
{
"groups": [
"Full Card Format",
"Simple Card Format",
"Image Only Format",
"List Format"
],
"ptitle": "The HeritagePIDs Project",
"stitle": "Persistent Identifiers as IRO Infrastructure",
"comment": "AHRC funded - HeritagePIDs | Persistent Identifiers as IRO Infrastructure - HeritagePIDs",
"image": "graphics/TANC%20-%20PIDS.png",
"checked": "",
"link": "https://tanc-ahrc.github.io/HeritagePIDs"
},
{
"groups": [
"Full Card Format",
"Simple Card Format",
"Image Only Format",
"List Format"
],
"ptitle": "The SSHOC Project",
"stitle": "Social Sciences & Humanities Open Cloud",
"comment": "Social Sciences & Humanities Open Cloud (SSHOC)is a project funded by the EU framework programme Horizon 2020 and unites 20 partner organisations and their 27 associates in developing the social sciences and humanities area of the European Open Science Cloud (EOSC) - SSHOC",
"image": "graphics/sshoc-logo.png",
"checked": "04/02/2021",
"link": "https://www.sshopencloud.eu/"
},
{
"groups": [
"Full Card Format",
"Simple Card Format",
"Image Only Format",
"List Format"
],
"ptitle": "The ARTICT Project",
"stitle": "Art Through the ICT Lens",
"comment": "EPSRC funded - ARTICT | Art Through the ICT Lens: Big Data Processing Tools to Support the Technical Study, Preservation and Conservation of Old Master Paintings - ARTICT",
"image": "graphics/UKRI_EPSR_Council-Logo_Horiz-RGB.png",
"checked": "",
"link": "https://research.ng-london.org.uk/external/ARTICT"
},
{
"groups": [
"Presentations"
],
"ptitle": "Introduction and Welcome",
"stitle": "Joe Padfield",
"comment": "",
"video": "https://www.youtube.com/embed/W1BoGtzvYVM",
"slides": "https://tanc-ahrc.github.io/IIIF-TNC/files/IIIF%20TaNC%20Webinar1%20-%20S01%2001%20-%20Jpadfield%20-%20%20Introduction.pdf",
"transcript": "https://tanc-ahrc.github.io/IIIF-TNC/files/IIIF%20TaNC%20Webinar1%20-%20S01%2001%20-%20Jpadfield%20-%20Introduction%20-%20Transcript.txt",
"link": "https://twitter.com/JoePadfield"
},
{
"groups": [
"Presentations"
],
"ptitle": "Re-using IIIF resources in documentation solutions",
"stitle": "Joe Padfield",
"video": "https://www.youtube.com/embed/emS-4n7cxwo",
"comment": "Joe Padfield will present details of how IIIF has been used as the basis for the National Gallery\u2019s internal image sharing and presentation system and how these resources have been re-used to create a digital documentation system to record the delicate process of sampling old master paintings.",
"slides": "https://tanc-ahrc.github.io/IIIF-TNC/files/IIIF%20TaNC%20%20-%20S01%2004%20-%20Jpadfield%20-%20%20Re-using%20IIIF%20resources.pdf",
"link": "https://twitter.com/JoePadfield"
},
{
"groups": [
"Presentations"
],
"ptitle": "Using existing IIIF resources to create your own IIIF presentations",
"stitle": "Joe Padfield",
"comment": "Joe Padfield will present details of the Simple Site GitHub project and how it can be used by researchers to create their own IIIF workspace to explore, compare and present their own arrangement of existing IIIF resources.",
"video": "https://www.youtube.com/embed/xsuj4SQ1w2Y",
"slides": "https://tanc-ahrc.github.io/IIIF-TNC/files/IIIF%20TaNC%20Webinar1%20-%20S02%2004%20-%20Jpadfield%20-%20SimpleSite.pdf",
"link": "https://twitter.com/JoePadfield"
}
]
}