Embedded content in ESP

This page describes how to add a search bar, project statistics, videos, Google Earth and Google Maps files, and other types of non-textual data in ESP. See the help page on reusing Oracc content for instructions on how to embed Cuneify, texts from a corpus, and other Oracc content in your ESP pages.

Search bar | Corpus statistics | Google Earth and Google Maps | Video content | Twitter feeds

Search bar

To enable users to search across your project's site, add the following code to your ESP page:

<form method="get" action="http://oracc.museum.upenn.edu/PROJECT/find" id="PROJECT_search">
   <p>
	<span class="button">Search PROJECT  </span>
	<input class="textbox" name="phrase" id="phrase" type="text" size="14" accesskey="s" value=""/>
   </p>
</form>

Remember to replace the word PROJECT with the Oracc code for your project or subproject (e.g., saao/saa17 or etcsri). You can resize the searchbox by changing the value of the size attribute.

If you are using this code in a non-ESP website, replace <esp:link url with <a href and </esp:link with </a>.

This, for instance, is what a search box for the CAMS/GKAB project would look like:

Corpus statistics

To embed a live set of statistics about a project's corpus in your ESP page, use the following code:

<p>
   <object width="380px" height="240px" data="/PROJECT/statistics" title="PROJECT Statistics"> 
   </object>
</p>

Remember to replace the word PROJECT with the Oracc code for your project or subproject (e.g., saao/saa17 or etcsri). You can resize the embedded page by changing the value of the width and height attributes.

This, for instance, is what the DCCLT project's statistics looks like:

Google Earth and Google Maps content

Google allows people to make their own content that will display in both Google Earth (GE) and Google Maps (GM). You need a Google account to do this.

Custom Google Maps

