2Concept - User Experience Conceptualist - Lychee Landing Page with Custom Menu Items

Extending the Lychee Landing Page with Custom Menu Items

Lychee is one of the cleanest and most lightweight self-hosted photo management solutions currently available. It combines a modern interface with an easy installation process and offers a surprisingly polished user experience for a self-hosted application. Whether you are running a personal photo archive, a modelling showcase, or a private media gallery, Lychee provides an elegant and fast platform without relying on third-party cloud services.

One of the nice aspects of Lychee is its flexibility. While the default installation already looks great, there are situations where adding small customizations can significantly improve navigation and usability – especially when integrating Lychee into a larger ecosystem such as a forum, blog, or community website.

In my case, I wanted to add additional navigation items directly to the Lychee landing page menu so visitors could quickly access related services like the forum and blog. Since Lychee itself does not currently provide a built-in option for extending the landing page navigation, a simple custom JavaScript solution works perfectly.

The following script waits until the landing page menu has fully loaded and then dynamically injects new menu entries. This approach avoids modifying the core application files directly and makes future updates much easier to manage.

Copy to Clipboard

function waitForLanding() {
    // Check if the url is a tld
    const tld = window.location.href.slice(0, -1).split(".").slice(-1)[0];
    if (tld.length === 3 || tld.length === 2 || tld === 'test') {
        const num = document.querySelectorAll(".animate-landingAnimateDown .menu").length;
        if (num === 0) {
            setTimeout(waitForLanding, 1000);
        } else if (num === 1) {
            const elem = document.querySelector(".animate-landingAnimateDown .menu");

// Forum Menüpunkt
            const forumElem = document.createElement("li");
            forumElem.classList.add("menu-item", "relative", "block", "float-right", "pt-6", "pb-5", "px-3");
            forumElem.innerHTML = '<a href="https://forum.dubz-modelling-world.com/" class="cursor-pointer block text-xs uppercase font-normal text-surface-0 hover:text-muted-color">Forum</a>';
            elem.appendChild(forumElem);

// Blog Menüpunkt
            const blogElem = document.createElement("li");
            blogElem.classList.add("menu-item", "relative", "block", "float-right", "pt-6", "pb-5", "px-3");
            blogElem.innerHTML = '<a href="https://blog.dubz-modelling-world.com/" class="cursor-pointer block text-xs uppercase font-normal text-surface-0 hover:text-muted-color">Blog</a>';
            elem.appendChild(blogElem);
        } else {
            return; // we done.
        }
    }
}

waitForLanding();

The script can be included as a separate custom JavaScript file and loaded alongside your Lychee installation. Once active, the additional menu items are automatically appended to the existing landing page navigation without altering the original Lychee source code.

This is a simple but effective way to integrate Lychee more seamlessly into a broader self-hosted platform while keeping the installation clean and update-friendly.

Lychee Landing Page with Custom Menu Items

Extending the Lychee Landing Page with Custom Menu Items

Share This Story, Choose Your Platform!