Display of Other Media

Hello,
I have two sites, one that has PDF’s and one that has a mix of Images and music files. The PDF’s and Music files get put into Other Media at the bottom of the item page.

For the PDF’s I have installed PDF Embed, but it is not quite doing the trick, the file is a link under Other Media and displays on a separate page.

At this point, I must assume I need to tweak how the theme handles “Other Media,” which would perhaps solve the issue for both formats?

I want the music files and PDF files to display at the top, preferably in the default viewer. I have explored the Universal Viewer, but it does not handle the music files well at all. So I am exploring other possibilities.

My sites are using Omeka S, using a modified version of The Daily theme.
Sample of PDF site item https://omeka-s.bapl.org/s/wwii/item/23247
Sample of Music site item https://omeka-s.bapl.org/s/lvuma/item/259

1 Like

The tricky part here is that the gallery javascript that The Daily uses doesn’t support PDF display—it supports images, video, and iframes.

To use the default viewers for PDFs and music files, you can use this code in The Daily:

<?php if (count($otherMedia) > 0): ?>
<div id="other-media">
    <div class="media-embeds">
    <?php 
    foreach ($itemMedia as $media) {
        echo $media->render();
    }
    ?>
</div>
<?php endif; ?>

Hi Kim,
thank you so much or your help. Just one more thing, which file gets this code bit and where it is from here?

Perhaps, Layout?
image

Thanks

You’ll want to look at /view/omeka/site/item/show.phtml.

Nope, no joy. Perhaps I am not inserting it right, but once I put that in the whole installation went into out. It gave the white screen of death and said Omeka had encountered an error. Once I took it out, it was fine again.

<?php $escape = $this->plugin('escapeHtml'); $this->htmlElement('body')->appendAttribute('class', 'item resource show'); $this->headScript()->prependFile($this->assetUrl('js/lightslider.min.js')); $this->headScript()->prependFile($this->assetUrl('js/lightgallery.min.js')); $this->headLink()->prependStylesheet($this->assetUrl('css/lightgallery.min.css')); $this->headLink()->prependStylesheet($this->assetUrl('css/lightslider.min.css')); $lightMedia = []; $otherMedia = []; $sortedSubjects = []; $subjectValues = $item->subjectValues(); ?> <?php foreach ($item->media() as $media): ?>
<?php $mediaType = $media->mediaType(); ?>
<?php $mediaRenderer = $media->renderer(); ?>
<?php if ((strpos($mediaType, 'image') !== false) || (strpos($mediaRenderer, 'youtube') !== false)): ?>
    <?php $lightMedia[] = $media; ?>
<?php else: ?>
    <?php $otherMedia[] = $media; ?>
<?php endif; ?>
<?php endforeach; ?> <?php echo $this->pageTitle($item->displayTitle(), 2); ?>

<?php echo $this->translate('Item'); ?>

<?php $this->trigger('view.show.before'); ?> <?php if ($item->media()): ?>
    <?php foreach ($lightMedia as $media): ?> <?php $source = ($media->originalUrl()) ? $media->originalUrl() : $media->source(); ?>
  • <?php echo $media->render(); ?>
  • <?php endforeach; ?>
<?php endif; ?> <?php echo $item->displayValues(); ?> <?php if (count($otherMedia) > 0): ?>

<?php echo $this->translate('Other Media'); ?>

<?php foreach($otherMedia as $media): ?>
<?php echo $media->linkPretty(); ?>
<?php endforeach; ?>
<?php endif; ?> <?php if (count($otherMedia) > 0): ?>
<?php foreach ($itemMedia as $media) { echo $media->render(); } ?>
<?php endif; ?>
<?php $itemSets = $item->itemSets(); ?> <?php if (count($itemSets) > 0): ?>

<?php echo $this->translate('Item sets'); ?>

<?php foreach ($item->itemSets() as $itemSet): ?> <?php endforeach; ?> <?php endif; ?>
<?php $page = $this->params()->fromQuery('page', 1); $property = $this->params()->fromQuery('property'); $subjectValues = $item->displaySubjectValues($page, 25, $property); ?> <?php if ($subjectValues): ?>

<?php echo $this->translate('Linked resources'); ?>

<?php echo $subjectValues; ?>
<?php endif; ?> <?php $this->trigger('view.show.after'); ?>

Sorry, I had a typo in there. Where it says $itemMedia it should say $otherMedia.

