Differences

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

--- en:user:gs3_sample_format_statements [2016/05/12 01:54] – removed kjdon
+++ en:user:gs3_sample_format_statements [2016/05/12 02:05] – created kjdon
@@ Line 1: / Line 1: @@
+====== Sample Greenstone3 Format Statements ======
+This page provides examples of format statements for miscellaneous things. See also
+   * [[en:user:gs3_format_statements|Greenstone 3 Format Statements]]
+   * [[en:user:gs3_list_of_format_options|List of Greenstone3 Format Options]]
+===== Document Display =====
+==== Image Display Example ====
+{{ :en:imagedisplay.png?direct&500 |}}
+<code>
+<gsf:option name="TOC" value="true"/>
+<gsf:template name="documentHeading"/>
+<gsf:template name="documentContent">
+  <gsf:switch>
+  <gsf:metadata name="FileFormat"/>
+	<gsf:when test="equals" test-value="jpeg">
+		<xsl:call-template name="imageDisplay"/>
+	</gsf:when>
+	<gsf:otherwise>
+		<h1><gsf:metadata name="Source"/></h1>
+		<xsl:call-template name="wrappedSectionText"/>
+	</gsf:otherwise>
+  </gsf:switch>
+</gsf:template>
+<xsl:template name="additionalHeaderContent">
+  <xsl:variable name="httpCollection">
+    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
+  </xsl:variable>
+  <link href="{$httpCollection}/style/imageDisplay.css" rel="stylesheet" type="text/css"/>
+</xsl:template>
+<xsl:template name="imageDisplay">
+    <div class="doc-image">
+      <gsf:link type="source">
+        <gsf:metadata name="screenicon"/>
+      </gsf:link>
+      <div class="doc-quote">
+        <p>
+          <i>
+            <gsf:metadata name="dc.Description"/>
+          </i>
+        </p>
+      </div>
+    </div>
+    <div class="doc-info">
+      <h1>
+        <gsf:metadata name="dc.Title"/>
+      </h1>
+      <ul>
+        <li>
+          <b>Author:</b>
+          <gsf:metadata name="dc.Creator"/>
+        </li>
+        <li>
+          <b>Subjects:</b>
+          <gsf:metadata name="dc.Subject"/>
+        </li>
+        <li><b>Image size:</b><gsf:metadata name="ImageHeight"/>px x <gsf:metadata name="ImageWidth"/>px</li>
+      </ul>
+    </div>
+    <br class="clear"/>
+</xsl:template>
+</code>
+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
+"jpeg" as shown in the image. All other documents are displayed with the
+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:
+<code>
+<gsf:metadata name="FileFormat"/>
+<gsf:when test="exists" test-value="jpeg">
+</code>
+With the following:
+<code>
+<gsf:metadata name="Image"/>
+<gsf:when test="exists">
+</code>
+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's style folder:
+<code>
+div.separating-line {
+    border-bottom: 1px solid #d8d8d8;
+    padding: 5px;
+    clear: both;
+}
+div.doc-image {
+    float: left;
+    margin-left: 10px;
+    padding-right: 10px;
+}
+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: 5px;
+}
+div.doc-info ul {
+    list-style-type: none;
+    color: #5d5f60;
+    margin-top: 0px;
+}
+div.doc-info ul li {
+line-height: 20px;
+}
+</code>