Riverscapes Consortium

Common Content

Some Common Components of Pages

These days, there are many websites that allow you to create content (e.g. videos, tweets, spreadsheet, etc.) and embed it in your website. The git hosted web pages we use are written in markdown, but can recognize blocks of html like <iframe>, which are the most standard way to embed something.

Embedding a Video

With iframe

Since Jekyll sites support html, you can actually use html <iframe> to embed videos easily. The video I want to embed is https://www.youtube.com/watch?v=JFzYE_Cnjjw&feature=youtu.be.

Watch this video for how to embed a video.

Note using the <div class="responsive-embed"> </div> tags around your <iframe> will help center the iframe and adaptively scale it for differen screen sizes and devices:


<div class="responsive-embed">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/4UKe5BkzJEY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Instead of:

	<iframe width="560" height="315" src="https://www.youtube.com/embed/4UKe5BkzJEY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Markdown Alternative

However, for regular markdown there is still an option that includes a preview of the site (this is supported, for example in GitHub issue forums, whereas the iframe is not). It relies on the thumbnails that YouTube automatically generates for every youtube vide on its image server (https://img.youtube.com/; see here for more information on how YouTube does this). Thus, if you use the image markdown syntax (![alt-text](imagepath)) inside a regular markdown hyperlink ([text](url)) you can produce the illusion of an embedded youtube video (it is actually just an image that links to YouTube).

Use the following syntax and substitute in your YouTube video ID for YTID:


For example, using the above id of 4UKe5BkzJEY for YTID would show up as:

Note subsituting 1.jpg for 0.jpg switches to a thumbnail size.

Finally, if you want to make the hyperlink open in a new tab, use:


Embedding an Image

Of all the things to do in these markdown Git-hosted webpages, embedding an image is actually the most annoying and difficult (compared with WYSWYG web platforms like Weebly or Google Sites). The reasons are it is not a drag and drop operation and you kind of need to know what you are doing. The steps are:

  1. Get your image prepared.
  2. Resize your image to desired size that it will appear on page (e.g. width of 300 pixels would be half width, 600 pixels would be fuller). You can use Photoshop or Faststone Capture (for example).
  3. It is best practice to then tinify (make smaller) your image using something like TinyPng. These typically achieve 20 to 50% compression and help your images and whole page load faster.
  4. Copy your image to the appropriate folder path (for BRAT, that is \docs\assets\images\ or subfolder and will be referred to by path as "/assets/images/")
  5. Reference the image in your markdown page. This is done with following syntax for the BRAT_Logo-wGrayTxt.png:

And will look like:


To make that image hyperlinkable (clickable), you enclose it in square brackets [] and then put hyperlink in () parentheses. For example, to make image above clickable and linking to http://google.com


In this video, I illustrate how to do steps 2-5 of this with a screen shot taken in Faststone Capture:

Adding a Button

The best places to look for examples of buttons is on the styleguide template - and corresponding markdown or to copy a button you like from an existing page. Buttons can be:

See Icon Library for a list of icons that our Riverscapes recognize and you can use.

The basic syntax for a button goes something like:

<a class="hollow button" href="/Documentation/Standards"><i class = "fa fa-check-square-o"></i> Back to ETAL Standards</a>

In the video below, we walk you through how to make your own button to navigate to a specific page on the website Back to ETAL Standards and an external URL (http://google.com) Take me Away to Google.

Embed a Slideshow

Its nice to be able to embed slideshows on a page:

This video walks you through how to:

Linking to a PDF

There are many ways to provide a citation. This is the least useful:

  • Macfarlane WW, Gilbert JT, Gilbert JD, Saunders WC, Hough-Snee N, Hafen C, Wheaton JM and Bennett SN. 2018. What are the Conditions of Riparian Ecosystems? Identifying Impaired Floodplain Ecosystems across the Western U.S. Using the Riparian Condition Assessment (RCA) Tool. Environmental Management. DOI: 10.1007/s00267-018-1061-2.

This is better because it provides a link from the title to the Research Gate entry (which tracks statistics on reads and downlaods), and link from the DOI to the stable, pemenant URL:

** This is our lab standard for citations ** -link to ResearchGate through title, link to DOI through DOI.

If you need some help on how to upload your content to ResearchGate, see here:

Hosting a PDF on AWS instead of ResearchGate

There are situations where its nice to provide a direct link to the PDF (e.g. slides in workshop or handout), that we don’t want to post on ResearchGate. If we want to provide a link to a PDF that we hosted on AWS, here’s an example:

The syntax for above is: [PDF of my paper](https://s3-us-west-2.amazonaws.com/etalweb.joewheaton.org/Workshops/BRAT/2018/Burnt/Macfarlane_et_al-2018-Environmental_Management.pdf)

The video (scroll down) shows how to upload to AWS (easy).

If I want to show a PDF icon next to above citation, to indicate there is a pdf, I can use my pdf icon with <i class="fa fa-file-pdf-o" aria-hidden="true"></i>:

But, that doesn’t allow me to click on PDF icon and get to it. To do this, I need to have a html <a href=""> tag:

This was done with <a href="https://s3-us-west-2.amazonaws.com/etalweb.joewheaton.org/Workshops/BRAT/2018/Burnt/Macfarlane_et_al-2018-Environmental_Management.pdf" ><i class="fa fa-file-pdf-o" aria-hidden="true"></i></a> and collapsing the PDF icon inside the hyperlink <a> tag.

Or a Button…

Finally, a button can be nice for the paper.

Download my PDF please!

A long-winded video showing how you do all the above, plus the upload to AWS.

Embed a Gist

If I have a GIST (e.g. this one), you can simply copy the embed code and paste it in. For example, this produces: <script src="https://gist.github.com/joewheaton/002acd9ea725f6d4a1bac38ee9a0dd50.js"></script> this:

Add a Google Search Bar for your Site

If you want a Google Search Bar for your site, use Google’s Programmable Search Engine. You have to Add your search engine, and in it tell it what site() to search? (e.g. for GCD it might be gcd/riverscapes.net/*)

It then gives you some code (e.g.):

<script async src="https://cse.google.com/cse.js?cx=31c6cfa7b5dba45da">
<div class="gcse-search"></div>

that correspondes to a search bar:

You can customize the look and feel as well.

Add a DOI with Zenodo for your Website or Tool

Zedondo provides an easy way to make your website citeable, trackable and indexed. You can even make your contribution part of the Riverscape Consortium Zeondo Community

  1. Create a Zenodo account (preferably linked you your ORCID)
  2. Link your GitHub account in your profile.
  3. Click on GitHub in your settings. You will have access to all your repositories.
  4. Flip the switch to enable Zenodo tracking of your repository. Do this before creating a release.
  5. Create a release (once tracking, Zenodo will automatically download a .zip-ball of each new release and register a DOI.)
  6. Get your badge!

For example, for the Low-Tech PBR website, it generated this badge: DOI and provided the following markdown:


The Zeondo Entry also then provides a suggested citation! We’ve been adding these to our site footer.html. For example for GCD we used:

<div class="float-left">
        To cite content from this site use:<br>  <a href="https://doi.org/10.5281/zenodo.7248344"><img src="https://zenodo.org/badge/DOI/10.5281/zenodo.7248344.svg" alt="DOI"></a>


<div class="float-right">
    The <a href="https://github.com/Riverscapes/GCD">GCD</a> <i class="fa fa-github" aria-hidden="true"></i> site is licensed under a <a href="https://github.com/Riverscapes/gcd/blob/master/LICENSE">GNU General Public License v3.0</a>,<br> and some specific content is licensed with
      <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">
        <img src="/assets/images/cc-watermarks-riverscapes_orig.png" alt="Picture">
To cite content from this site use:
The GCD site is licensed under a GNU General Public License v3.0,
and some specific content is licensed with Picture