Add custom JavaScript code

[Garant]

Hi!
Haven't found any solution to add custom JS or include external file.
Tried editing headr.tpl - but code is stripped out.
How can I add JS?
Thank you!

[asmecher]

Hi Garant,

Most likely you're running into problems because { and } are used for Smarty syntax. Look up the Smarty template system for details, particularly the {literal} tag.

Regards,
Alec Smecher
Public Knowledge Project Team

[Garant]

Hi Garant,

Most likely you're running into problems because { and } are used for Smarty syntax. Look up the Smarty template system for details, particularly the {literal} tag.

Regards,
Alec Smecher
Public Knowledge Project Team

Thank you!
It works!

[kennymatthew]

Hi Garant,

Could you please explain what you did to resolve the issue. I am trying to add this in the journal desc. text area
---------------------------------------
<div=test>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="/image/galleria/galleria-1.2.9.min.js"></script>
<style>
#galleria{height:320px}

</style>


<div id="galleria">
<img src="/image/galleria/pics/1.jpg">
<img src="/image/galleria/pics/2.jpg">
<img src="/image/galleria/pics/3.jpg">
<img src="/image/galleria/pics/4.jpg">
<img src="/image/galleria/pics/5.jpg">
</div>
<script>
Galleria.loadTheme('/image/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');

</script>
</div>
-------------------------------------------
but the text that is bold is gettin commented but OJS .... Please help ....

[Garant]

Hi, kennymatthew!
Everything is simple.
I just needed to add a custom JS code to header.tpl. In order to make it work you shouldn't forget about "[leteral]" tags - it is SMARTY'ies syntax.
Example:

Code: Select all

<script type="text/javascript">{literal}
   var loc = window.location;
   var currentURL = loc.pathname;
some JS code


function loadjscssfile(filename, filetype){
 }

{/literal}</script>


[kennymatthew]

Hi Garant,

Thanks alot for the speedy reply. this is my website-->https://www.kuwaitjournals.org/test/ as you can see the images are just displayed on the main page and when i type my code in the HTML text area during the journal setup step 5.

Code: Select all

<div=test>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="/image/galleria/galleria-1.2.9.min.js"></script>
      <style>
                #galleria{height:320px}

        </style>


        <div id="galleria">
            <img src="/image/galleria/pics/1.jpg">
            <img src="/image/galleria/pics/2.jpg">
         <img src="/image/galleria/pics/3.jpg">
         <img src="/image/galleria/pics/4.jpg">
         <img src="/image/galleria/pics/5.jpg">
        </div>
        <script>
                Galleria.loadTheme('/image/galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('#galleria');

      </script>
   </div>

The parts that is BOLD ( in the prevision post) is always getting commented. If i have to paste this code into a TPL file any idea which one is it ? sorry for the noob questions... very new to this ....

[Garant]

Hi!
If you need permanent changes in header in all pages - you better go with template code editing.
But if you want to add some data, as you described (editing through Setup process step 5) - use HTML source button in editor. Otherwise TinyMce won't accept raw HTML code and will comment it.

[kennymatthew]

Hi,

I think the only way is to edit the tpl file ( is it this one -->ojs\lib\pkp\templates\common\header.tpl ) for the below code where do i add {literal}

Code: Select all

<style>
#galleria{height:320px}

</style>

[Garant]

Try it.
I haven't placed CSS into tpl. I added it through the external CSS file

[kennymatthew]

Hi,

It is working perfectly ... but now it is being displayed on every page got to find out how to make it display only in the home page .... Thanks alot man you been a big help ....

[Garant]

You are welcome!

[Pangur]

Hi kennymatthew,

If you find the way to make it display just in the homepage, please post it!
I have the same problem.

[kennymatthew]

Hi Pangur,

in config.inc goto the part that says

Code: Select all

allowed_html = "<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <b> <i> <u> <img src|alt> <sup> <sub> <br> <p>"


I added <script>

Code: Select all

allowed_html = "<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <b> <i> <u> <img src|alt> <sup> <sub> <br> <p><script>"


And now during the setup step 5, 5.2 Journal Homepage Content you can add javascript to the textarea. Let me know if that helped.

[Pangur]

Hi Kennymatthew,

I have modified 'config.inc.php' and 'config.TEMPLATE.inc.php', adding '<script>' to the allowed_html, but it's not working for me...

Did you paste the exact code you posted above in the html editor (step 5.2) and worked for you?

I am trying to add a slideshow and my code makes use of an additional css file, could be that the problem?

If I'm not editing '.tpl' files, and just trying to add content through step 5.2, should I be using SMARTY syntax as well?

Thanks!

[kennymatthew]

Hi,

http://galleria.io/download/

Are you using this for your image gallery ? i added <style> to allowed html ( i dont think it makes a difference). Then I copied the exact code mentioned before into the HTML editor. what is the exact error you getting ?