Keystone-classic: Change Admin UI login image

[lazamar]

Is there a way to change the logo in the AdminUI login screen? I didn't find it in the docs.

[jossmac]

@lazamar @mathemagik It seems this is undocumented! Will jump on that today.

You can set this in your keystone config - signin logo accepts a string of url or an array of url, width, and height.

keystone.set('signin logo', '../logo.png');

// Alternatively

keystone.init({
  ...
  'signin logo': ['../logo.png', 200, 100]
});

Should really be an object with named properties...

[lazamar]

I am setting this property but the image continues the same. Is it working in your project?

[jossmac]

Have you run node keystone.js again?

[lazamar]

Yes. And also tried cleaning the cache and opening in a different browser. It still references the same image.

[jossmac]

That's odd. What version of keystone are you running?

[lazamar]

Version 0.4.0. I have my package.json pointing to the the project's github repository to get the latest version of Keystone as recommended in issue 1612, so it looks like this:

"keystone": "https://github.com/keystonejs/keystone.git",

[jossmac]

Thanks! Fixed now - npm install keystone again and it should be working

Let me know how you go

[lazamar]

Yep! Working like a charm. Thanks.

[jossmac]

No worries :)

[IamGabrielWu]

Hi @lazamar @jossmac I followed above to npm install keystone and still it looks like my logo can't be added to the sign in page of Admin UI

As below:

from the log on console i can see web.svg is found and also i can see the web.svg is loaded at browser side.

the logo picture is put under the root folder of public in my project.

Here's my code

var keystone = require('keystone');
keystone.init({

  'name': 'mysite',

  'favicon': 'public/favicon.ico',
  'less': 'public',
  'static': ['public'],

  'views': 'templates/views',
  'view engine': 'jade',

  'auto update': true,
  'mongo': 'mongodb://localhost/metinvest_site',
  'session': true,
  'auth': true,
  'user model': 'User',
  'cookie secret': '(your secret here)'

});
console.log('running enviroment: '+keystone.get('env'))
**keystone.set('signin logo', 'web.svg');**
require('./models');

keystone.set('nav', {
    'users': 'users',
    'business': ['projects', 'stocks']
});

keystone.set('routes', require('./routes'));

keystone.start();

[jossmac]

From the "broken image" icon it looks like the path to your SVG is incorrect.

Can you access the file from localhost:3000/web.svg?

[IamGabrielWu]

@jossmac yes. i can access the file from localhost:3000/web.svg. if the picture for admin UI logo is not supposed to be under the public folder, where is it supposed to be ? i have no clue where i should modify to change admin UI.

[IamGabrielWu]

@jossmac i fixed the problem by change the path of picture.

keystone.set('signin logo', '../images/logo.png');

default it's looking for logo under node_module/keystone/..., after i add ' .. ' and picture placed under public/images, it can reference to the picture i expect.

[jossmac]

Yup, that looks right

[jgar2020]

For Keystone5, is there a different way to change the logo for the admin ui login page?