en:user:gs3_sample_interface_modifications
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
en:user:gs3_sample_interface_modifications [2016/05/12 01:53] – created kjdon | en:user:gs3_sample_interface_modifications [2019/10/21 22:29] – [Changing the collection description] kjdon | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Sample Greenstone3 | + | ====== Sample Greenstone3 Interface Modifications ====== |
- | This page provides examples of format statements and interface modifications. Many of these changes can be made at either the collection, interface or site level. | + | This page provides examples of interface modifications. Many of these changes can be made at either the collection, interface or site level. |
- | ===== General | + | See the [[en: |
+ | |||
+ | ==== Changing the collection description | ||
+ | |||
+ | The collection' | ||
+ | |||
+ | The place where the description gets printed out is in the about page XSL: web/ | ||
+ | |||
+ | There is a template called coll-description: | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | This template basically outputs the collection' | ||
+ | |||
+ | We can redefine the template as: | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | The collection contains < | ||
+ | built on < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | The buildDate metadata element is a timestamp, so is not user friendly. We can use one of our utility functions to format it. | ||
+ | Utility functions are defined in src/ | ||
+ | In this case, we are formatting the timestamp as a date (the second 0). We could also format it as 'days ago' (using 3 instead of 0): | ||
+ | < | ||
+ | The collection contains < | ||
+ | built < | ||
+ | </ | ||
+ | |||
+ | If we want this text to be displayed in a language dependent manner, then we need to define it in the properties file, (and translate it in the appropriate language properties file), and retrieve it from there. | ||
+ | |||
+ | The default interface has these two statements already defined (in web/ | ||
+ | < | ||
+ | about.standarddescriptiondays=This collection contains {0-numdocs} documents and was last built | ||
+ | {1-numdays} days ago. | ||
+ | about.standarddescriptiondate=This collection contains {0-numdocs} documents and was last built on | ||
+ | {1-date}. | ||
+ | </ | ||
+ | |||
+ | To call them, we need to define variables for the arguments, and then pass them in as a ; separated string. | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | / | ||
+ | < | ||
+ | < | ||
+ | ' | ||
+ | </ | ||
+ | |||
+ | If we wanted to use this technique, but want to define our own text just for the collection, we can add an interface_custom.propeties file into web/ | ||
+ | Define the property there, eg: | ||
+ | < | ||
+ | descriptionextra=This very awesome collection was last built {0-days} ago, | ||
+ | and contains {1-numdocs} manuscripts. | ||
+ | </ | ||
+ | |||
+ | Then we use a similar utility function call that will look for the key in the custom file instead of the standard file: | ||
+ | < | ||
+ | < | ||
+ | / | ||
+ | </ | ||
+ | Note we have changed the order in which we use the arguments, so we need to change the order we pass them in. | ||
+ | |||
+ | ==== Total documents in library ==== | ||
+ | |||
+ | The above section shows how to add "this collection contains X number of documents" | ||
+ | |||
+ | We can add up all the numDocs from each collection using ' | ||
+ | |||
+ | < | ||
+ | < | ||
+ | .... | ||
+ | < | ||
+ | / | ||
+ | < | ||
+ | |||
+ | < | ||
+ | select=" | ||
+ | .... | ||
+ | </ | ||
+ | </ | ||
==== Footer modification (text on left, image on right) ==== | ==== Footer modification (text on left, image on right) ==== | ||
Line 85: | Line 175: | ||
</ | </ | ||
</ | </ | ||
- | ===== Document Display ===== | ||
- | ==== Image Display Example ==== | ||
- | |||
- | {{ : | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | | ||
- | <link href=" | ||
- | </ | ||
- | |||
- | < | ||
- | <div class=" | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div class=" | ||
- | <p> | ||
- | <i> | ||
- | < | ||
- | </i> | ||
- | </p> | ||
- | </ | ||
- | </ | ||
- | <div class=" | ||
- | <h1> | ||
- | < | ||
- | </h1> | ||
- | <ul> | ||
- | <li> | ||
- | < | ||
- | < | ||
- | </li> | ||
- | <li> | ||
- | < | ||
- | < | ||
- | </li> | ||
- | < | ||
- | </ul> | ||
- | </ | ||
- | <br class=" | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | This code provides a nice way to display images with their metadata on the document display page. Provides an example of gsf:switch and gsf:when statements, as well as linking to a CSS file. | ||
- | |||
- | This format statement will display any document with a FileFormat (ex.FileFormat) of | ||
- | " | ||
- | dc.Title as a heading and the document text. | ||
- | |||
- | If you have images of many different formats (png, jpg, jpeg, gif), you could replace the lines: | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | With the following: | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | For the image display to appear as shown in the image, | ||
- | you must include the following CSS in a file called imageDisplay.css in your collection' | ||
- | |||
- | < | ||
- | div.separating-line { | ||
- | border-bottom: | ||
- | padding: 5px; | ||
- | clear: both; | ||
- | } | ||
- | |||
- | div.doc-image { | ||
- | float: left; | ||
- | margin-left: | ||
- | padding-right: | ||
- | } | ||
- | |||
- | div.doc-image img { | ||
- | border: 1px solid #5d5f60; | ||
- | padding: 5px; | ||
- | |||
- | } | ||
- | |||
- | div.doc-quote p { | ||
- | width: 500px; | ||
- | } | ||
- | |||
- | div.doc-info h4 { | ||
- | margin-top: 15px; | ||
- | margin-bottom: | ||
- | } | ||
- | |||
- | div.doc-info ul { | ||
- | list-style-type: | ||
- | color: #5d5f60; | ||
- | margin-top: 0px; | ||
- | | ||
- | } | ||
- | |||
- | div.doc-info ul li { | ||
- | line-height: | ||
- | |||
- | } | ||
- | </ | ||
en/user/gs3_sample_interface_modifications.txt · Last modified: 2023/03/13 01:46 by 127.0.0.1