Differences

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

--- en:user:gs3_sample_format_statements [2016/10/09 23:27] – [Adding javascript into a page] kjdon
+++ en:user:gs3_sample_format_statements [2024/07/05 01:00] (current) – [Image Display Example] kjdon
@@ Line 1: / Line 1: @@
 ====== Sample Greenstone3 Format Statements ======
@@ Line 153: / Line 156: @@
 </code>
+==== Adjusting view for paged image documents ====
-===== Linking metadata to a search =====
+By default, paged image documents will display the image with the associated text underneath. A "view selector" offers **default** (both image and text) and **image** only and **text** only options.
+These can be customised in the <display><format> element of the etc/collectionConfig.xml file.
+  *To hide the view selector:
+<code>
+<gsf:option name="viewSelection" value="false"/>
+</code>
+  *To set the default view to image:
+<code>
+<paramDefault name="view" value="image"/>
+</code>
+===== Handling multi-valued metadata =====
+==== Displaying values in a bulleted list ====
+Say we want to display all the authors of a document in a bulleted list. We can't just use <gsf:metadata name="dc.Creator"/> as it will put all the names out in a comma separated list. However, we can use the prefix and suffix options to put some HTML before and after each author.
+<code>
+<ul>
+<gsf:metadata name="dc.Creator" separator=""><prefix><gsf:html>&lt;li&gt;&lt;b&gt;</gsf:html></prefix>
+<suffix><gsf:html>&lt;/b&gt;&lt;/li&gt;</gsf:html></suffix></gsf:metadata>
+</ul>
+</code>
+This will produce output like:
+<ul><li><b>John Smith</b></li><li><b>Katherine Don</b></li><li><b>Cliff Richard</b></li></ul>
+==== Linking metadata to a search ====
+How to link metadata values to a search for that value?
-How to link metadata values to a search for that value.
 For example, say a document has several authors, stored as dc.Creator metadata. You can display a list of the authors, each one linked to a search of the dc.Creator index for that author.
@@ Line 312: / Line 345: @@
 </code>
-This lets us check that our function is correct and we are getting the right metadata. However, using "document.write" is not considered good practice.
+This lets us check that our function is correct and we are getting the right metadata. However, using "document.write" is not considered good practice. And if you are adding this in a classifier which has bookshelves, then it ends up replacing the entire page with the filesize!
-Instead, we will need to set the innerHTML of the td element. This means we need to give the td element an id so we can find it again.
+Instead, we will need to add to the html of the td element. This means we need to give the td element an id so we can find it again.
+If the <td> we are adding the filesize to contains only the filesize, then we can use the element.innerHTML() method to set the content.
 <code>
 <td>
@@ Line 321: / Line 355: @@
   <script type="text/javascript">
     document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).innerHTML= humanReadableFileSize(<gsf:metadata name="FileSize"/>);
+  </script>
+</td>
+</code>
+However, if this <td> element already has content, then we need to append the filesize, using element.appendChild() and document.createTextNode(). For example:
+<code>
+<td>
+  <xsl:attribute name="id"><gsf:OID/>-fs</xsl:attribute>
+  ...other content here...
+  <script type="text/javascript">
+    document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).appendChild(document.createTextNode(humanReadableFileSize(<gsf:metadata name="FileSize"/>)));
   </script>
 </td>
@@ Line 332: / Line 378: @@
 We set the text to be the result of calling our function on the filesize metadata.
+To add to an element's content, we find the node using **document.getElementById("id")**, we create a text node using **document.createTextNode("xxx")** and append it to the element using **element.appendChild(node)**.
 One further tricky part. We want to write **document.getElementById("<gsf:OID/>-fs")**. However, the XSL transform process will escape the double quotes with &quot; and then the javascript will be invalid. To get around this, we use **<xsl:text disable-output-escaping="yes">"</xsl:text>**.
-i.e. **document.getElementById(<xsl:text disable-output-escaping="yes">"</xsl:text><gsf:OID/>-fs<xsl:text disable-output-escaping="yes">"</xsl:text>)
+i.e. **document.getElementById(<xsl:text disable-output-escaping="yes">"</xsl:text><gsf:OID/>-fs<xsl:text disable-output-escaping="yes">"</xsl:text>)**
-**
-Greenstone provides a shorthand: **<gsf:html>"</gsf:html>**, which gets resolved to <xsl:text> with the disable-output-escaping attribute set.
+Greenstone provides a shorthand: **<gsf:html>"</gsf:html>**, which gets resolved to <xsl:text> with the disable-output-escaping attribute set.