Custom Logo for my theme on annotation tasks

,
1

I want to change the logo at top left corner to my logo. I see the code that assigns this logo has option to pick from custom_theme. I tried to give path to my logo's png file but that did not work. Can you please share how can I add my own logo?
Below is what my prodigy.json file looks like

{
  "custom_theme": {
    "logo": "path/to/my/image.png"
  }
}

This is the snippet that I am talking about

const Header = withStyles$1(styles$F)(_Header),
            CustomLogo = ({ theme, width, height }) =>
                jsxRuntimeExports.jsx("img", {
                    src: theme.logo,
                    width,
                    height,
                }),
......
        class Logo extends React.Component {
            render() {
                const { theme, showLink, url } = this.props,
                    logo =
                        theme && theme.logo
                            ? jsxRuntimeExports.jsx(CustomLogo, {
                                  ...this.props,
                                  theme,
                              })
                            : jsxRuntimeExports.jsx(ProdigyLogo, {
                                  ...this.props,
                              });
                return showLink && url
                    ? jsxRuntimeExports.jsx("a", { href: url, children: logo })
                    : logo;
            }
        }
2

Welcome to the forum @bx-shantanu :wave:

I'm afraid it's currently impossible to modify the logo via custom_theme settings.
Instead, you'd need to substitute it via custom javascript.
Assuming you have your logo.png hosted somewhere e.g. S3 or Imgur (the browser won't allow loading files from local paths for security reasons), you could add the following javascript file:

const img = 'https://{path-to-my}/logo.png'
const svg = document.querySelector('.prodigy-sidebar-title svg')
const image = document.createElement('div')
image.innerHTML = `<img src="${img}" width="100" height="29" />`
svg.replaceWith(image)

This javascript file should be placed in a dedicated dir e.g.custom_js directory. You can then plug it into Prodigy by adding the following line to prodigy.json

"javascript_dir": "/path/to/custom_js"

You could also define it from the level of the recipe if that's more convenient by passing the javascript string to javascript key of the config returned from the recipe.

1 Like
3

This works! thank you so much @magdaaniol :raised_hands:

1 Like