Create a grid layout

Managed by | Updated 6 years ago.

Prerequisites

• Collection has been crawled.      
• Completed How-to-Guide: Customise a search result.      
• Understanding of the Freemarker Templating Language.      
• Understanding of the Funnelback data model.      
• Download this file resultColumns.ftl.      
• Download this file result.ftl.      

Objective

Customise a search result layout to be displayed within a grid.

Steps

1. Upload result.ftl & resultColumns.ftl

1. Load the Funnelback administration interface and select the the collection (search interface) you would like to customise.      
2. Open the file manager.
   
   1. Select Administer tab > Browse Collection Configuration Files
3. Upload result.ftl file.
   
   1. Under Presenation (preview) section select Choose File and select the         result.ftl file saved on your computer.      
4. Upload resultColumns.ftl file.
   
   1. Under Presenation (preview) section select Choose File and select the resultColumns.ftl file saved on your computer.      

2. Import Result Template into Simple.ftl

1. Under Presentation (preview) section select simple.ftl for editing.
   This is the main search template file which handles the display of the entire search interface.        
2. At the top of the file add this line after the existing imports.

   <#import "result.ftl" as Result/>

   This imports our new template library into the current file.    
3. Locate the results block (the code between <@s.Results> and </@s.Results ).
   Tip: To quick find the result block click within the file edit and press Ctrl(control)+f or mac ⌘(command)+f and search for s.Result .    
4. Delete all the code within (including the li tag)

    <li data-fb-result=${s.result.indexUrl}>    

   and replace with the following code.

   <@Result.GridView />

   This code calls the GridView macro provided within result.ftl.    
5. Click Save and publish
6. Open the search page result and see how the result view has now changed and displays the text "Transform into a grid layout!" repeated for each result.  

The provided result.ftl includes a few pre implemented macros;

• GridView - This is an empty macro which you will configure in the next set step "Define Grid Layout".  
• Book; - This is an example result format for a book which has been predefined for you.  

3. Define Grid Layout

1. Under Presentation (preview) section select result.ftl for editing.  
2. Replace the code within the GridView macro with the following.

   <@ResultColumns.ResultsColumns columnsNumber=3>
     <@ResultColumns.ResultsColumnsIsOpen>
       <li class="row" data-results-column-rank="${ResultColumns.resultsColumnsIndex!}">
         <ol class="list-unstyled">
     </@ResultColumns.ResultsColumnsIsOpen>
     <#local cssColWidth = (12/ResultColumns.resultsColumnsNumber!1)?floor?c >
     <li data-fb-result=${s.result.indexUrl} class="col-md-${cssColWidth!} columns-${ResultColumns.resultsColumnsNumber!}">
     <@Book />
     </li>
     <@ResultColumns.ResultsColumnsIsClosed>
         </ol>
       </li>
   
     </@ResultColumns.ResultsColumnsIsClosed>
   </@ResultColumns.ResultsColumns>

   
   This code will wrap the results with groupped html container rows which you can layout with CSS and most CSS grid systems.  
3. Click Save and publish .  

4. View & Test

1. Go to the result page to see your new view the grid view layout.      

Working Example

See end result.