NG Simple Site - template-home

YOUR PAGE TILE APPEARS HERE

SECTION TITLE CAN BE ADDED LIKE THIS

This is an example of a small set of related html pages created automatically based on a set of three JSON^[1] files. This example includes simple text, some basic html code and even some additional Bootstrap options. Please note you can simply just use text, the more complex options are just here as an example.

Example Button

Button or images or any html markup can be added in to form the bulk of the content^[2] and then presented as a simple html page on Github^[3]

For the adventurous you can also use other Bootstrap functions

Extra Bootstrap classes can be used to add colours and emphasis as required.

N.B. The logos used on this page and the link to the Github repository above can all be modified. See site.json in the Documentation section for further details.

Additional information^[4] can be easily added as a second column without the need for more complex html and one can even add in an image if required:

Images

TO ADD AN IMAGE TO A PAGE THERE ARE TWO OPTIONS:

[1] https://www.json.org
[2] Here we could place a lot more detail about this issue
[3] https://github.com/
[4] This extra foot note should be automatically positioned under the second column

To insert a static image:

Replace the URL in the centre of this code and update the alternative text and caption (if either is desired):

This is where you can add the alternative text for the image — There is also the option to add a caption to any image. - Georges Seurat ('Bathers at Asnières') © The National Gallery, London. Bought, Courtauld Fund, 1924. This image is licensed under CC-BY-NC-ND 4.0.

To insert a 'zoom-able' image:

First, you need a IIIF manifest. Ensure you have "class":"openseadragon" and "file":"IIIF manifest goes here" enabled on the page on which you'd like to display the image.

Given the above conditions you can use this code, amended as you'd like to display the desired image:

Hans Holbein the Younger, Jean de Dinteville and Georges de Selve ('The Ambassadors') © The National Gallery, London. Bought, 1890. This image is licensed under CC-BY-NC-ND 4.0.

Included Pages

Nice display pagename A Mirador Viewer An Example List

Display the full code used to define this page.

Page JSON Object

{
    "parent": "template",
    "class": "openseadragon",
    "file": "https://data.ng-london.org.uk/0CWR-0001-0000-0000.iiif",
    "title": "YOUR PAGE TILE APPEARS HERE",
    "content": "<h4>SECTION TITLE CAN BE ADDED LIKE THIS</h4><br/><p>This is an example of a small set of related html pages created automatically based on a set of three JSON[@@https://www.json.org] files. This example includes simple text, some basic html code and even some additional Bootstrap options. Please note you can simply just use text, the more complex options are just here as an example.</p><div style=\"text-align:center;\"><a class=\"btn btn-outline-primary nav-button\" style=\"left:80px;\" id=\"nav-models\" role=\"button\" href=\"./\">Example Button</a></div><br/><p>Button or images or any html markup can be added in to form the bulk of the content[@@Here we could place a lot more detail about this issue] and then presented as a simple html page on Github[@@https://github.com/]</p><div class=\"alert alert-info\" role=\"alert\"><h4>For the adventurous you can also use other [Bootstrap|https://getbootstrap.com/] functions</h4><p>Extra Bootstrap classes can be used to add colours and emphasis as required.</p></div><p>N.B. The logos used on this page and the link to the Github repository above can all be modified. See [site.json|site.json.html] in the Documentation section for further details.</p><p>Additional information[@@This extra foot note should be automatically positioned under the second column] can be easily added as a second column without the need for more complex html and one can even add in an image if required:</p><h4>Images</h4><p>TO ADD AN IMAGE TO A PAGE THERE ARE TWO OPTIONS:</p>",
    "content right": "<p><b>To insert a static image:</b></p><p>Replace the URL in the centre of this code and update the alternative text and caption (if either is desired): <figure class=\"figure\"><img src=\"https://data.ng-london.org.uk/iiif/image/02NS-0001-0000-0000/full/256,/0/default.jpg\" class=\"figure-img img-fluid rounded\" alt=\"This is where you can add the alternative text for the image\"><figcaption class=\"figure-caption\">There is also the option to add a caption to any image. - Georges Seurat ('Bathers at Asni\u00e8res') \u00a9 The National Gallery, London. Bought, Courtauld Fund, 1924. This image is licensed under [CC-BY-NC-ND 4.0|https://creativecommons.org/licenses/by-nc-nd/4.0/].</figcaption></figure><p><b>To insert a 'zoom-able' image:</b></p> <p> First, you need a IIIF manifest. Ensure you have <b>\"class\":\"openseadragon\"</b> and <b>\"file\":\"IIIF manifest goes here\"</b> enabled on the page on which you'd like to display the image.</p><p>Given the above conditions you can use this code, amended as you'd like to display the desired image: <figure class=\"figure\">[##]<figcaption style=\"padding-left:16px;padding-right:16px;\" class=\"figure-caption\">Hans Holbein the Younger, Jean de Dinteville and Georges de Selve ('The Ambassadors') \u00a9 The National Gallery, London. Bought, 1890. This image is licensed under [CC-BY-NC-ND 4.0|https://creativecommons.org/licenses/by-nc-nd/4.0/].</figcaption></figure>",
    "copy": false,
    "displayName": "Example Home",
    "displaycode": true
}

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

Extra extension file

{
    "@context": "http://iiif.io/api/presentation/2/context.json",
    "@type": "sc:Manifest",
    "@id": "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/manifest",
    "label": "Jean de Dinteville and Georges de Selve ('The Ambassadors')",
    "metadata": [
        {
            "label": "Description",
            "value": "Hans Holbein the Younger, 1497/8 - 1543. Jean de Dinteville and Georges de Selve ('The Ambassadors'). Oil on oak. Bought, 1890. NG1314. https://www.nationalgallery.org.uk/paintings/NG1314"
        }
    ],
    "description": "Hans Holbein the Younger, 1497/8 - 1543. Jean de Dinteville and Georges de Selve ('The Ambassadors'). Oil on oak. Bought, 1890. NG1314. https://www.nationalgallery.org.uk/paintings/NG1314",
    "sequences": [
        {
            "@type": "sc:Sequence",
            "@id": "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/sequence/normal",
            "canvases": [
                {
                    "@type": "sc:Canvas",
                    "@id": "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123",
                    "thumbnail": {
                        "@type": "dctypes:Image",
                        "@id": "https://data.ng-london.org.uk/iiif/image/0UUJ-0008-0000-0000/full/150,/0/native.jpg"
                    },
                    "height": 5124,
                    "width": 5194,
                    "images": [
                        {
                            "@type": "oa:Annotation",
                            "@id": "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/image/123/zoom",
                            "motivation": "sc.painting",
                            "on": "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123",
                            "resource": {
                                "@type": "dctypes:Image",
                                "format": "image/jpeg",
                                "@id": "https://data.ng-london.org.uk/iiif/image/0UUJ-0008-0000-0000/full/full/0/native.jpg",
                                "height": 5124,
                                "width": 5194,
                                "service": {
                                    "@id": "https://data.ng-london.org.uk/iiif/image/0UUJ-0008-0000-0000",
                                    "@context": "http://iiif.io/api/image/1/context.json",
                                    "profile": "http://iiif.io/api/image/2/level2.json"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/",
    "attribution": "These images are \u00a9 The National Gallery, London. These works are licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License (CC BY-NC-ND 4.0) https://creativecommons.org/licenses/by-nc-nd/4.0/",
    "logo": "https://research.ng-london.org.uk/ng/graphics/ng_logo_tr_125.png"
}

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