Japan History Lab

Japan History Lab Reference

This page contains instructions for performing tasks on Japan History Lab. It will be regularly updated as new skills are introduced in the lab and workshops. You can download a pdf of these instructions by clicking here>>

Nov 20, 2015: Added code for embedding youtube videos. Scroll to the bottom to see the code, or see it in action on the HTML Example page.



A. Login to Japan History Lab for the First Time

  1. Navigate to japanhistorylab.ca.
  2. Scroll down to the bottom of the Home page to find the login link.
  3. Your username is the first letter of your first name capitalized and your last name capitalized. (ie. JLegassie).
  4. Your password is the last four digits of your student number.
  5. Once you’ve logged in vist the "My Profile" page and click on the “Edit" tab. Change your password to something more secure.
  6. If you like click on ‘main profile’ and add an avatar, bio or social media links.
  7. Spend some time exploring the site. Check out the list of stub articles in the Article Index, and take a look at the short list of themes in the poll at the top of the page.

B. Workflow State and Conditions

The listed conditions must be completed before advancing to the next state.

1. Publication Workflow (Articles)

  1. Stub
    Original State
  2. Selected
    Working Title Chosen
    Contributions to Map and Timeline considered
    Fit with Theme approved by 2 peers
  3. Assigned
    Author assigned
  4. Drafted
    Plain text draft saved in “Body" field by Author
  5. Reviewed
    Peer review prepended to “Body"
  6. Edited
    Author’s final version saved in “Body" field
  7. HTML, Footnotes and Media
    HTML added to “Body"
    Media & footnotes embedded in “Body"
    Links with Articles and Events created
  8. Proof Read 1
    Detailed proofread Completed
  9. Proof Read 2
    Second proofread completed
  10. Published
    Instructor’s check completed

2. Bibliography Checks (Biblio)

  1. Imported
    Original State
  2. Proof Read 1
    First proofread completed
  3. Media Digitized
    Media Sources: Media located, digitized and saved to S drive.d
    Textual Sources: Footnotes added to all Articles that cite the source (Skip to v.)
  4. Media Uploaded to Drupal
    Media uploaded to Bibliography Entry on Japan History Lab
  5. Footnotes and Visualizations
    Media embedded in Articles.
    Footnotes added to Articles
  6. Proof Read 2
    Final proofread completed
    Tracking File on Mega drive updated

C. Add Footnotes to Japan History Lab Articles

  1. When you are signed in visit the page of an article on Japan History Lab and click the 'Edit' tab.
  2. In a separate window or tab open up the Bibliography and copy the “citation key" of the Bibliography entry you are looking for. It is in square brackets at the beginning of the entry).
  3. Locate the place in the “Body" field where you want to place the citation, and paste the citation key between the tags '[bib]' and [/bib] followed by the page number of the source material in brackets if applicable. ie. [bib]1234[/bib] (pg. 200).
  4. Save the Article and check to see that the footnote was created correctly.

D. Upload a Media File to A Bibliography Entry in Drupal

  1. Visit the Bibliographic entry's page on Japan History Lab and click on the 'Edit' tab.
  2. Scroll down to the box labeled 'Media Upload.' Click browse and find the media file on your hard drive. Click 'Upload.'
    The file must be under 2 MB, and be one of the following file types: .txt, .pdf, .mp3, .jpeg, .jpg, .gif, .png, .wav, .avi, .mp4, .mv. If your file doesn't meet these requirements let Joel know and he can help you edit it, or upload it in another way.
  3. When the file is uploaded. Note the filename and Click save.
  4. The full path to the media file will be: /sites/default/files/filename,.
    You will use this filename when you embed the media in article pages, ie. <img src="/sites/default/files/filename.jpg" ... />

E. HTML Elements

  1. <h1>Oswald Heavy</h1>
  2. <h2>Oswald Bold </h2>
  3. <h3>Giambattista vs Petit</h3>
  4. <h4>Oswald Regular</h4>
  5. <p>Gandhi Serif</p>
  6. <ul>
    <li>Bulleted list and list items</li>
    </ul>
  7. <ol>
    <li>Numbered list and list items</li>
    </ol>
  8. <img src="image/URL.jpg" alt="Image Description" />
  9. <em>Text in italics</em>
  10. <strong>Bold Text</strong>
  11. <a href="link/url.html">Linked text</a>
  12. <span>Text set off from surrounding text.</span>
  13. </br>
    Following text starts a new line
  14. <div>Used to group different elements together</div>

F. CSS Tags

<div class="imgCapL">....</div>
Div for horizontal (landscape) images and captions on the left side of the page.

<div class="imgCapR">...</div>
Div for horizontal (landscape) images and captions on the right side of the page.

<div class="VimgCapL">...</div>
Div for vertical (portrait) images and captions on the left side of the page.

<div class="VimgCapR">...</div>
Div for vertical (portrait) images and captions on the right side of the page.

<img class="art" ... />
For images embedded in articles

<p class="caption">Image caption text</p>
For image captions

G. Embedding Media

1. Embedding Images

Put the following code in the article where you want the image to appear:

<div class="imgCapL">
<img class="art" src="/sites/default/files/placeholder1.jpg" alt="This is a placeholder image" />
<p class="caption">This is a placeholder image[bib]NID[/bib].</p>
</div>

Alternate between “imgCapL" and “imgCapR" so that media will appear alternately on the left and right hand sides of the page.

For vertically aligned (portrait) images replace “imgCapL" and “imgCapR" with “VimgCapL" and “VimgCapR" respectively.

Replace “placeholder1.jpg"" with the Name of the file uploaded to the bibliography entry.

Replace “This is a placeholder image" with a caption describing the media’s content (1-2 sentences).

Replace “NID"" with the node id of the media’s bibliography entry.

2. Youtube Videos

Put the following code in the article where you want the video to appear:

<div class="imgCapR">
<div videoID="nxmWfbXS4Pw"
startTime="300"
endTime="600"
height="172"
width="305"
id="youtube-player"></div>
<p class="caption">Don't forget to be awesome![bib]NID[/bib]</p>
</div>

Alternate between “imgCapL" and “imgCapR" so that media will appear alternately on the left and right hand sides of the page.

Replace "nxmWfbXS4Pw". with the video id provided by Youtube. It's the sequence of letters and numbers at the end of the video's URL. You can also get it from the video's embed code.

Change "300" and "600" to the number of seconds from the beginning of the video to start and end playback respectively. If you want to play the whole video then delete these two lines.

Do not change the width and height numbers, as they are set to match the surrounding div.

Replace “Don't forget to be Awesome" with a caption describing the media’s content (1-2 sentences).

Replace NID with the node id of the bibliographic entry for the video to create a footnote.