Documentation

Finish / Polish the Collection

Once you’ve adjusted all of your pages, you will likely want to adjust the “About” page to include more than a single paragraph about the collection. You might also like to move or delete various features on the home page.

  1. Editing the About Page
  2. Editing the Home Page

1. Editing the About Page

To edit the about page, find and open the “about.md” file which is in the root of your repository with the readme, index, and other base files.

This is a Markdown File, extension “.md”. Markdown is a friendly way to write HTML that is being used more and more. (FYI: This entire website has been written in markdown.) Jekyll is built to use and process Markdown, so it’s a good skill to learn as you get further into this type of development.

There are a number of tutorials on the web to learn more about Markdown (see Markdown Resources box), but to simply write a few paragraphs, you need to just write a few paragraphs into the file.

Below is an example about page written in Markdown, using the include item-figure.html command discussed below, in case you’d like to copy and paste from a reference.

## About the {{site.collection}} 

The Devin Becker Collection of large unruly dogs consists of one dog named Rufus. 

Rufus is a good boy most of the time. 

{% include item-figure.html objectid="rufus001" float="left" size="6"%}

### When Is Rufus a Bad Boy

Here's list of examples of when Rufus is bad: 

- when he doesn't listen to Devin
- when he runs off into the field or down into the other neighborhood chasing cats. 

### Rufus is the Best

Devin's Collection or Large Unruly Dogs is truly one of a kind. 

It is much appreciated most of the time by Devin.

Adding an image to the About Page

In order to add an image with a caption into any about page, you just need to select the image you’d like to feature, then include it on the about page by pasting in the following code:

{% include item-figure.html objectid="demo-psychiana548" %}

Or if you wanted the image a smaller size and floating on the left:

{% include item-figure.html objectid="demo-psychiana548" float="left" size="2" %}

The features that you can modify in this “include” command are:

  • objectid:
    • This refers to the image and will be used to grab the information for that image from the metadata sheet.
    • example –> objectid="demo-psychiana548"
  • float:
    • This determins which direction the image floats, left or right. Default is right.
    • Default: right
    • Options: left or leave blank for a ‘float-right’
    • example –> float="left"
  • size:
    • This corresponds to a column measurement for the image. This is based on Bootstrap’s grid, so it can be any number from 1 to 12.
    • We’d recommend somewhere between 2 and 4. On a smaller screen, the image will fill the screen’s width, but on larger screens it will float with some space around it to either the right or left.
    • Default: 3
    • Options: [1 - 12]
    • example –> size="2"

2. Editing the Home Page

You may finish your collection and realize, for instance, you might not want the Locations card on the home page of your collection. In order to adjust that page, you need to edit a page in the _layouts folder called “home-infographic.html.”

The “home-infographic.html” file looks like this:

<div class="col-md-8">

{% include index/description.html %}
{% include index/carousel.html%}

</div>
<div class="col-md-4">  

{% include index/time.html %}
{% include index/subjects.html %}
{% include index/locations.html %}
{% include index/objects.html %}

</div>
<div class="col-md-12">

{% include index/data-download.html %}

</div>

In order to edit what appears, you will need to either delete a line or rearrange the include commands like so:

<div class="col-md-8">


{% include index/carousel.html%}

</div>
<div class="col-md-4">  

{% include index/description.html %}
{% include index/subjects.html %}
{% include index/objects.html %}
{% include index/time.html %}

</div>
<div class="col-md-12">

{% include index/data-download.html %}

</div>

This example accomplishes several edits:

  1. It deletes the “location” feature from the original home page
  2. It moves the description from the top left to the top right of the page.
    • You might make this change if you wanted your carousel to be taller and more prominent.
    • You could then adjust the carousel-height variable in the theme file.
  3. It moves the timeline feature to the bottom of the right column.

You often might need to delete one line of this file. We find we often delete {% include index/locations.html %}.