Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.


SOLVED Element custom background



  • 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


  • Staff

    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/



  • @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.



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


  • App Dev

    @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",
    
    

    4d79e6fc-2ff9-4479-9a94-a404fac4c243-image.png



  • @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


  • App Dev

    @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


  • Staff

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


  • Staff

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



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


Log in to reply