SOLVED Element custom background

[Clipper]

Hi,

I'm running a Cloudron on AWS E2 (from marketplace) with a Matrix App and an Element App.

I'd like to make use of the Element custom branding such as WelcomeBackgroundUrl as per
Configure auth footer links through Riot config #9297

But apparently the entire filesystem except /app/data is read-only. Where could I store a background image which would be served (accessible) and not deleted upon package updates ?

Thanks

[nebulon]

On Cloudron apps run in a read-only filesystem for the most part. Potential customization files will reside in /app/data
In your case the config.json can be edited as mentioned in https://docs.cloudron.io/apps/element/

[Clipper]

@nebulon Yes, I know that, and I did However what URL could I use for a setting like WelcomeBackgroundUrl that could actually be served by the web server ?

currently the background image is url("themes/element/img/backgrounds/lake.jpg"), relative to /app/code/. I can upload another background image in /app/data but it will be unreachable. Would it be possible to symlink a new /app/code/themes/custom/ directory to /app/data/themes/ ?

So that we could set e.g. "welcomeBackgroundUrl": "themes/custom/mynicebg.jpg"
and upload the file into /app/data/themes/mynicebg.jpg

Hope it's more clear like that.

[ruihildt]

@Clipper If it's relative to /app/code, you could try doing ../data/folder/image.jpg.

[murgero]

@Clipper You can use an external image, in the following config example, I used minio on my server to change the backround and logo images, I recommend surfer though for the easier upload and sharing of the images.

(I used the cloudron logo as an example without permissions, copyrights to the cloudron team.)
(Background from google images)

config.json:

  "disable_custom_urls": true,
  "disable_guests": true,
  "disable_login_language_selector": false,
  "disable_3pid_login": true,
  "brand": "Riot",
  "branding": {
    "welcomeBackgroundUrl":"<external_URL>",
    "authHeaderLogoUrl":"<external_URL>"
  },
  "integrations_ui_url": "https://scalar.vector.im/",
  "integrations_rest_url": "https://scalar.vector.im/api",

[Clipper]

@ruihildt said in Element custom background:

@Clipper If it's relative to /app/code, you could try doing ../data/folder/image.jpg.

Yeah... nice try but that would be pretty silly if it worked, as you could access ../data/config.json or even ../../etc/shadow straight from any browser . There is a good reason why web roots exist.

I'll go for the external URL as @murgero proposed. However I think it's a horrible idea to rely on external sources. I still like my idea of a /app/code/themes/custom -> /app/data/themes symlink

This is by the way exactly how config.json is pulled up:
/app/code/config.json -> /app/data/config.json

Thanks

[murgero]

@Clipper said in Element custom background:

However I think it's a horrible idea to rely on external sources. I still like my idea of a /app/code/themes/custom -> /app/data/themes symlink

Yeah - This would be a good bit to have in the next update @girish / @nebulon

[girish]

Makes sense, seems easy to fix. There's a new element version available now, so I will fix it up as part of that.

[girish]

This is should be fixed now. There is a custom directory /app/data/custom in the latest package.

[Clipper]

@girish Awesome thank you it works like a charm. Marking as solved.