Libnamic is a company specialized in developments with Omeka S, our clients are Universities and Research Centers around the world.
Although Omeka offers a large number of possibilities, there are not many themes that allow improving its visualization. So from Libnamic we have developed this little theme (Bootstrap Theme for Omeka S). Feel free to use it and modify it to your needs. Comments are welcome too!
Our theme
Technical specifications (with Omeka S=>V. 2.1.2)
| Boostrap Version | Icons system | JS Dependencies |
| 4.3.1 | FontAwesone Icons | JQuery 3.2.1 |
Firsts steps to add Bootstrap to Omeka S
On the file layout.phtml, you need to add the external dependencies through insert this lines of code:
$this->headLink()->prependStylesheet('//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic,700');
$this->headLink()->prependStylesheet('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
Main desing with boostrap
Bootstrap, it’s simple, works by adding classes to html tags so we must lay out the html of our project.
The first step is to configure the body to center and dimension all the views:
<body class="mt-auto col-10 m-auto">
<footer class="page-footer font-small blue pt-4 m-5">So, you can rewrite Omeka S code, for add the css class on the files view that you need. It’s easy, only add the file to File’s Directory, save the app’s estructure:
On other hand, you could inject code html, css from the administration panel, so you can personalize each section.
For The example, you could add one Bootstraps’s carrousel of Photographs by the following way (Remember previously you must configure the bootstrap dependencies):
Main page appearance
Our propposall, show a Omeka S with this aspect: nvabar, a center slider with several images and card blocks for the news.
Contact form
One of the most common options is to have a contact form, with boostrap is easy to implement in Omeka:
ItemSets page
For the ItemSets view, we add a table for improve the items-set display. The code to insert in the view is:
<?php $this->trigger('view.browse.before'); ?> <table class="table">
<thead>
<tr>
<th scope="col">Thumbnail</th>
<th scope="col">Title</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr class="resource-list m-5">
<?php
$headingTerm = $this->siteSetting('browse_heading_property_term');
$bodyTerm = $this->siteSetting('browse_body_property_term');
foreach ($itemSets as $itemSet) :
$heading = $headingTerm ? $itemSet->value($headingTerm, ['default' => $translate('[Untitled]')]) : $itemSet->displayTitle();
$body = $bodyTerm ? $itemSet->value($bodyTerm) : $itemSet->displayDescription();
if ($media = $itemSet->primaryMedia())
$thumbnail = $media->thumbnailUrl('medium');
$thumbnail = $itemSet->thumbnail();
?>
<tr class="item-set resource">
<td class="col-3">
<img class="resource-list img-fluid" width="400px" src="<?= ($thumbnail->assetUrl()) ?>">
</td>
<td class="col-3"><?php echo $itemSet->link($heading); ?></td>
<?php if ($body) : ?>
<td class="description"><?php echo $body; ?></td>
<?php endif; ?>
</td>
<td class="col-3"><?php echo $itemSet->link($heading); ?></td>
<?php if ($body) : ?>
<td class="description"><?php echo $body; ?></td>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>It is visualized in this way:
Get Bootstrap Theme for Omeka S
- You can watch the theme in live here.
- And the source code here: Github profile