en:user:gs3_sample_interface_modifications
Differences
This shows you the differences between two versions of the page.
Next revisionBoth sides next revision | |||
en:user:gs3_sample_interface_modifications [2016/05/12 01:53] – created kjdon | en:user:gs3_sample_interface_modifications [2016/05/12 02:08] – kjdon | ||
---|---|---|---|
Line 85: | Line 85: | ||
</ | </ | ||
</ | </ | ||
- | ===== 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