This documentation describes how to create and maintain list widgets in Pika.
Table of Contents
Top of page
What are List Widgets?
The basic idea of a List Widget is to embed a search or list from Pika on your library homepage for display. List widgets are a seamless way to display targeted content from the catalog on your website and direct patrons to titles in the catalog directly from your library website.
Widgets embedded on webpages always display starting somewhere in the middle of the their respective sources (list or search) rather than at the very beginning/left hand side. This is by design so the results don’t appear empty on webpages.
Getting started
In order to create the List Widget, you must be signed in. Your account must have a user role of library admin or content editor. A content editor has permissions to create List Widgets, editorial reviews and Browse Categories.
Once you’re logged in, click on the List Widget link under the Pika Configuration tab.
Click on the Add New ListWidget button to create a new widget. You can also find a widget you have already created by narrowing down the search by Id, Library, or Name. You can edit existing widgets by clicking on the Edit link under Actions.
Creating a widget and widget options
Click on the Add New ListWidget button to create a new list widget. Library is a dropdown menu that limits the availability of the widget. If the widget can be used by all libraries, set it to All Libraries. If the widget is unique for your library, assign your library in this field – when you assign a specific library, only admin patrons at your library will be able to view and edit the widget. Name is used to name the widget.
Show the list widget’s title bar is used to show the title when the widget is turned on. This is the bar between the tabs and the scrolling titles. Enabling the Show More Link will force the title bar to be shown as well.
Here is an example of the Show the list widget’s title bar.
Show the View More link on the title bar of the widget controls where the View More link is shown. This will link back to the catalog with the search for more items from the tab that was chosen.
Here is an example of the View More link that shows up when the Show the View More Link on the title bar of the widget is checked.
Here is an example of an item from the list of New eBooks when the View More link is clicked.
Display mode for search results link is used to show full search results when the View More Link is checked.
Description is for internal use. You can copy and paste any search strings used to create the widget or the list ID if you’re using a list for a source.
Should the description pop-up be shown when hovering over titles? Is used when you want to have a description show when someone hovers over a title.
You can set The number of titles that should be shown for the widget.
Next, are three settings that can be chosen to show information about the items in your widget.
The 1st setting determines if a title is displayed under the item.
Here is an example of a widget that has the title listed under the item. As well as one without the title.
The 2nd setting determines if the author’s name is displayed under the item.
Here is an example of a widget that has the author listed under the item. As well as one without the author.
The 3rd setting determines if the rating is displayed under the item.
Here is an example of a widget that has the ratings listed under the item. As well as one without the rating.
The Style to use when displaying the list widget determines the overall styles you can have for the widget. Horizontal is the default style. Use the drop down menu to change the style of a list widget.
Here is an example of a Horizontal widget.
The Vertical style can be used as a sidebar feature.
Here is an example of a Vertical widget. The title, author and ratings do not show up on this type of widget. As well as an example of a Vertical widget used as a sidebar on a library homepage.
The Single Title style will display only one title.
Here is an example of the Single Title style. There are no user controls on the Single Title. If more than one title is being displayed, you should enable auto rotation so patrons can see all titles.
The Single Title with a Next Button style will display only one title, but will have user controls.
Here is an example of the Single Title with a Next Button. The user will have control to scroll through the items.
Here is an example of a library that is using multiple Single Title with a Next Button to display books, movies, music and games.
The Text Only List style will display the information without images.
Here is an example of the Text Only List.
Another setting is should the widget automatically rotate between titles. This will work on both the Horizontal, Vertical and Single Title widgets. The titles will rotate without having to be manually advanced.
The cover size to use when showing a widget has a drop down choice of Small or Medium.
Here is an example of the Small cover size on a Horizontal widget.
Here is an example of the Medium cover size on a Horizontal widget.
The Custom CSS File is for styling the widget for your website. You have to host the CSS for the widget on your website. The URL would be added to the box below Custom CSS File.
Marmot recommends that you add custom CSS for widgets on your Pika Admin page under Additional CSS. Your library account must have the Library Admin or OPAC Admin role in Pika to access these settings. You would go to Pika Configuration, Library Systems.
Click on the Library Id or Edit link to open up the settings for your library.
Click on the Basic Display tab. This applies CSS for your catalog, but Marmot also loads the styling when displaying widgets. Here is an example of what CSS looks like when displayed in the Additional CSS box.
The Display lists as is a function that determines how you display multiple lists within one List Widget. There is a Tabbed Display or a Drop Down List.
Here is an example of the Tabbed Display style which is the most common to use.
Here is an example of the Drop Down List style which gives the user the option to pick which tab they want to see.
Lists is a way to add a list to display within the widget. Click the Add New button to add a list.
Creating a List Widget from User List or adding a User List as a List Widget tab
You can also add a list to your List Widget. This is a list that you would have already created. The list must be made public in order for it to be used. Once signed in, click MY LISTS located under the My Account tab.
This will display all your lists. Click on the list that you would like to add to your List Widget.
If the Make Public button is showing, click it to make your list public. Otherwise, you will not see the Create Widget button.
Once the list has been made public, the Admin Options button will appear. Click on the drop-down menu and choose Create Widget.
The name of the tab should match your list. Click Create Widget to add the list. Any changes you make to the original list will show up in the widget. It may take 5 – 6 minutes for any changes to the list to be seen in the List Widget. You do not have to edit the list from the List Widget to make the changes.
Here is an example of a list that has been added to the List Widget.
The Lists will show the Name, Display For, and Source. The Display For has a drop down menu to change how the list will display.
Creating a List Widget from Search Results
Another way to create a List Widget can start with a Search, or use a Browse Category.
Build a search to use as the source for your List Widget. At the bottom of the page of your search results click on Create Widget (you must be logged in with your Pika admin account to see this option.
The Create a Widget box will appear. Select a widget dropdown that will stay “Create a new widget.” For the creation of a new widget, the New Widget Name/New Tab Name is displayed as the tab name or in the title bar when the widget is turned on. There is a limit of 25 titles for lists based on searches.
Once you name your new widget, click on the Create Widget button.
This will bring you to the admin page that includes all the settings for this List Widget.
You can see a Live Preview of your List Widget at the bottom of the page List Widget admin page.
iFrame Embed Code
In the widget admin page, scroll down to the Integration notes. You will see the iframe code. If the widget is finished, you can copy the html code and embed it into your library website. The width and height may need to be changed to fit on your website.
The iframe does not resize well for mobile devices.
List Widget with Resizing Embed Code
Scroll down to the List Widget with Resizing and Integration notes. Copy the entire code to use to embed into your website.
This code will resize widgets on mobile devices.
Adding multiple List Widgets to a website
You will not need all of the code for each widget. Below is an example mark-up for multiple widgets, and the inclusion of the resizing code just once.
You will need an additional Jquery line jQuery("#listWidget178").iFrameResize(); for each widget that is on the page.
<!-- Multiple Widgets placed through out Page -->
<iframe id="listWidget178" onload="setWidgetSizing(this, 30)" src="http://opac.marmot.org/API/SearchAPI?method=getListWidget&id=178&resizeIframe=on" width="650" scrolling="no"></iframe>
<!-- 2nd widget -->
<iframe id="listWidget179" onload="setWidgetSizing(this, 30)" src="http://opac.marmot.org/API/SearchAPI?method=getListWidget&id=179&resizeIframe=on" width="650" scrolling="no"></iframe>
<!-- 3rd widget -->
<iframe id="listWidget180" onload="setWidgetSizing(this, 30)" src="http://opac.marmot.org/API/SearchAPI?method=getListWidget&id=180&resizeIframe=on" width="650" scrolling="no"></iframe>
<!-- Add this code just once, adding a iFrameResize( ) line for each additional widget -->
<!-- Horizontal Resizing : Based on Iframe Content -->
<script type="text/javascript" src="http://opac.marmot.org/js/iframeResizer/iframeResizer.min.js"></script>
<script type="text/javascript">
jQuery("#listWidget178").iFrameResize();
jQuery("#listWidget179").iFrameResize(); /* 2nd widget */
jQuery("#listWidget180").iFrameResize(); /* 3rd widget */
</script>
<!-- Vertical Resizing : When Iframe is larger than viewport width,
resize to 100% of browser width - 2 * padding (in px) -->
<script type="text/javascript">
setWidgetSizing = function(iframe, OutsidePadding){
originalWidth = jQuery(iframe).width();
wasResized = false;
jQuery(window).resize(function(){
resizeWidgetWidth(iframe, OutsidePadding);
}).resize();
};
resizeWidgetWidth = function(iframe, padding){
if (padding == undefined) padding = 4;
var viewPortWidth = jQuery(window).width(),
newWidth = viewPortWidth - 2*padding,
width = jQuery(iframe).width();
if (width > newWidth) {
wasResized = true;
return jQuery(iframe).width(newWidth);
}
if (wasResized && originalWidth + 2*padding < viewPortWidth){
wasResized = false;
return jQuery(iframe).width(originalWidth);
}
};
</script>