<?php if (count($otherMedia) > 0): ?>
<div id="other-media">
    <div class="media-embeds">
    <?php 
    foreach ($otherMedia as $media) {
        echo $media->render();
    }
    ?>
</div>
<?php endif; ?>
1 Like

Yay, this working!

Just a two more tweaks, I think.

  1. They are appearing at the bottom, so I need to figure out how to move them to the top.

  2. Music files don’t show any metadata, (title at the very least would be great)
    Here is how it shows on the item page

Here is the media page on the backend, may be I don’t have the info in the right place?

  1. Try moving that block of code before <?php echo $item->displayValues(); ?> to make that media render after the image gallery and before the metadata values.

  2. The default audio player does not have a means to display track information, so I would manually include that in nearby markup. So you’d modify the previous block I gave you this way:

<?php if (count($otherMedia) > 0): ?>
<div id="other-media">
    <div class="media-embeds">
    <?php 
    foreach ($otherMedia as $media) {
        echo '<h5>' . $media->displayTitle() . '</h5>';
        echo $media->render();
    }
    ?>
</div>
<?php endif; ?>

Yes, thank you!

One last thing. The player is displaying the media at the top now as desired, but there is still the Other Media output at the bottom of the page.

Can this be hidden?

See link:
https://omeka-s.bapl.org/s/lvuma/item/259

Just in case, here is the whole code.

<?php $escape = $this->plugin('escapeHtml'); $this->htmlElement('body')->appendAttribute('class', 'item resource show'); $this->headScript()->prependFile($this->assetUrl('js/lightslider.min.js')); $this->headScript()->prependFile($this->assetUrl('js/lightgallery.min.js')); $this->headLink()->prependStylesheet($this->assetUrl('css/lightgallery.min.css')); $this->headLink()->prependStylesheet($this->assetUrl('css/lightslider.min.css')); $lightMedia = []; $otherMedia = []; $sortedSubjects = []; $subjectValues = $item->subjectValues(); ?> <?php foreach ($item->media() as $media): ?>
<?php $mediaType = $media->mediaType(); ?>
<?php $mediaRenderer = $media->renderer(); ?>
<?php if ((strpos($mediaType, 'image') !== false) || (strpos($mediaRenderer, 'youtube') !== false)): ?>
    <?php $lightMedia[] = $media; ?>
<?php else: ?>
    <?php $otherMedia[] = $media; ?>
<?php endif; ?>
<?php endforeach; ?> <?php echo $this->pageTitle($item->displayTitle(), 2); ?>

<?php echo $this->translate('Item'); ?>

<?php $this->trigger('view.show.before'); ?> <?php if ($item->media()): ?>
    <?php foreach ($lightMedia as $media): ?> <?php $source = ($media->originalUrl()) ? $media->originalUrl() : $media->source(); ?>
  • <?php echo $media->render(); ?>
  • <?php endforeach; ?>
<?php endif; ?> <?php if (count($otherMedia) > 0): ?>
<div class="media-embeds">

<?php 

foreach ($otherMedia as $media) {

    echo '<h5>' . $media->displayTitle() . '</h5>';

    echo $media->render();

}

?>
<?php endif; ?> <?php echo $item->displayValues(); ?> <?php if (count($otherMedia) > 0): ?>

<?php echo $this->translate('Other Media'); ?>

<?php foreach($otherMedia as $media): ?>
<?php echo $media->linkPretty(); ?>
<?php endforeach; ?>
<?php endif; ?>
<?php $itemSets = $item->itemSets(); ?> <?php if (count($itemSets) > 0): ?>

<?php echo $this->translate('Item sets'); ?>

<?php foreach ($item->itemSets() as $itemSet): ?> <?php endforeach; ?> <?php endif; ?>
<?php $page = $this->params()->fromQuery('page', 1); $property = $this->params()->fromQuery('property'); $subjectValues = $item->displaySubjectValues($page, 25, $property); ?> <?php if ($subjectValues): ?>

<?php echo $this->translate('Linked resources'); ?>

<?php echo $subjectValues; ?>
<?php endif; ?> <?php $this->trigger('view.show.after'); ?>

You’ll want to delete this section:

<?php if (count($otherMedia) > 0): ?> 
    <?php echo $this->translate('Other Media'); ?>
    <?php foreach($otherMedia as $media): ?>
        <?php echo $media->linkPretty(); ?>
    <?php endforeach; ?>
<?php endif; ?> 

Thank you so much! That has addressed all the issues I brought up perfectly.

In the process, I have encountered another issue, regarding video files in this case. However, I will open a new topic for that.