User manual to EHRI visualisations (Neatline)

The thing that most sets the EHRI Document Blog apart from other blogs is the Neatline presentation, which allows contributors to visualise and analyse documents using maps, timelines, and text annotation tools.These presentations are embedded seamlessly into the body of the WordPress blog using an iframe. It is also possible to combine visualisation tools in different ways depending on the type of document and its analysis.

Standard Neatline documentation can be found at http://docs.neatline.org/.

Examples of Neatline Presentations

 1. Text Annotation

Two methods for creating text annotations have been used in the blog so far:

• Presenting the text on the right of the original document as a basic transcription
  • Example: Daily Orders from the Terezín (Theresienstadt) Ghetto
• Using a description of the document that describes in more detail certain elements of the original document
  • Example: Death Certificate of Gabriel Frankl from the Terezín Ghetto

2. Map

Example: Reports from the No Man’s Land

3. Timeline

4. Map + Timeline

Example: Testimony of Valerie Straussová

Step-by-Step Guide to Creating a Neatline Presentation

1. Login to Omeka to access the dashboard: https://visualisations.ehri-project.eu/admin/
2. To get to the Neatline plugin, click Neatline in the left-hand navigation bar
3. Create a new Exhibit
4. There are several different areas to work in:
5. Exhibit Settings: This is where you edit the text that appears on the right-hand side of the visualization, beside the map/timeline. Paste the text you want to use for your exhibition in the Narrative free text box. Once you create all of your records, you will need to add ‘slugs’ to this text. Each record (points on the map/timeline) is given a slug, so that when you click on a word or phrase in the text, you see where it is on the map and/or timeline. You will need to go through your text and add slugs using this HTML code: The subject was born at <span data-neatline-slug=”mielec”>MIELEC (POLAND)</span>.
6. Name of Exhibit: This is where you create new Neatline records.
7. Fullscreen View: This is where you see and test the final product – the visualization beside the text.

Creating a Map Visualisation

Example: Add Washington, D.C. as a point to the map.

1. Click on the name of the Exhibit to create a new Neatline record
2. Give it a short, lowercase slug (washington)
3. Give it a full title that you want displayed at the top of the record (Washington, D.C.)
4. Add descriptive text to the body (if applicable)
5. Add a point on the map
   1. Click on the Map tab
   2. Click Draw Point
   3. Zoom into Washington, D.C. and click on it (having a Google Map open in another tab helps because you can’t search here) 

Creating a Timeline Visualisation

1. Add a point on the timeline/style
2. Click on the Style tab
   1. 1. Add a tag (if you want to break your records into categories, such as points of origin/destinations, you can assign tags. This way, you can change the style of all records in each category with one piece of code, rather than in each record).
      2. Add widgets (Waypoint for the map, SIMILE timeline for the timeline, both if you want this record to appear on both the map and the timeline. It is also possible to have records that do not appear on either. For example, you can create a record just to add a pop-up description for a word or phrase in your text. The description will appear in the top left-hand corner when a user clicks on that word or phrase, but it will not show a point on the map or timeline).
      3. Add dates/times for the timeline. Enter dates/times in the following format:
         • 23 April 1938 = 1938-04-23
         • 8:30am on 23 April 1938 = 1938-04-23T08:30
         • 23 April 1938 to 1 May 1939 = 1938-04-23 to 1939-05-01

WordPress Blog Post

Once the Neatline presentation is complete, it can be embedded into the contributor’s WordPress blog post using an iframe. Use the following HTML code to embed the Neatline visualisation into the WordPress post (or any other web page) as an iframe:

<a href="[Neatline fullscreen presentation URL]">See fullscreen visualisation of [name of blog]</a> <iframe src="[Neatline fullscreen presentation URL]" width="100%" height="1000" frameborder="0"></iframe>

Example:

<a href="https://visualisations.ehri-project.eu/neatline/fullscreen/jakub-leipzig-interview">See fullscreen visualisation of Jakub Leipzig Interview</a> <iframe src="https://visualisations.ehri-project.eu/neatline/fullscreen/jakub-leipzig-interview" width="100%" height="1000" frameborder="0"></iframe>