en:user:gs3_sample_format_statements
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| en:user:gs3_sample_format_statements [2016/09/26 22:58] – [Linking metadata to a search] 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 ====== | ====== Sample Greenstone3 Format Statements ====== | ||
| Line 153: | Line 156: | ||
| </ | </ | ||
| + | ==== 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" |
| + | These can be customised in the < | ||
| + | |||
| + | *To hide the view selector: | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | *To set the default view to image: | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | ===== 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 < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | This will produce output like: | ||
| + | |||
| + | < | ||
| + | ==== 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. | 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 183: | Line 216: | ||
| < | < | ||
| Search for Authors: < | Search for Authors: < | ||
| - | < | + | < |
| + | amp; | ||
| + | < | ||
| </ | </ | ||
| </ | </ | ||
| Line 189: | Line 224: | ||
| < | < | ||
| + | Use double quotes around the query value if you want exact matching, i.e. | ||
| + | < | ||
| + | s1.query="< | ||
| + | </ | ||
| The parameters are: | The parameters are: | ||
| * qs=1 - this search is a quick search. Can omit if you want to be taken to the TextQuery search page (equivalent to clicking the TextQuery link under the quick search form) | * qs=1 - this search is a quick search. Can omit if you want to be taken to the TextQuery search page (equivalent to clicking the TextQuery link under the quick search form) | ||
| Line 197: | Line 236: | ||
| * s1.index=CR | * s1.index=CR | ||
| + | ===== Using javascript to change the display ===== | ||
| + | |||
| + | As an example of using javascript, we will see how to output the document filesize in a human readable form. For example, instead of displaying " | ||
| + | |||
| + | A basic javascript method to do this is the following: | ||
| + | |||
| + | < | ||
| + | function humanReadableFileSize(bytes) | ||
| + | { | ||
| + | var filesize = bytes + " bytes"; | ||
| + | if (bytes > 1048576) { | ||
| + | filesize = Math.round(bytes / 1048576.0) + " MB"; | ||
| + | } | ||
| + | else if (bytes > 1024) { | ||
| + | filesize = Math.round(bytes/ | ||
| + | } | ||
| + | return filesize; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | So, we have a javascript function, but how do we get it into the page? And how do we call it? | ||
| + | |||
| + | ==== Adding javascript into a page ==== | ||
| + | |||
| + | To add the javascript into an XSL file, you encase it in script tags. And because XSL will escape double quotes by default, you need to put it inside **< | ||
| + | |||
| + | < | ||
| + | <script type=" | ||
| + | < | ||
| + | function humanReadableFileSize(bytes) | ||
| + | { | ||
| + | var filesize = bytes + " bytes"; | ||
| + | if (bytes > 1048576) { | ||
| + | filesize = Math.round(bytes / 1048576.0) + " MB"; | ||
| + | } | ||
| + | else if (bytes > 1024) { | ||
| + | filesize = Math.round(bytes/ | ||
| + | } | ||
| + | return filesize; | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | There are multiple places you can use to add some javascript into your library. | ||
| + | |||
| + | * **All pages, all collections** | ||
| + | |||
| + | **web/ | ||
| + | |||
| + | * **Only classifier pages, all collections** | ||
| + | |||
| + | The **create-html-header** template calls an additional template **additionalHeaderContent**, | ||
| + | |||
| + | * **All pages, single collection** | ||
| + | |||
| + | The **additionalHeaderContent** template calls further specifric templates, including **additionalHeaderContent-collection**. This template can be added into the collection' | ||
| + | |||
| + | < | ||
| + | < | ||
| + | <script type=" | ||
| + | < | ||
| + | function humanReadableFileSize(bytes) | ||
| + | { | ||
| + | .. function content here... | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | * **single page, single collection** | ||
| + | |||
| + | Say you just want to use this new javascript on the classifier pages, then add the template into the main classifier format element. Or add it into the format element of a specific classifier and it will only be available for that single classifier. | ||
| + | |||
| + | ==== Using the javascript in the format statement ==== | ||
| + | |||
| + | Now that we have the function included in the page, we can use it to modify our filesize display. | ||
| + | |||
| + | Lets modify a classifier format statement to use this function. The following is a simple format statement that displays an icon linking to the document, the title, and the filesize. | ||
| + | |||
| + | < | ||
| + | < | ||
| + | <td valign=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </td> | ||
| + | <td valign=" | ||
| + | < | ||
| + | </td> | ||
| + | <td> | ||
| + | < | ||
| + | </td> | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | We will modify the third <td> element to display a human readable form. | ||
| + | |||
| + | During development, | ||
| + | |||
| + | < | ||
| + | <td> | ||
| + | <script type=" | ||
| + | </ | ||
| + | </td> | ||
| + | </ | ||
| + | |||
| + | This lets us check that our function is correct and we are getting the right metadata. However, using " | ||
| + | |||
| + | 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. | ||
| + | < | ||
| + | <td> | ||
| + | < | ||
| + | <script type=" | ||
| + | document.getElementById(< | ||
| + | </ | ||
| + | </td> | ||
| + | </ | ||
| + | |||
| + | However, if this <td> element already has content, then we need to append the filesize, using element.appendChild() and document.createTextNode(). For example: | ||
| + | |||
| + | < | ||
| + | <td> | ||
| + | < | ||
| + | ...other content here... | ||
| + | <script type=" | ||
| + | document.getElementById(< | ||
| + | </ | ||
| + | </td> | ||
| + | </ | ||
| + | |||
| + | Element ids need to be unique, so in this case we will use the document id (**< | ||
| + | **<td id="< | ||
| + | |||
| + | To set an element' | ||
| + | **document.getElementById** finds the specified element, and **element.innerHTML = " | ||
| + | |||
| + | We set the text to be the result of calling our function on the filesize metadata. | ||
| + | |||
| + | To add to an element' | ||
| + | One further tricky part. We want to write **document.getElementById("< | ||
| + | i.e. **document.getElementById(< | ||
| + | Greenstone provides a shorthand: **< | ||
en/user/gs3_sample_format_statements.1474930730.txt.gz · Last modified: 2016/09/26 22:58 by kjdon