Exported Images overflow in chrome

[kicker22004]

I am looking over the Wiki for something that can help me modify the exported format and all I see are themes. Can someone assist me with the export to HTML so that the images are in a frame instead of overflowing with bars.

I'm currently using a separate html to handle this and modifying each image line in the navigation.html to force it to look correct.

I'd love to see this do it during automation. Any help?

[dosubot[bot]]

Hi @kicker22004! I'm Dosu and I’m helping the Trilium team.

Trilium's HTML export is intentionally minimal and uses old frameset technology, which isn't responsive and leads to issues like image overflow in browsers such as Chrome. There isn't a built-in way to automate image framing or prevent overflow during export—customization options in the UI or Wiki are limited to themes and don't affect exported HTML structure or image handling [source].

However, if you're comfortable editing server code, you can automate image framing by modifying the export logic. The export process is modular: html.js handles the main HTML export, and images.js generates the <img> tags. You could update images.js to wrap each image in a <div> with a specific class or inline style, or add a style attribute directly to the <img> tag (for example, style="max-width:100%;border:1px solid #ccc;padding:4px;"). This would ensure all exported images are framed and constrained automatically, without manual edits after export.

There is no plugin or post-processing system for export customization, so this approach requires maintaining your changes if you update Trilium. For non-developers, a batch HTML editor or a simple script (e.g., using Python or a tool like sed) could post-process exported files to wrap images, but this is also external to Trilium itself [source].

Let me know if you want a code snippet or more details on where to make these changes.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

The export logic source files you want to modify—html.js and images.js—are inside the Docker container at /app/apps/server/src/services/export/. To access them, you can open a shell in your running container with a command like:

docker exec -it [container_name] /bin/sh

Then navigate to that directory and edit the files with a text editor available in the container (like vi or nano). Keep in mind, changes made this way will be lost if you update or recreate the container.

For persistent changes, you can either build a custom Docker image with your modifications, or use a bind mount to override that directory from your host system. The latter is more advanced and requires mapping a host directory to /app/apps/server/src/services/export/ in your Docker run command.

User data and config are stored separately in the trilium-data directory, which is typically mounted as a volume (e.g., ~/trilium-data:/home/node/trilium-data)—this is unrelated to the application source code you want to modify. More details on Docker volumes and permissions are in the Trilium Docker server installation wiki and this thread.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[kicker22004]

Short of rebuilding the docker image is there any way to modify these files?
@dosu

[eliandoran]

@kicker22004 , the HTML export format is mostly meant for importing back into Trilium, so the templates are not adjustable.

You might be able to change the CSS to solve your image sizing issues instead of each HTML individually.

Depending on your use case, you can consider exporting to Markdown instead and process those documents instead according to your needs.

Let me know what your use case is so that we can find a solution.

[kicker22004]

Thank you for the response, I'm still learning Trilium as I recently found it and wanted to use it for work because I have mountains of things to keep track of. I was drawn to the fact I could host it local and off the net for security. I wanted to modify the images so that I could send the output to others and allow them to navigate the document tree easier.

I ended up rewriting the navigation.html using a python script. It now looks to a detail.html file for instructions. It's not automated but simple enough for my use. I'll upload the files here for anyone else looking for this.

index.html
Detail Viewer.html
Rewrite-Navigation.py

Thank you for this great tool!