Adding a customizable background image


  • Stylus developer

    I couldn’t tell if the variables added to a theme can be nested. I tried, but I couldn’t get the theme to save.

    Basically on USO, we have it set up like this:

    The user can disable the use of a background image by selecting “No”, or use the default, original, enter a custom image URL or upload an image.

    It’s set up in the options as follows:

    The /*[[bg-url]]*/ is added if the user selects “Yes”, and is defined as a separate variable. USO handles the custom & uploadable images.

    I tried to duplicate these, but I don’t know if this will work. Here’s what I ended up with:

        {
            "type": "checkbox",
            "label": "Add a background image?",
            "name": "bg-choice",
            "value": "Yes",
            "default": "bg-yes",
            "options": [
                {
                    "name": "Yes",
                    "label": "bg-yes",
                    "value": "url(/*[[bg-url]]*/)"
                },
                {
                    "name": "No",
                    "label": "bg-no",
                    "value": "none"
                }
            ]
        },
        {
            "type": "text",
            "label": "Background image",
            "name": "bg-url",
            "value": "Default",
            "default": "bg-default",
            "options": [
                {
                    "name": "Default",
                    "label": "bg-default",
                    "value": "data:image/png;base64,...="
                },
                {
                    "name": "Original",
                    "label": "bg-original",
                    "value": "data:image/png;base64,..."
                }
            ]
        }