Documentation

Finish

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 Pages directory of your repository.

Markdown is a quick and easy standard to write documents that can be converted into HTML for the web. Because of it’s simplicity, Markdown is used by many websites for creating content or allowing users to format comments. In fact all of the CollectionBuilder docs are written in Markdown.

Jekyll has Markdown support built in, 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 (see Markdown Resources box above), and we suggest you check them out.

When you open the about.md file, you’ll see that there is already one include command at the beginning of the file which is pulling in the page’s jumbotron image: {% include about/jumbotron.html %} (remember, you chose this image in the theme.yml file). If you don’t want the jumbotron on your About page, just delete this line of code.

Alternately, if you’d like to add more visual features to the page we’ve made it easy to do this too, by including templated files. You’ll find the files below in the _includes/feature/ directory:

  • alert.md
  • card.md
  • item-figure.html
  • modal.md

Adding an image to the About Page

The item-figure.html include adds a Bootstrap-styled figure to the page.

It requires that you give a value for one variable, objectid, and contains three optional variables. These are defined below.

Required:

  • objectid: The objectid of an image in your collection that will be used to grab the information for that item from the collection metadata.
    • example –> objectid="demo_psychiana548"

Optional:

  • width: Uses Bootstrap sizing to set the image’s percentage size.
    • Options: 25, 50, 75, or 100
  • float: Uses Bootstrap float utility to float the image left or right.
    • Options: left or right
  • caption: By default the figure include automatically adds the title of the item from your metadata. The caption option is used only if you would like to override the default title. To replace the title, you can either add the text for an alternative caption or give the value false to not include any caption.
    • To manually set the caption, provide the text, e.g. caption="Example caption"
    • If you’d like to turn the caption off use caption=false

For example, adding a figure with only required variables:

  • {% include feature/item-figure.html objectid="demo_001" %}

With additional optional variables:

  • {% include feature/item-figure.html objectid="demo_001" width="50" float="left" caption=false %}

If you use the float option, you may want to “clear” the float at some point below. This can be done by adding <div class="clearfix"></div> on it’s own line.

The alert.md, card.md, and modal.md files can be included in a similar manner, but require different variables. Find these files in your repository in the _includes/feature/ directory and open them to view a description of the options.

2. Editing the Home Page

You may finish your collection and realize that you want to remove or shift around the content on your Home page. To access the content on this page, you’ll need to locate the home-infographic.html file in the _layouts/ directory.

Just like the About page, the Home page is composed of a number of include commands, arranged in three Bootstrap columns:

<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/featured-terms.html field="subject" title="Top Subjects" btn-color="info" featured=site.data.theme.featured-subjects max=site.data.theme.featured-subjects-max %}

{% include index/featured-terms.html field="location" title="Locations" btn-color="outline-secondary" featured=site.data.theme.featured-locations max=site.data.theme.featured-locations-max %}

{% include index/objects.html %}

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

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

</div>

You can easily delete an include command or move it to another location in the file to change the look of your Home page.
For instance:

  1. You could delete the “Time Span” feature box from the Home page by removing the {% include index/time.html %} line. Deleting a line is the most common edit we make to this file.
  2. You could move the collection’s description from the top left to the top right of the page by copy and pasting {% include index/description.html %} from the first column into the second (and deleting it from the first).
    • You might make this change if you wanted space for your carousel to be taller and more prominent.
    • You could then adjust the carousel-height variable in the theme file.

There are a lot of possibilities for customization here! CollectionBuilder is designed as a flexible template that can be adapted to the needs of a collection. We recommend experimenting to find what works best for you.

You might have noticed that the includes for the top subjects and locations cards in the home-infographic layout look a little more complicated than the others on this page. By default they are set up to work with options set in Home page section of the theme.yml file, and use the metadata fields “subject” and “location”. However, you can customize them by editing the option variables, just as we did for the include commands on the About page above.

For example, {% include index/featured-terms.html field="subject" title="Top Subjects" btn-color="info" featured=site.data.theme.featured-subjects max=site.data.theme.featured-subjects-max %} contains the following components:

  • index/featured-terms.html: is the name of the file you’re including. This is the general “featured terms” code that is used to calculate top terms in whichever metadata field you specify and create a card for display. The options are set using the parameter variables listed below.
  • field: The metadata field to be used to auto-generate top terms for the card (to not auto-generate, use the featured option instead).
    • example –> "subject"
  • title: The title you’d like this card to display on the Home page.
    • example –> "Top Subjects"
  • btn-color: The color of the featured-term button links. You can use any Bootstrap color, or specify your own color following the customization instructions in the config-theme-color.csv.
    • example –> "info", "info-outline"
  • featured: As an alternative to the “field” option above, provide a manually defined list of terms to feature separated by semicolon. By default this can be set using the optional featured-subjects value in theme.yml. If this option is used, the field option is ignored.
    • example –> "dogs;muffins;cats"
  • max: Indicates the maximum amount of terms to be included in the card. By default this can be set using the featured-subjects-max value in theme.yml.
    • example –> 3
« Customize Back to Top Deploy »