Projects can create their own custom-made maps [link: https://support.google.com/maps/answer/62843?hl=en] via GM. Use the URL provided by Google to link directly to the map, e.g.:

<esp:link url="https://maps.google.co.uk/maps/ms?msid=204599863567827172960.0004e9e3e5e5d5b82b694&msa=0" 
rel="external">View map using Google Maps</esp:link>

An advantage of creating GM content in this way is that custom-made maps can be embedded into your portal pages.

One disadvantage though is that the content of these custom GMs is not directly editable or re-usable by website users. It is recommended that projects also save GM content in .KML or .KMZ format and make these files available for download. KML / KMZ files allow users to incorporate the GM content into their own maps, and re-use it as they wish.

For instance, the Knowledge & Power [http://oracc.museum.upenn.edu/saao/knpp/teachingresources] project created overlays of archaeological sites and tags showing place names, etc.

Embedding a Google Map

Custom-made Google Maps can also be embedded into ESP pages. Do not embed your map by copying and pasting the code provided on the Google Maps page (as it uses the non-standards-compliant <iframe> element). Instead, use the standards-compliant <object> element, as outlined in this sample code:

<p><object type="text/html" width="425" height="350"
data="https://maps.google.co.uk/maps/ms?msid=EXAMPLE&z=X&output=embed">
</object></p>

Replace the example map URL (i.e., https://maps.google.co.uk/maps/ms?msid=EXAMPLE) with that of your custom map.

Notes:

• The <object> element needs to reside inside a <p element.
• Alter the width and height of the map as required. Be aware that embedded maps are not responsive: they do not resize if the viewport width changes, so choose an appropriate maximum width. Provide a link to Google Maps to view a larger version.
• Appending &z=X to the end of the URL (where X is a number) sets the zoom level of the map. X=1 sets the zoom at the highest level.

Good articles on standards-compliant embedding include:

• http://www.masteringhtml5css3.com/standard-compliant-googlemaps-embedding-code/
• http://alistapart.com/article/byebyeembed
• http://oregonstate.edu/cws/training/faq/how-do-i-embed-google-map?page=7

Sample code for a GM/GE map

The following code gives an example of an embedded custom map, followed by a link to the same map using Google Maps, and a link to download the KMZ file.

<p><object type="text/html" width="425" height="350" 
data="https://maps.google.co.uk/maps/ms?msid=204599863567827172960.0004e9e3e5e5d5b82b694&msa=0&z=1&output=embed">
</object></p>

<p><esp:link url="https://maps.google.co.uk/maps/ms?msid=204599863567827172960.0004e9e3e5e5d5b82b694&msa=0" 
rel="external">View larger version of map using Google Maps</esp:link><br/>
<esp:link url="nd-reliefs-nw-palace-distribution.kmz" 
title="Map showing worldwide distribution of reliefs from Assurnasirpal's Northwest Palace, 
Nimrud">Download map content to view using Google Earth or re-use within your own custom maps 
(KMZ file, 7 KB)</esp:link></p>

Do not copy this code directly, as it will not work. Replace the map ID with that of your custom map.

Creating re-usable GE and GM content using .KML and .KMZ files

Providing KML or KMZ files allows website users to re-use GE and GM content within their own maps.

Create KMZ files:

• within GE; or
• by creating a custom map within GM and exporting the KML/KMZ file. (Click on the KML button next to the map to download the file.)

As technologies develop, KML and KMZ files may need updating to ensure they remain readable. Keep accessible copies of all files.

Displaying KMZ files in Google Earth

To allow website visitors to view KMZ content in GE, create a link to the KMZ file using the <esp:link> element with a relative URL, as described in the section on Links to downloadable content.

NB. If the user has GE installed on their computer, the file should automatically open in GE. If the user does not have GE installed, they will receive a prompt asking what they want to do with the file. Currently there is no means of automatically asking the user whether they want to download Google Earth.

Displaying KMZ files in Google Maps

For users who do not want to install GE, the same KMZ files will also display within a GM web page. To display the content in this way, create a link to the GM web page using <esp:link>. Append the complete location of the specific KMZ file on your webserver to the end of the URL for the GM web page.

So, to display the KMZ file entitled adian_eski_kalak.kmz that sits in the downloads folder for the site http://oracc.museum.upenn.edu/saao/knpp you would use the following URL in the element <esp:link>:

<esp:link url="http://maps.google.com/maps?q=http://oracc.museum.upenn.edu/
saao/knpp/downloads/adian_eski_kalak.kmz&t=k" 
      title="View location of Adian using Google Earth">

      View location using Google Maps

</esp:link>

Note that appending &t=k to the end of the URL forces GM to open satellite view rather than the default map view.

Example code for linking to GE and GM content

Example code showing links to Google Earth and Google Maps within a glossary definition is given below.

<esp:definition term="Adian (place)">A town in central Assyria, possibly now 
Eski Kalak.
   <esp:link url="/saao/knpp/downloads/adian_eski_kalak.kmz" title="View location of 
   Adian using Google Earth">View location using Google Earth
   </esp:link> |
   <esp:link url="http://maps.google.com/maps?q=http://oracc.museum.upenn.edu/
   saao/knpp/downloads/adian_eski_kalak.kmz&t=k" title="View location of Adian using 
   Google Maps">View location using Google Maps
   </esp:link>
</esp:definition>

Video content

We no longer recommend embedding Flash movies directly into ESP pages, as Flash is not compatible with the browsers used on most hand-held and mobile devices. Instead we recommend embedding video via Youtube.

Ask your Oracc liaison to upload Quicktime movies to Oracc's Youtube [http://www.youtube.com] channel.

Embed youtube Flash videos using standards compliant tags, using the method described at: http://www.alistapart.com/articles/byebyeembed/ [http://www.alistapart.com/articles/byebyeembed/].

The code used is:

<object type="application/x-shockwave-flash"
 data="http://www.youtube.com/v/mADrWB6F5CU&hl=en&fs=1&rel=0&showinfo=0" 
 width="425" height="344" id="VideoPlayback">
 <param name="movie" 
  value="http://www.youtube.com/v/mADrWB6F5CU&hl=en&fs=1&rel=0&showinfo=0" />
  <param name="allowScriptAcess" value="sameDomain" />
  <param name="quality" value="best" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="scale" value="noScale" />
  <param name="salign" value="TL" />
  <param name="FlashVars" value="playerMode=embedded" />
</object>

This places the video left-aligned onto the page.

NB. Added on to the end of the URL (http://www.youtube.com/v/mADrWB6F5CU&hl=en&fs=1&rel=0&showinfo=0) are two modifiers: &rel=0 means that it doesn't display the 'related videos' link, and '&showinfo=0' remove the stars and crap that youtube wants to overlay onto the video.

Twitter feeds

You need to have your own Twitter account [https://twitter.com/signup] in order to do this.

First log in to Twitter. Then:

• Go to your widgets page [https://twitter.com/settings/widgets] in Twitter and click on the Create new button in the top right corner.
• A new page will open, called "Configure a user widget". Fill in the form as you want (there is further help on a separate Twitter page [https://dev.twitter.com/docs/embedded-timelines]). In the "Domains" box, make sure you enter oracc.museum.upenn.edu.
• When you click the blue "Create a widget" button at the bottom of the page, a piece of HTML code will appear next to it, which will look something like this:
  
  <a class="twitter-timeline" data-dnt=true href="https://twitter.com/Eleanor_Robson"
data-widget-id="296639878718947328">Tweets by @Eleanor_Robson</>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)
[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.
insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  
  Copy that code and click the blue "Save changes" button.

Then use Emacs to open the ESP page in which you want to embed the Twitter feed, if it's not already open.

• Paste the code into the relevant part of your ESP page. You will now need to edit it to make it valid XML. (It is already valid HTML.)
  • Change the opening and closing a tags to esp:link.
  • Change the href attribute to url.
  • Add double quotes around any attribute values which are currently lacking them (e.g., data-dnt=true should become data-dnt="true").
  • Add a paragraph (p) element around the whole.
• Your modified code should look something like this:
  
  <p><esp:link class="twitter-timeline" data-dnt="true" url="https://twitter.com/Eleanor_Robson"
data-widget-id="296639878718947328">Tweets by @Eleanor_Robson</esp:link>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)
[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.
insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
  
  NB: do not just copy and modify the code on this page: it will not work!
• Save the ESP page. Don't worry if certain attributes of the esp:link element show up red in Emacs: that just means you are using an old ESP schema for Emacs which does not include Twitter attributes. It will not affect ESP's ability to update your website.
• When you do oracc esp you may see an error message about data-dnt, which you can ignore. However, if you see other ESP error messages which you think may be related to the Twitter code, do contact your liaison.

Ruth Horry & Eleanor Robson

Ruth Horry & Eleanor Robson, 'Embedded content in ESP', Oracc: The Open Richly Annotated Cuneiform Corpus, Oracc, 2019 [http://oracc.museum.upenn.edu/doc/help/portals/embeddedcontent/]