We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Having Trouble Adding Custom JavaScript to Post | Website Translation Attempt

June 19, 2021 at 2:46 am #5984
[anonymous]
Hello!

I’ve been toying around with Publii for a while now and I’m looking for ways to get around making the website multilingual / multi-language. I found this simple Javascript-based localization library called Lingumania that seems to be simple enough to implement for what I need.

I included a link to the lingumania.min.js script src in Tools > Custom HTML > Body (step 2 from their website) that I’ve hosted online.

I then created a post, clicked on “Source Code – HTML”, and copy-pasted the following code from their website from their first demo:
```
<h1>Ready to go global?</h1>
    <h2>get found by search engines and visitors in other languages</h2>
    Powered by Lingumania
    <script type="text/javascript">
        var linguJSON = {
            "languages": [
                {
                    "lang_name": "English",
                    "lang_code": "en",
                    "url_pattern": "?"
                },
                {
                    "lang_name": "Español",
                    "lang_code": "es",
                    "url_pattern": "?"
                }
            ],
            "translated_segments": [
                {
                    "source": "Ready to go global?",
                    "target": "¿Está listo para el mundo?"
                },
                {
                    "source": "get found by search engines and visitors in other languages",
                    "target": "sea encontrado por los motores de búsqueda en otros idiomas",
                },
                {
                    "source": "Powered by Lingumania",
                    "target": "Potenciado por Lingumania"
                }
            ]
        };
    </script>
    <script src="js/lingumania.min.js">
```
However, the translation toggle button doesn’t show up. Here is how the mechanism should work: http://www.lingumania.com/Demos/QuickDemo.html

Any idea how to solve this?
June 21, 2021 at 9:31 am #5989

[anonymous]

Hi,

If the scripts correctly appears in your theme, then you must consult the issue with the author of the library – it is the best source of the issue solutions in such cases 🙂

June 21, 2021 at 8:05 pm #5992

[anonymous]

Tomasz Dziuda wrote:

Hi,

If the scripts correctly appears in your theme, then you must consult the issue with the author of the library – it is the best source of the issue solutions in such cases 🙂

Hi Tomasz! How do I know if the scripts appear in my theme?

June 21, 2021 at 9:52 pm #5993

[anonymous]

Please just open your website and view source – https://neilpatel.com/blog/how-to-read-source-code/

June 22, 2021 at 2:31 am #5996
[anonymous]
So, it looks like my replies keep getting deleted, but I checked the source, and it looks like the script is present in the head of the page source. That said, I’ve run into issues with trying to add Custom HTML with .js scripts for other web components/Javascript libraries.

I tried adding the Able Player to a new Publii site using the QF template and testing the player out, but also ran into some issues.

Here is the code I added to the Head (via Tools > Custom HTML > Head):
```

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
<script src="https://ableplayer.github.io/ableplayer/thirdparty/js.cookie.js"></script>


<link rel="stylesheet" href="https://ableplayer.github.io/ableplayer/build/ableplayer.min.css" type="text/css"/>


<script src="https://ableplayer.github.io/ableplayer/build/ableplayer.js"></script>
```
June 22, 2021 at 2:32 am #5997
[anonymous]
In a new post using the WYSIWYG editor, I clicked on “HTML” and pasted the following:
```
<video id="video1" poster="https://ableplayer.github.io/ableplayer/media/wwa.jpg" preload="auto" width="480" height="360" data-able-player="" data-skin="2020">
  <source type="video/mp4" src="https://ableplayer.github.io/ableplayer/media/wwa.mp4" />
  <source type="video/webm" src="https://ableplayer.github.io/ableplayer/media/wwa.webm" />
  <track kind="captions" src="https://ableplayer.github.io/ableplayer/media/wwa_captions_en.vtt" srclang="en" label="English captions" /></video>
```
June 22, 2021 at 2:32 am #5998

[anonymous]

However, all I’m getting is a still image (the poster). I can only play the video if I right-click on the image and click “Play”. But, the video player is supposed to look like this (same code): https://editor.p5js.org/candideu/sketches/6_R6bUaBQ. The controls are missing from the Publii Preview.

I tried putting the Custom HTML in “Body”, “Before Post”, “After Post”, etc. and tried opening the Preview HTML in another browser (Chrome. I typically use Firefox). It seems like the scripts are being blocked for some reason…

June 23, 2021 at 9:53 am #6000
[anonymous]
I suspect it’s because you’re testing locally.

Either test online or make sure all your URLs are full path.

This may not work locally:
```
src="js/lingumania.min.js"
```
Neither will this:
```
src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
```
Without a protocol it will try to find the file on your computer, so you need to have `https://` in front.
June 26, 2021 at 7:15 pm #6010

[anonymous]

[anonymous] wrote:

I suspect it’s because you’re testing locally.

Either test online or make sure all your URLs are full path.

This may not work locally:

<span class=”enlighter-text”>src=</span><span class=”enlighter-s0″>”js/lingumania.min.js”</span>

src=”js/lingumania.min.js”

src=”js/lingumania.min.js” Neither will this:

<span class=”enlighter-text”>src=</span><span class=”enlighter-s0″>”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”</span>

src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”

src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js” Without a protocol it will try to find the file on your computer, so you need to have `https://` in front.

You were absolutely right about the second one with the source link. I added https: in front of the link, and now the media player works! Thank you so much!

For Lingumania: I used a website link, rather than a local path initially, and it still doesn’t work. I suspect that this may be an issue on the Lingumania side.