Skip to content

5.2 Individual coffin pages how do I?

Jump to bottom
Daniel Pett edited this page Dec 19, 2018 · 3 revisions

The coffins pages are split out into multiple folders:

  • _nakhtefmut
  • _senuitef
  • _nespawershefyt
  • _pakepu

And each of these follows the same structure and is rendered using _layouts/coffins.html

Folder structure

Each folder has this type of structure:

_coffinName
  index.md
  decoration.md
  construction.md
  etc

Images you might want to use for each coffin are logically arranged in folders too:

images
  coffinName

Page setup: Front matter

Each page needs to have front matter to give it metadata to tell it various things - layout, title, description, category and url. So your markdown file needs to have the following at the very top:

---
layout: coffins
title: Title for page
description: Short description
permalink: /coffinName/short-descriptive-name
author: your name
---

This can be seen as the page header. Below this is where you put your markdown content.

Page content

Your page content goes directly below the front matter, so for example:

---
layout: coffins
title: Title for page
description: Short description
permalink: /coffinName/short-descriptive-name
author: your name
category: Coffin name 
---
This coffin is amazing

![A coffin]((https://egyptiancoffins.org/images/nespawershefyt/Nes1.jpg)

Which will render your page onto the system. You can also add HTML content here, if you know what you are doing!

Creating a new page

You can either use the online editor and navigate to the folder in which you want a new page to exist (click new file and use pagename.md as the filename format or you can create a file in your folder locally and then push to github. It must follow the conventions above.

Adding technical reports

To add technical reports to pages, we extend the front matter. So for example below we add two files that the template can recognise and display. One variable is the path to the file (note the syntax) which are stored in assets/coffinName. You will need to add this to every page in that folder if you want it to appear as a related file.

---
layout: coffins
title: Title for page
description: Short description
permalink: /coffinName/short-descriptive-name
author: your name
category: Coffin name
technical:
   - 
     file: /nespawershefyt/nespawershefytComplete.pdf
     title: Complete Translations and Description 
   - 
     file: /nespawershefyt/nespawershefytComplete.pdf
     title: Complete Translations and Description 
---

Adding images for cards below text

Images are deployed to pages as cards (boxes with caption and image). To do this you need to add them as an array to the front matter, specifically on the page on which they will be displayed.

You will notice each image has a filename and caption. Images are stored in the path images/coffinName

---
layout: coffins
title: Title for page
description: Short description
permalink: /coffinName/short-descriptive-name
author: your name
category: Coffin name
technical:
   - 
     file: /nespawershefyt/nespawershefytComplete.pdf
     title: Complete Translations and Description 
   - 
     file: /nespawershefyt/nespawershefytComplete.pdf
     title: Complete Translations and Description 
images:
   - 
     image: nespawershefytnestedlarge.jpg
     caption: The nested coffins of Nespawershefyt
   - 
     image: nespamummyboarddisplaylarge.jpg
     caption: Mummy board of Nespawershefyt on display in the Egyptian galleries at the Fitzwilliam Museum.
---

Template files

You might want to know where the template files are, that run the way the page is displayed.

Image cards

These are run from the _layouts/coffins.html file and are rendered in this bit of code which calculates the number of images sent to the page, divides that and creates two columns and then iterates over the images to display them on page.

<div class="container">
    <div class="row">
        <div class="mb-2 mx-2  rounded">
            {% if page.images %}
            {% assign rows = page.images.size | divided_by: 2.0 | ceil %}
            {% for i in (1..rows) %}
            {% assign offset = forloop.index0 | times: 2 %}
            <div class="row mb-3">
                {% for image in page.images limit:2 offset:offset %}
                <div class="col-md-6 mt-3">
                    <div class="card  w-100 mx-auto">
                        <div class="card-body">
                            <img class="mx-auto d-block max-coffins"
                                 src="{{site.baseurl}}/images/{{page.category}}/{{image.image}}">
                            <p class="text-center">{{ image.caption }}</p>

                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
Clone this wiki locally