Using Omeka.net for digital exhibits: Layout and Simple Pages

Use digital exhibits to support work in public history, digital humanities, present special collections and archives research and more!

Layout and Simple Pages

Right now, in the example site being built for this guide, there isn't much customization for how the front page looks. It shows the user recently added items by default, and there are a couple options to browse collections and exhibits associated with the site.

Generic Omeka.net site

If I want to add an introductory essay, or feature my items in a different way, I want to customize the look of my site further. 

On the Omeka.net dashboard, I'm going to click on the theme option, in this case "Berlin" in order to change my site appearance and navigation.

Omeka.net Dashboard

On the appearance tab, notice the options for navigation and settings. You can also choose to use the "Seasons" theme from the Theme tab. Here, you also have the option to select a homepage other than the default, and you can turn off some of the default browse options for items, collections, and exhibits, if you would prefer to have a different type of homepage.

Navigation options Omeka.net

Adding Pages

Here's an example of what you can do to add a new homepage for your site. From the navigation bar, select Simple Pages and add a new page.

Add a web page

If you want to add extra html markup to your new web page, check the box that says Use HTML editor?

Omeka.net Simple page

Shortcodes

Omeka.net supports a syntax called shortcodes, which lets you add references to your exhibit content into your Simple Pages. If I want to add a reference to this item, I can see that it is item number 10 based on the URL (https://bookposters.omeka.net/items/show/10) and I can make a short code for it if I want to reference the item in my page.

[items ids=10]

Short codes are great when you need to embed items that you’ve uploaded to Omeka, such as a single item, a collection of items, or a set of items with a particular tag.

Short Code Examples (taken from http://info.omeka.net/build-a-website/shortcodes/):

Try it! Create a simple page and embed one or more of your items, following this syntax:

  • Embed one item: [items ids=13]
  • Embed multiple, selected items: [items ids=10,76,432]
  • Embed items from a particular collection: [items collection=7]
  • Embed items with a particular tag(s): [items tags=baseball,math]

HTML Markup

Tip: When you want to edit html tags, click the html button at the top of your page’s editing window

Paragraph
<p>This is a paragraph</p>

Link
<a href=”http://collections.lib.utah.edu”>Marriott Library Digital Collections</a>

Image
<img src=”myimageishere.jpg” alt=”This is alternative text that describes my image, and makes it more accessible”>

Embedding Images through HTML markup

You can get a different type of effect if you want to link to images using HTML markup. Click on the < > Source code button in the editing window for your page in order to try this out.

You need to find the URL for the image location where Omeka.net is storing your image in order to do this. Here's the first screen for the item I want to link to:

Finding an image to embed

Click on the thumbnail image for a bigger version.

 

Click once again until you get to a screen with just the image and a black background. Copy the very long URL at the top of the screen.

 

When you go back to your simple page, click on the html markup option or source code option < >

Source code button

Insert the image like this:

<img src="https://s3.amazonaws.com/omeka-net/40181/archive/files/c51f9f27b3dd92785b3a1f3cd5d2992b.jpg?AWSAccessKeyId=AKIAI3ATG3OSQLO5HGKA&Expires=1537468191&Signature=vN0r8R%2B32bZzZKIcEG7EcNXfaho%3D" width="250px" align ="left" hspace="10"/>

The elements highlighted in bold are pieces of the html markup needed to type in myself to get this effect. This results in an image embedded into the page that is 250 pixels wide, aligned to the left of the page, with a 10 pixel padding around the image.

Embedding an image with html markup

 

Setting a new homepage for your site

With the new page I've just created, I can adjust the settings and appearance of my site. Click on the name of your site theme, and go to the navigation tab. There are many options.

Appearance tab in Omeka.net

 

Here's an example of an adjustment to make, taking off a couple of the browse options and selecting a custom homepage from the bar on the side.

New homepage

New look for the Omeka.net site

The site now has a different theme and navigation. These can be adjusted at any time from the Appearance section of Omeka.net

new site look

Embedding content from other sites into your exhibit

There might be other types of content that you wish to include in your exhibit, such as a video produced by someone else on your topic, or a map created on a subject that interests you. In most cases, you can look for embed code that will allow you to incorporate this external resource.

Embedding a YouTube video

Look for the Share button at the bottom of the screen

youtube embed

Choose the option to embed the video, and copy the iframe code

youtube video embedding

 

Go back to your Omeka.net simple page, and click on the source code option < >. Paste the embed code into the area of your page where you would like the video to show up.

youtube embedding into omeka.net

Embedding a Google Map

From your map, go to “Embed on my site” in the top corner

Google map embed

 

Copy the embed code to add to your page, in the source code area

google map embed code

Marriott Library Eccles Library Quinney Law Library