Differences

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

--- en:user:gs3_sample_interface_modifications [2020/04/24 10:34] – anupama
+++ en:user:gs3_sample_interface_modifications [2020/04/24 10:36] – anupama
@@ Line 189: / Line 189: @@
 . Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js''.
-  - Paste the following code into it:
+a. Paste the following code into it:
 <code>
@@ Line 209: / Line 209: @@
 });
 </code>
-  - 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;''.
-  - 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>
+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>
 . Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/transform/layouts/header.xsl''.
@@ Line 217: / Line 219: @@
   * 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 styling of ''gs_banner'' and the line loading the ''custom-script.js'' script in the following code are present in your ''header.xsl'' file.
+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>