OMP featured books look

Hi,

I looked at OMP demo at http://omp.sfu.ca/present/index.php/aup-demo, and I like the way the featured books are shown, as well as the list for categories and series, but I can’t find those options in my OMP. Is it a custom development?, Is it available as a plugin or something like that?

Thank you very much in advance.

Hi @DiegoG,

We’ve abandoned the carousel display in recent versions of OMP and do not have any plans to restore it. Carousels (sometimes called sliders) present accessibility problems and UX studies have found that users don’t really engage with them. Many of the big media organisations which pioneered their use in the mid-2000s (CNN, BBC) have since moved away from them, and there’s a general consensus within the design community that they are an anti-pattern when used as a hero element like this.

If you still want to implement a carousel, you’ll need to create a custom theme. You’ll need to be able to write the code for the display, using our theming guide, or hire a developer who can do this for you.

Thank you very much.

I guess the same applies for the drop-down lists for categories and series, I should try the theming for the lists?

Yes, if you want drop-down lists you’ll need to use a custom theme for this. We abandoned them because the navigate-on-select pattern has accessibility issues.

Again, thank you very much.

I tried to take series and categories into drop-down lists trough theming, but I couldn’t as long as they are shown using a block plugin, so I just made a new block plugin changing the block.tpl file of Browse plugin. I just placed “select” tags as in the old code.

Here is the block.tpl code in case someone want to try it, despite the accessibility issues:

{**
 * plugins/blocks/browse/block.tpl
 *
 * Copyright (c) 2014-2017 Simon Fraser University Library
 * Copyright (c) 2003-2017 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * @brief Common site sidebar menu for browsing the catalog.
 *
 * @uses $browseNewReleases bool Whether or not to show a new releases link
 * @uses $browseCategoryFactory object Category factory providing access to
 *  browseable categories.
 * @uses $browseSeriesFactory object Series factory providing access to
 *  browseable series.
 * 
 * Some changes were made by Diego Andrés Gil Rincón in order to use drop-down lists 
 * using recycled code from old versions of OMP, droped due to accessibility problems
 *}
<div class="pkp_block block_browse">
	<span class="title">
		{translate key="plugins.block.browse"}
	</span>

	<nav class="content" role="navigation" aria-label="{translate|escape key="plugins.block.browse"}">
		<ul>

			{if $browseNewReleases}
				<li>
					<a href="{url router=$smarty.const.ROUTE_PAGE page="catalog" op="newReleases"}">
						{translate key="navigation.newReleases"}
					</a>
				</li>
			{/if}

			{if $browseCategoryFactory && $browseCategoryFactory->getCount()}
				<li class="has_submenu">
                	{translate key="plugins.block.browse.category"}
					<select class="applyPlugin selectMenu" size="1" name="browseCategory" onchange="location.href=('{url|escape:"javascript" page="catalog" op="category" path="CATEGORY_PATH"}'.replace('CATEGORY_PATH', this.options[this.selectedIndex].value))" style="max-width:100%;">
                        <option disabled="disabled"{if !$browseBlockSelectedCategory} selected="selected"{/if} style="max-width:100%;"></option>
                        {iterate from=browseCategoryFactory item=browseCategory}
                            <option {if $browseBlockSelectedCategory == $browseCategory->getPath()}selected="selected"{/if} value="{$browseCategory->getPath()|escape}" style="max-width:100%;">{if $browseCategory->getParentId()}&nbsp;&nbsp;{/if}{$browseCategory->getLocalizedTitle()|escape}</option>
                        {/iterate}
                    </select>
				</li>
			{/if}

			{if $browseSeriesFactory && $browseSeriesFactory->getCount()}
				<li class="has_submenu">
                	{translate key="plugins.block.browse.series"}
					<select class="applyPlugin selectMenu" size="1" name="browseSeries" onchange="location.href=('{url|escape:"javascript" page="catalog" op="series" path="SERIES_PATH"}'.replace('SERIES_PATH', this.options[this.selectedIndex].value))" style="max-width:100%;">
                        <option disabled="disabled"{if !$browseBlockSelectedSeries} selected="selected"{/if}  style="max-width:100%;"></option>
                        {iterate from=browseSeriesFactory item=browseSeriesItem}
                            <option {if $browseBlockSelectedSeries == $browseSeriesItem->getPath()}selected="selected"{/if} value="{$browseSeriesItem->getPath()|escape}"  style="max-width:100%;">{$browseSeriesItem->getLocalizedTitle()|escape}</option>
                        {/iterate}
                    </select>
				</li>
			{/if}

		</ul>
	</nav>
</div><!-- .block_browse -->
1 Like