<![CDATA[Adding custom JS to Lychee]]>Hello Cloudriders.

I want to add a piece of custom JS (with a tiny bit of HTML) to Lychee and tried the 'add JS' function in settings. Since Cloudron has a read-only file system I wondered how this might be achieved?

]]>https://forum.cloudron.io/topic/11232/adding-custom-js-to-lycheeRSS for NodeTue, 21 Jul 2026 19:43:33 GMTMon, 04 Mar 2024 11:56:35 GMT60<![CDATA[Reply to Adding custom JS to Lychee on Tue, 12 Mar 2024 14:51:29 GMT]]>@3246 Just had a quick look . It seems the script gets injected in the pages using <script defer type="text/javascript" src="https://xxx/dist/custom.js"></script> at the very top. If you put alert('foo'); then it shows it all the pages. But the issue as you found is that the gallery page and individual photo page don't have the footer element. The footer is only in albums page it seems. I guess you have to ask upstream about this design/layout.

]]>https://forum.cloudron.io/post/84896https://forum.cloudron.io/post/84896Tue, 12 Mar 2024 14:51:29 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 11 Mar 2024 17:24:55 GMT]]>Thanks @girish. It works on the main page but not a gallery or photo page. Also, the toolbar seems missing (it has class .h-0 == height=0px oddly???).

The gallery homepage
Desktop-screenshot.png

An album page
Desktop-screenshot (1).png

This is the same for individual photo pages as they get loaded in a lightbox (but seem to have their own URL).

]]>https://forum.cloudron.io/post/84821https://forum.cloudron.io/post/84821Mon, 11 Mar 2024 17:24:55 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 11 Mar 2024 15:35:29 GMT]]>@3246 I would simply test it step by step.

For a start does a basic document.getElementById("footer").innerHTML += "<p>FOO</p>" work ? If that works, then do:

var curl_url = window.location.href;
var myHTML = "<p>" + curl_url + "</p>";
document.getElementById("footer").innerHTML += myHTML;

and so on 🙂

]]>https://forum.cloudron.io/post/84812https://forum.cloudron.io/post/84812Mon, 11 Mar 2024 15:35:29 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 11 Mar 2024 14:51:57 GMT]]>OK, this is working and I wondered if somebody with better JS skills can help me complete this code piece to add comments to Lychee:

document.getElementById("footer").innerHTML += " <div id='cusdis_thread' data-host='https://cusdis.com' data-app-id='RANDOMSTRINGOFNUMBERS' data-page-url='URLHERE"' data-page-title='TITLEHERE'></div><script async defer src='https://cusdis.com/js/cusdis.es.js'></script> ";

I need to include the current page URL (window.location.href) in the data-page-url attribute and title (document.title) in the data-page-title. I unsuccessfully tried my limited skills to solve this and so far only ended up including the code without the needed references on the page.

Not sure where to stick this reference either to display the comment field on an individual photo page only but that's probably doable using an if statement somewhere 🤔

PS I think the lychee sidebar (lychee_sidebar) also needs a CSS style adding to scroll when the window is smaller than its contents (e.g. overflow: auto;).

]]>https://forum.cloudron.io/post/84804https://forum.cloudron.io/post/84804Mon, 11 Mar 2024 14:51:57 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 11 Mar 2024 12:18:36 GMT]]>Amazing, thank you @girish

]]>https://forum.cloudron.io/post/84774https://forum.cloudron.io/post/84774Mon, 11 Mar 2024 12:18:36 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 04 Mar 2024 20:42:46 GMT]]>@3246 Fixed in latest package

]]>https://forum.cloudron.io/post/84426https://forum.cloudron.io/post/84426Mon, 04 Mar 2024 20:42:46 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 04 Mar 2024 16:10:20 GMT]]>Curiosly, the 'Personalize CSS' works. It saves it in /app/data/user.css

]]>https://forum.cloudron.io/post/84411https://forum.cloudron.io/post/84411Mon, 04 Mar 2024 16:10:20 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 04 Mar 2024 13:20:04 GMT]]>Hey @nebulon, yes - it's to embed a commenting field 🙂

Ref. https://cusdis.com/doc#/advanced/sdk

]]>https://forum.cloudron.io/post/84402https://forum.cloudron.io/post/84402Mon, 04 Mar 2024 13:20:04 GMT<![CDATA[Reply to Adding custom JS to Lychee on Mon, 04 Mar 2024 12:20:36 GMT]]>Do you have more information on what the Add JS functionality does?

]]>https://forum.cloudron.io/post/84395https://forum.cloudron.io/post/84395Mon, 04 Mar 2024 12:20:36 GMT