Differences

This shows you the differences between two versions of the page.

--- en:user_advanced:gs3_custom_doc_display [2015/11/26 23:04] – external edit 127.0.0.1
+++ en:user_advanced:gs3_custom_doc_display [2023/03/13 01:46] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Customisations to Document Display in Greenstone 3 ======
-==== Image Slider ====
+==== Customizing the 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.
+js/custom-document.js into the collection.
+document_scripts is included in the page by the "javascriptForDocumentView" template, in transform/pages/document.xsl. If you look at this you can see that it calls a template "customJavascriptForDocumentView". Implement this template in your collection to add in your custom javascript file.
 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.
 <code>
-<xsl:template name="javascriptForDocumentView">
+<xsl:template name="customJavascriptForDocumentView">
-  <script type="text/javascript" src="interfaces/{$interface_name}/js/document_scripts.js"><xsl:text> </xsl:text></script>
+  <!-- add in the local customisations -->
-  <!-- add in the niupepa customisations -->
+  <script type="text/javascript" src="sites/{$site_name}/collect/niupepa/js/custom-document.js"><xsl:text> </xsl:text></script>
-  <script type="text/javascript" src="sites/{$site_name}/collect/niupepa/script/custom-document.js"><xsl:text> </xsl:text></script>
 </xsl:template>
 </code>
 This adds your new javascript file into the page.
-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
+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.
+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 by adding the following to custom-document.js:
 <code>_filter_on_types = ["sectiontitle", "sectionnum"];</code>
 This tells which radio buttons to display. Can leave both there or just have one.
 If titles are numeric, add in
 <code>_filter_title_numeric = true;</code>
 Then titles will be filtered numerically rather than alphabetically. ie 1 will just display page 1 rather than 1, 10, 11 etc.
+If you only want one filtering method, and you don't want to display the radio button, you can add
+<code>var _display_single_filter_on = false;</code> (gs3.11 nightly from 25.5.2021). This will hide the radio button.
 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
@@ Line 34: / Line 42: @@
 }
 </code>
+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.
@@ Line 42: / Line 53: @@
 See web/interfaces/default/transform/layouts/header.xsl for more details about additionalHeaderContent templates.