BRAT

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

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.


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:
![BRAT_Logo-wGrayTxt](\assets\images\BRAT_Logo-wGrayTxt.png)

And will look like:

BRAT_Logo-wGrayTxt

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

[![BRAT_Logo-wGrayTxt](\assets\images\BRAT_Logo-wGrayTxt.png)](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._

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.


Back to ETAL Standards Back to Help Back to BRAT Home