NG Simple Site

Simple Site - The List and Gallery Extension

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.

The Example

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.

Full Card Format
Simple Card Format
Image Only Format
List Format
Presentations

This the most complex formatting provided presenting all of the main details in an interactive card like presentation

The IIIF - TANC Project

Practical applications of IIIF as a building block towards a digital National Collection

AHRC funded - IIIF-TNC | Practical applications of IIIF as a building block towards a digital National Collection - IIIF - TNC

The HeritagePIDs Project

Persistent Identifiers as IRO Infrastructure

AHRC funded - HeritagePIDs | Persistent Identifiers as IRO Infrastructure - HeritagePIDs

The SSHOC Project

Social Sciences & Humanities Open Cloud

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

The ARTICT Project

Art Through the ICT Lens

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

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.

The IIIF - TANC Project

AHRC funded - IIIF-TNC | Practical applications of IIIF as a building block towards a digital National Collection - IIIF - TNC

The HeritagePIDs Project

AHRC funded - HeritagePIDs | Persistent Identifiers as IRO Infrastructure - HeritagePIDs

The SSHOC Project

The ARTICT Project

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

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.

The IIIF - TANC Project - AHRC funded - IIIF-TNC | Practical applications of IIIF as a building block towards a digital National Collection - IIIF - TNC ( no checked date )
The HeritagePIDs Project - AHRC funded - HeritagePIDs | Persistent Identifiers as IRO Infrastructure - HeritagePIDs ( no checked date )
The SSHOC Project - 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 ( last checked 04/02/2021 )
The ARTICT Project - 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 ( no checked date )

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.

Introduction and Welcome

Joe Padfield

The slides for this presentation can be downloaded here

The transcript for this presentation can be downloaded here

Re-using IIIF resources in documentation solutions

Joe Padfield

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

Using existing IIIF resources to create your own IIIF presentations

Joe Padfield

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

Summary

Extension Variables

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.


...  
  "List - Gallery Example": {
    "parent": "extensions",
    "class": "list",
    "file": "list-example.json",
    "title": "Simple Site - The <b>List Extension Gallery of Supporters</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 ... ",
    "content right": ""
  },
...

Simplified version of the JSON object used to describe this page.

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.

List JSON file

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.

{
  "defaultcard": "list, full, simple, presentation or image - selected default formatting used for each of the included list entries",
  "displaychecked": "true or false - option to display dates of when included or listed links where last checked.",
  "tableofcontents": "true or false - option to include a table of contents",
  "groups": "{}" - optional array of extra variables to define alternative formatting and to include a comment for each defined group of list entries, see below.",
...

The top four variables required in the list JSON file.

{
...
  "group name" : {
    "comment": "Optional comment or summary used to describe all of the list items in a given group.",
    "card": "list, full, simple or image - selected formatting to be used for this specific group of list entries."
    "maxcols": "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."
    },
...

An example of the optional variables that can be used to further define individual groups of list entries.

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 ....


... 
"list": [
  {
  "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"
  "ptitle": "Primary entry title",
  "stitle": "Optional secondary title",
  "comment": "Optional comment or summary used to describe this particular list entry",
  "image": "Optional file path for image", "this can be a full public URL or a local link to an image uploaded into the local graphics folder within your GitHub repository",
  "link": "Optional html link to further information or details related to this list entry",
  "checked": "Optional date to define when the provided link was last checked - list format only",
  "video": "Optional - YouTube link or file path pointing to the recording of a given presentation - presentation format only",
  "slides": "Optional - link or file path pointing to the pdf of the slides used in a given presentation - presentation format only",
  "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",
},
...

The required and optional variables used to define each list entry.

Display the full code used to define this page.

Page JSON Object

{
    "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 &lt;b&gt;List Extension Gallery of Supporters&lt;/b&gt;\",\r\n    \"<b>content</b>\": \"&lt;p&gt;This extension has been setup to automate the process of creating formatted lists and galleries using &#91;Bootstrap|https://getbootstrap.com/&#93;. 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
}

The complete JSON object used to define this content and layout of this page.

Extra extension file

{
    "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"
        }
    ]
}

The complete extension file used to define extra content included in this page.

Simple Site - The List and Gallery Extension

The Example

Contents

Full Card Format

The IIIF - TANC Project

Practical applications of IIIF as a building block towards a digital National Collection

The HeritagePIDs Project

Persistent Identifiers as IRO Infrastructure

The SSHOC Project

Social Sciences & Humanities Open Cloud

The ARTICT Project

Art Through the ICT Lens

Simple Card Format

The IIIF - TANC Project

The HeritagePIDs Project

The SSHOC Project

The ARTICT Project

Image Only Format

List Format

Presentations

Introduction and Welcome

Joe Padfield

Re-using IIIF resources in documentation solutions

Joe Padfield

Using existing IIIF resources to create your own IIIF presentations

Joe Padfield

Summary

Extension Variables

List JSON file

Page JSON Object

Extra extension file