The Different Types of "Blocks"
The following shows you the different types of blocks (or modules) that you can use to build a page in Omeka, which gives you flexible possibilities to create different layouts on any page you create in your site. The blocks are located on the right of the editing view of a page. You should see a little plus "+" icon next to each option. When you click on one, it will automatically stack to the bottom of the page, but you can re-order the blocks any way you'd like by clicking on the 3 lined icon at the top left corner of the block and dragging up or down. Now let's take a look at each block...
HTML
This is your basic "Wisywig" or word processing editor, where you'd put the bulk of your text. Here are some things you can do with the HTML editor:
Headings
Select different sized (and colored) headers from the dropdown in tools. "Normal", "Heading 1", "Heading 2", "Heading 3", etc. Remember, what you see in editing view won't neccessarily look like what it will when it's on the live page. For instance, "heading 5" is programmed to be a colored font on the live page, but in editing view, it will just look dark grey.
-
This is Heading 1
-
This is Heading 2
-
This is Heading 3
-
This is Heading 4
-
This is Heading 5
Quote
If you'd like to add style to a quote as a way to break up a page from monotomous same-styled font, you can use the Quote button in the tools bar. It will automatically put quotes around a block of text and it will appear as follows:
This is a quote that I would like to stand out in my boring sea of text.
Similarly as you might find in a magazine layout, you can see the differnece between the above format, and the example below, which just shows up as indented text:
This is a quote that I would like to stand out in my boring sea of text.
The above example was accomplished by going to the styles dropdown in the tool bar, and selecting "inline quotation".
Styles
There are other style options such as the following:
This text has a style of "typewritter".
This text has a style of deleted text.
This text has a style of "subtitle".
Media Showcase Slider:
Use this block when you want to present a slide show gallery. The thumbnails will present as a showcase, but when you click on each one, it will open up in a "light box" full screen so you can view the images at their maximum size. This is also mobile friendly, so the user can easily scroll through each image. The options include the size at which you want to display the thumbnails, and whether you want to display the item title, media title, or no title. You may also include a caption if you wish. Example below.
The Third Temptation
Isis Muller
Showcasing Student Work
From the Blake@Union exhibit, 2018.
Etching by Jacquelin Mason
Blake@Union
Image / Item (formerly "Image Options"):
This will be your main go to for displaying images / items (and audio files, PDFs and videos). This gives you a variety of display options, including size, location and how it links when clicked on. Sometimes, you might come across a situation where you would like to display an image, but you don't want it to neccessarily link to anything. Perhaps you just want an image with a caption in a paragraph. OR, what if you want the images to display like the Item with Metadata block, but you want the images to actually link to the same URL that's in the item tite's URI field? (refer to this page for creating items in the system). This is where you would use the Image / Item block.
This is a caption under a large thumbnail of this image, displayed to the left, link image to "none".
See Prize Announcement above.
This is contained in an HTML block for which you can write your paragraph. In the backend, this block comes after (below) the Images Options block, so that you get the resulting image to the left, and the text to the right like this. In this example, I chose to display the image to the left, with no title, and without it linking to anything. The caption is created by typing in the caption field in the attachment window of the backend. (see screenshot). You could also display an image / item block to the right as well, and as a medium sized thumb, or a square shaped thumbnail, as shown. It is also displaying the item's title, and I have it linking to the item page as well. Note: in order to keep the right image nice and flush with the top of the text, you'd want to list the Image blocks before (on top of) the HTML block.
Using a PDF: The right bottom image is an example of a good way to embed a PDF on your webpage. Use this Image / Item block and choose an attachment that is a PDF file and choose "link image to original". This will link directly to the PDF so the user can view it full size, or print if they need to.
View the page editing backend to this example, editing the caption in the Image Options block.
Omeka Screen Shot
Linking to an outside URL
Here is another way to use the Image / Item block. It looks similar to the Item Showcase block, but in this example, I chose for the images to link to "relation". This means that the images will link to the same URL that was created in the item's (dc:terms) "relation" field, which is "view this collection" in this example. Many times this might be an outside link that you'd like the user to visit. The "link to relation" will only work if this particular field was created for an item.
Also, I chose "yes" to "show metadata" in the options of this block. This is how we are seeing these items' fields, such as the title and the uri of "view this collection" in this example. In the Blake example, the extra text of "Vist the Blake website" is coming from the caption field that exists on the attachment option when you are editing the page. If you want to add, edit, or delete the caption, you would click on the wrench icon of the attachment in the block.
Tip: Always remember to click "apply changes" at the bottom. This can be easily missed!
The Image / Item block below displays what it looks like when the thumbnail type = square, display = showcase, attachment title = no title, link image to = item, and metadata = no, and show labels = no.
The Image / Item block below displays what it looks like when the thumbnail type = large, display = showcase, attachment title = media title, link image to = relation, and metadata and labels are not shown.
Blake@Union exhibit
DC-Bigelow-Letters.jpg
Adams Express Company receipt, September 25th, 1863.
The Image / Item block below displays what it looks like when the thumbnail type = medium, display = showcase, attachment title = no title, link image to = original, and metadata and labels are turned on.
The Image / Item block below displays what it looks like when the thumbnail type = medium, display = showcase, attachment title = no title, link image to = item, and metadata = yes but labels = no.
Title
Description
Exhibition dates
Visit website
Title
Type of Collection
Description
Exhibition dates
Visit website
Title
Type of Collection
Description
Exhibition dates
Visit website
TIP: If you have an item with a lot of metadata that you would like to display but not have it smushed into a little column, then select only one attachment per block, and that item will display as follows:
Title
Student Commentary:
Links:
Below is the item same from above, except that "Show labels" is checked to yes. This displays the metadata labels in the colored bars as seen here.
Page Banner & Spotlight
A way to add more visuals to your website, this block will add a banner underneath the main one on the website. This might prove useful if you are featuring an exhibit or a particular subject that could benefit from the extra visual. The spotlight is an optional part of this block, which is a very useful way to highlight a date range for an exhibit or event featured on the page. See an example as used on the Frankenstien exhibit page here.
TIP: In order for the page banner & spotlight to position at the top of the page in the example above, the block must be positioned at the TOP and first block listed in the admin interface. Otherwise, you'll notice the spotlight will appear further down the page (although this might be desirable in some cases).
Tag Cloud
You can show the tag words associated with the site's items or itemsets in a visual way. The more popular a tag is, the larger the text will appear in the cloud. This may add an interesting component to your site's interactivity, to get users to explore your site's work.
**Important: when left alone, the tag cloud page block will automatically show all of the resources that you currently set on your site. You can add item sets from other sites - BUT YOU MUST ALSO select that item set in the site's resources tab, otherwise they won't show up in your tag cloud.
Table of Contents
This is used when you'd like to display a list of pages that are nested under a particular page in the navigation. A good use case senario for this is when you'd like to display an archive of pages such as a "past exhibitions" page, as seen on the Exhibitons @ Schaffer Library site.
To see more of an explanation of this, refer to "adding pages to the navigation" here.
Asset
This gives you the ability to add a new asset or select an already existing one from the system's "asset" pool. This is a different area from where you add an item. In the past, the assets have included files such as banner images when it comes to chosing one in your theme settings. Though now, you can select or even add a new asset via the "asset" page block for the purpose of linking it to a page in your site! You have the ability to caption it as well.
List of Pages
This gives you the ability to add a bullet list of select pages within your site. You already have a top navigation, but perhaps you'd like a page to include some other links that you chose not to include in your top navigation.