Customisations to Document Display in Greenstone 3

Image Slider

To customize the image slider. Look at the web/interfaces/default/js/document_scripts.js If you want to customise things in here for just one collection, add a file eg script/custom-document.js into the collection. Add transform/pages/document.xsl to the collection if not already there. Add the following template to it, substituting your collection name for niupepa in the example.

<xsl:template name="javascriptForDocumentView">
  <script type="text/javascript" src="interfaces/{$interface_name}/js/document_scripts.js"><xsl:text> </xsl:text></script>
  <!-- add in the niupepa customisations -->
  <script type="text/javascript" src="sites/{$site_name}/collect/niupepa/script/custom-document.js"><xsl:text> </xsl:text></script>
</xsl:template>

This adds your new javascript file into the page.

Note, you can do this for a site, or for a different interface. Just put the document.xsl and custom-document.js into the appropriate folders for site/interface, and modify the paths accordingly.

Note, if you are adding document.xsl to a new interface, then you should replace {$interface_name} with default, in the above code. </code>

Image Slider has a filtering option where you can view just part of the pages. You can choose whether to provide filtering options on the section num or the title using

_filter_on_types = ["sectiontitle", "sectionnum"];

This tells which radio buttons to display. Can leave both there or just have one.

If titles are numeric, add in

_filter_title_numeric = true;

Then titles will be filtered numerically rather than alphabetically. ie 1 will just display page 1 rather than 1, 10, 11 etc.

The default display for each page in the slider is the section number followed by the title. To hide the section number you need to add the following to style/style.css in the collection

span.tocSectionNumber {
     display: none;
}

To hide the Title (and only display the number), change span.tocSectionNumber to span.tocSectionTitle in the above code.

You can include the style.css file in the page by overriding the additionalHeaderContent-collection template. Can add this in to a template file, eg into the document.xsl file mentioned above. Or it can be added in to the etc/collectionConfig.xml file. add

<link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/style/style.css"/>

See web/interfaces/default/transform/layouts/header.xsl for more details about additionalHeaderContent templates.