Thumbnails for pages within Exhibits

Hi there, I am wondering if there is any way to display thumbnail images for the list of pages within an Exhibit, in the same way that the list of Exhibits within Browse Exhibits has the option of displaying the first image as a thumbnail beneath the title? Many thanks, Rosalee

It looks like in theory it is possible, but only with some custom code. What that code might look like will depend a little on what page(s) you want this to work on -- that'll give the starting point for digging up the data.

In a nutshell, it'll probably be digging up the attachments (Items) for each ExhibitPage and deciding which files for those Items to display. The big starting question, at least from what I'm seeing now, is how to get to the starting point of the ExhibitPage data, which could vary based on the page.

Thanks Patrick! I'm creating a site for a researcher which is currently not public - it has access restrictions until it goes live next month. Do I need to get you access in order for you to see whether it's do-able?

Probably not, unless it's pages that were created from scratch yourself. If it's pages based on one of the 'standard' Omeka themes, just knowing the page (e.g., exhibit show page, exhibit page page, the homepage, etc -- example URLs will generally indicate what kind of page it is).

If this is something specially created for your site, say, a completely rewritten homepage, then the access _might_ help, but code and/or specifics will likely suffice. Something like 'on X page I'm already displaying ______, and want to add the images'

Ah, so it's just a standard Omeka theme page (Berlin) that I have customised slightly, but the changes are to the css only. The page is at exhibits/show. Currently it displays the list of pages within the exhibit, and we just want to add an image from each of these pages (perhaps the first of each?) beneath the name of each page title.

That will be a little trickier, since that's part of exhibit builder's navigation system, which makes it a little harder to get at the data. I _think_ still possible, but will take a little more digging

So, here's one approach to it. It requires hacking the Exhibit Builder plugin (there's a way around that, but at the cost of more complexity, so I'll set that aside for now). If you are okay with keeping track of this change as ExhibitBuilder gets new releases it should be fine. I'd recommend updating to the latest ExhibitBuilder release before adding this hack.

In ExhibitBuilder plugin, open the file views/helpers/ExhibitPageTree.php, and look for the function _renderPageBranch, around line 58.

Replace that function with the following:

protected function _renderPageBranch($page, $currentPage, $ancestorIds)
    {
        //hack in getting the first file for a page
        $db = get_db();
        $fileTable = $db->getTable('File');
        $select =
            $fileTable->getSelect()
            ->joinInner(
                array('eba' => $db->ExhibitBlockAttachment),
                'eba.file_id = files.id',
                array()
            )
            ->joinInner(
                array('epb' => $db->ExhibitPageBlock),
                'epb.id = eba.block_id',
                array()
            )
            ->where('epb.page_id = ?', $page->id)
            ->where('files.has_derivative_image = 1')
            ->order(array('epb.order', 'eba.order'))
            ->limit(1);
        $file = $fileTable->fetchObject($select);
        // if the page doesn't have a file, don't try to render it
        if($file) {
            //see http://omeka.readthedocs.org/en/latest/Reference/libraries/globals/file_image.html for file image usage
            $fileImage = file_image('square_thumbnail', array(), $file);
        } else {
            $fileImage = '';
        }
        // end hacking in getting the first file for a page
        if ($currentPage && $page->id === $currentPage->id) {
            $html = '<li class="current">';
        } else if ($ancestorIds && isset($ancestorIds[$page->id])) {
            $html = '<li class="parent">';
        } else {
            $html = '<li>';
        }

        $html .= '<a href="' . exhibit_builder_exhibit_uri($this->_exhibit, $page) . '">'
              . $fileImage //add the hacked-in file image to the navigation
              . metadata($page, 'title') .'</a>';
        if (isset($this->_pages[$page->id])) {
            $html .= '<ul>';
            foreach ($this->_pages[$page->id] as $childPage) {
                $html .= $this->_renderPageBranch($childPage, $currentPage, $ancestorIds);
            }
            $html .= '</ul>';
        }
        $html .= '</li>';
        return $html;
    }

The changes add in digging up a file for the page and adding it to the navigation. You'll want to fix the styling so the images are a reasonable size. That CSS and $props array in file_image are left as an exercise for your theme. ;)

Note that this change will affect the navigation on all pages. Thus, when you go down to a page within an exhibit that also shows the navigation, the changes will appear there, too.

Hi Patrick, thanks so much for this!

I have tried this code on a test site that I upgraded to the latest version of Omeka and it doesn't show any images though. I just get the title of the Exhibit and the description, with nothing underneath (i.e. the list of page links disappear also). Any idea what might be going wrong? I put the snippet into views/helpers/ExhibitPageTree.php as you instructed.