Skip to Main Content

FL-Islandora Guide: Advanced Date Range Slider

A guide for FL-Islandora users.

Introduction

Creating a Date Range Slider allows a site to include a facet for date field(s) that presents itself as a range slider. When a users slides the Date Range Slider items within those dates appear.

 

Screenshot of Date Range Slider with green arrows pointing to it on a Islandora 2 front page

How to Add a Date Range Slider

1.  Logged in, hover the mouse on Configuration go down to Search and Metadata and hover the mouse and click on Search API.

Screenshot of Configuration menu with green arrows pointing to Search and metadata and Search API

2.  Click the Edit button to the right of Default Solr content index.

 

Screenshot of Search API page with green arrow pointing to Edit for Default Solr content index

3.  Click on Processors. Next Make sure EDTF Year is Enabled under Enabled.

Screenshot of Manage processors for search index page with green arrows pointing to Processors and EDTF Year check box

4.  Scroll down to the bottom under the Processer settings on the EDTF Year tab. In the Fields box, on your keyboard click the Ctrl button and select the Fields you like. For example select the following: Date (Unspecified) (node:Islandora_object), Date Created (node:Islandora_object) and Date Issued (node:Islandora_object). Keep the Ignore boxes as the defaults. Keep the Open Interval boxes as the default. Click the Save button.

Screenshot of bottom of Manage processors for search index page with green arrows pointing to Save and other items.

5.  Next Hover your mouse over Configuration and go down to Search and metadata. Click on Facets.

Screenshot of  Configuration menu with green arrows pointing to Configuration, Search and metatdata and Facets

6.  Click on the +Add facet button.  

Screenshot of Facets page with green arrow pointing to Add facet button

7.  In the next screen, select from the Facet source drop-down menu View Solr search content, display Search Page. A Field box shows up. Select the Field that you created in a previous step, EDTF Creation Date Year 1 (edtf_year). The Name will appear in the Name box.  Click the Save button.

Screenshot of Add facet page with green arrows pointing to various items.

8.  Next the facet configuration screen will appear.  Under Widget at the top, select Range slider by clicking in the circle next to it. The Range slider settings will appear in the box just below it. You can keep the Minimum value type and Maximum value type at the default settings. You can keep the slider step at the default. Under Facet settings, select Hide facet with 1 result. Select Range slider. Select Slider. Deselect “Hide facet when facet source is not rendered”.  You can keep the rest of the items under Facet settings as the defaults. Under Facet sorting click to deselect all the items. Next click the Save button.

Screenshot of Facet configuration with green arrows pointing to various items to configure

Screenshot of Facet Config page with green arrows pointing to Facet settings

Screenshot of Facet Config page with Green arrow pointing to Range Slider box, Slider box and Hide facet box.

Screenshot of Facet config page with more configurations

Screenshot of Facet config page with green arrows pointing to Facet sorting boxes and green arrow pointing to Save button

9.  Next hover your mouse on Structure and select Block Layout.  

Screenshot of Structure menu with Green arrow pointing to Block layout

10.  Scroll down to the region that you want to place the facet block in. For example, scroll down to Sidebar and click Place block.

Screenshot of Block layout page

Screenshot of Block layout page with green arrow pointing to Place block next to Sidebar

11.  On the Place block pop-up-window, start typing edtf in the Filter by the block name box.  Click Place block next to block.

Screenshot of Place block page with green arrow pointing to edtf in search box

12.  In the Configure block window, edit the Title by clicking in the Title box if desired. I changed the title to Date Range Slider so people will know what it might do. Keep the defaults unless adventurous.  

Screenshot of Configure block page with green arrow pointing to Title box

Screenshot of Configure block page with green arrow pointing to Pages

For Pages I changed it to just appear on the home page by typing <front>.

Screenshot of Configure block page with green arrow pointing to front in the Pages box

Make sure in the Region it shows the block area that you chose in step 10. For example Sidebar. Click the Save block button.  

Screenshot of Configure block page with green arrows pointing to Region Sidebar and Save block

13.  Back on the Block layout page, scroll down to the bottom of the Block layout page and click the Save blocks button.

Screenshot of Block layout page with green arrow point to Save Blocks button

14.  Next, click Back to site in the upper left of window.

Screenshot of Block layout page with green arrow pointing to Back to site

15.  Now the Date Range Slider shows up.

Screenshot of Date Range Slider with green arrow pointing to it

Screenshot of Date Range Slider with green arrows pointing to it on a Islandora 2 front page

 

16.  To test, slide the slider and an item(s) with the date range shows up.

Screenshot of  Date Range Slider with green arrow pointing to right side slide handle showing 1917

Screenshot of a Gee Whoa book and Watercolour of a cat cleaning with green arrows pointing to dates