Greenstone Wiki

User Tools

Site Tools

You are here: index » en » user » gs3_sample_interface_modifications
en:user:gs3_sample_interface_modifications

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:user:gs3_sample_interface_modifications [2019/10/21 22:29] – [Changing the collection description] kjdonen:user:gs3_sample_interface_modifications [2023/03/13 01:46] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +
 +
 +
  
 ====== Sample Greenstone3 Interface Modifications ====== ====== Sample Greenstone3 Interface Modifications ======
Line 177: Line 180:
  
  
 +==== Changing the header background on classifier and document pages =====
 +Getting the gs_banner background in the header to change based on the browsing classifier page loaded, or at random for each document page loaded, can be achieved by a combination of XSL and javascript at the collection level.
  
 +1. If they don't already exist, create the following subfolders within your collection folder that's located at GS3's ''web/sites/localsite/collect/YOUR-COLLECTION'':
 +  * ''transform/layouts''
 +  * ''scripts''
 +  * ''images''
  
 +2. In your collection's ''images'' folder, put all the images you want in your header background and name them sequentially as CL1, CL2 to CL//n//.\\ Image CL1 will be displayed for the first browsing classifier and CL//x// will be displayed for the //x//th browsing classifier, whereas any of the total of //n// images will be displayed at random on visiting any document's page.\\ You further need to ensure that all the images are of the same file type and so have the same file extension, for example ''.png''.
  
 +3. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js''.
  
 +a. Paste the following code into it:
  
 +<code>
 +$('document').ready(function(){
 +
 + // If we're on a classifier page, then header banner image will be the album image for that classifier
 + if(gs.cgiParams["cl"]) {
 +
 + $('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/'+gs.cgiParams["cl"]+'.jpg")');
 + } else {
 + // we're not on a classifier page (probably on a document page)
 + // In that case, the header banner image will be a randomly determined image
 +
 + var numImages = n;
 + var randomNumber = Math.floor((Math.random() * numImages) + 1);
 + $('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/CL'+randomNumber+'.jpg")');
 + }
 +
 +});
 +</code>
  
 +b. Adjust the line of code ''var numImages = n;'' above to replace //n// with the number suffix of the last of your images in your collection's ''images'' folder, which you determined in step 2.\\ For example, if you had 5 images in your collection's ''images'' folder, which would be named CL1.png to CL5.png, then the line of code would become ''var numImages = 5;''.
 +
 +c. If the file extension of all your images is anything other than ''.jpg'', then change the __2 uses__ of ''.jpg'' in the above JavaScript code to your images' file extension instead. For example, if your images all have a ''.png'' extension, then the 2 affected lines of code would become\\ <code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/'+gs.cgiParams["cl"]+'.png")');</code><code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/CL'+randomNumber+'.png")');</code>
 +
 +4. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/transform/layouts/header.xsl''.
 +
 +a. Next ensure this ''header.xsl'' file
 +  * loads an image of your choice from your collection's ''images'' folder to display in the ''gs_banner'' div element for any users who don't have JavaScript, and
 +  * refers to the ''custom-script.js'' file you created in step 3 above.
 +If your collection didn't have its own ''header.xsl'' file yet, then copy all the following code into your new ''header.xsl'' to achieve this. But if you already created a ''header.xsl'' file in your collection for other purposes, then ensure the 2 crucial sections concerning the css styling of ''gs_banner'' and the line loading the ''custom-script.js'' script in the following code are present in your ''header.xsl'' file.
 +
 +<code>
 +<?xml version="1.0" encoding="UTF-8"?>
 +<xsl:stylesheet version="1.0"
 + xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 + xmlns:java="http://xml.apache.org/xslt/java"
 + xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
 + xmlns:gslib="http://www.greenstone.org/skinning"
 + xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
 + extension-element-prefixes="java util"
 + exclude-result-prefixes="java util gsf">
 +
 + <!-- This template should be overridden in the collectionConfig.xml file if you want to add extra header content -->
 + <xsl:template name="additionalHeaderContent-collection">
 +
 + <script type="text/javascript" src="/greenstone3/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js"><xsl:text> </xsl:text></script>
 +
 +        <style> 
 +            
 +            #gs_banner {
 +                 background-image: url(/greenstone3/sites/localsite/collect/YOUR-COLLECTION/images/CL1.jpg);
 +                padding-top: 15px; 
 +            }
 +            
 +            
 +        </style>
 + </xsl:template>
 +</xsl:stylesheet>
 +</code>
 +
 +b. In your header.xsl, now adjust the following line to refer to your collection folder's name instead of the text ''YOUR-COLLECTION''
 +<code>
 +<script type="text/javascript" src="/greenstone3/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js"><xsl:text> </xsl:text></script>
 +</code>
  
 +c. Also adjust the following line to refer to your collection folder's name instead of the text ''YOUR-COLLECTION'' and to refer to your chosen default image along with its actual file extension:
 +<code>background-image: url(/greenstone3/sites/localsite/collect/YOUR-COLLECTION/images/CL1.jpg);</code>
 +For example, if your collection folder is called "albums" and you wanted your image ''CL3.png'' to be the default background image that appears in gs_banner, you'd set the line to: ''background-image: url(/greenstone3/sites/localsite/collect/albums/images/CL3.png);''
  
en/user/gs3_sample_interface_modifications.1571696954.txt.gz · Last modified: 2019/10/21 22:29 by kjdon