There are a few plugins that will add media items (images, documents, audio, and video files) to a page. The most common plugins for adding media will be Media Embed and Universal Viewer.
In order to add the media widget to your page, find it on the right pane and click the plus button. Always hit the "Save" button in order to save your work.
The Universal Viewer plugin can be used for images and text documents. For images, it is ideal for high resolution images that would benefit from a pan and zoom feature. For documents, Universal Viewer is ideal for multiple page PDFs.
Frontend View:
he fronted display has a side bar that, when clicked, will show all of the item's metadata.
The Media Embed plugin will allow you to add a single image, in various sizes and various alignments, to a page. To set the alignment of the Media Embed, open the block layout configuration pane by clicking on the cogs icon at the top right of the Media Embed plugin. To configure the Block Alignment and Text Alignment, there are drop down settings. Note, for the center alignment, change both the block and text alignment to center.
Media Embed Backend:
Media Embed Frontend:
To add a row of images on a page, add multiple files to the Media Embed plugin and use the Block Layout Configuration's Class setting to replicate the previous plugin Item Showcase (disabled in early 2025). By adding "item-showcase" to the Class setting, this will replicate an even spacing and top align images. If you'd like to make the row of images smaller and more condensed on the page, you can add "max-width-700", "max-width-800", or "max-width-900". The Alignment layout options will change the orientation of the image blocks.
Backend Media Plugin for Image Row:
Frontend Class set to "item-showcase max-width-800":
Frontend of Class set to "item-showcase" (no max-width parameters):
The Marriott Library Theme has several preset display options for the Class "item-showcase" which will allow for full height, cropped height, and boxed (creating uniform boxed sizes of images.).
Backend of Theme settings for Class item-showcase:
Boxed Item Showcase Frontend Display:
To add text over an image, this can be done with HTML. Open the source code on an HTML block and add the HTML code below with a link to the desired image from OmekaS:
<div class="section bg-cover" style="background-image: url('https://exhibits.lib.utah.edu/fileLINKTOIMAGE.jpg');">
<div class="container">
<div class="row">
<div class="col">
<h3 class="bg-cover-heading">Cat Eyes</h3>
<p class="bg-cover-subheader">and whiskers</p>
</div>
</div>
</div>
</div>
