Make main leftside frontend image customizable

[SofienM]

Feature Request

Feature

The feature request is about making the main page's left side image customizable.

Suggested implementation

Currently, the front image is made of a linear background color and two SVGs. To make it totally customizable, I suggest allowing to set a CUSTOM_HOME_IMAGE_URL env in config.json that points to a custom file (svg or regular image) that would replace the trio of components.
Things would look like this in SimpleLayout:

export const SimpleLayout = ...
...
const leftSide = window.conf.CUSTOM_HOME_IMAGE_URL
? <Image height="100%" width="100%" src={window.conf.CUSTOM_HOME_IMAGE_URL} />
: (
            <Stack fill>
              <Box
                background={'linear-gradient(45deg, #ffbdc9 0%, #687fc9 100%)'}
                height="100%"
                width="100%"
              />
              <Box direction="column" height="100%" justify="between">
                <Box flex={{ grow: 1 }} height={{ max: '33vh' }} justify="center" margin="auto 25%">
                  <Image alt="logo" src={urlLogo} />
                </Box>
                <Box flex={{ grow: 2 }} height={{ max: '66vh' }} justify={'end'}>
                  <Image alt="illustration" src={cover} width="100%" />
                </Box>
              </Box>
            </Stack>
)
...

What I'm not sure of is where the admin would put the actual file.

A suggestion would be to add a new folder /src/frontend/magnify/apps/magnify-sites/public/custom-assets/ whose content would be ignored in .gitignore.

WDYT ?

Do you want to work on it through a Pull Request? Sure !

[sampaccoud]

This can be done with a volume mount in the Docker image and is the preferred method if this is the only customisation you have. For further customization, you can rebuild your own sandbox from the js lib. Closing the issue.