How to use images in themes ?

[esiao]

I want to use an image in my theme that would be used at several places (avatar styling)
For this I've created a img folder in my theme and from my .less file I call it correctly (like I would do on a normal project) but NodeBB seems to interpret the adress from the client side and not server one. I don't think that giving the path to the theme is the correct way to do so but seems also like the only alternative I have. What are your advices ?

[vatsal]

hey how did you pulled this off? I am on a similar mission ;). Actually I am creating a custom landing page which has lots of graphics to be included in that page.

[esiao]

@vatsal You just need in your plugin.json file to include the folder in the StaticDirs giving something allong the lines

"staticDirs": {
	"images": "public/images"
},

And put your images in public/images, then in your theme use it with /plugins/your-theme-name/images/image.extension

[vatsal]

@esiao will try thanks

[xCausxn]

Hey There,

You need to first clone or setup a theme directory.
I recommend forking: https://github.com/NodeBB/nodebb-theme-lavender

Then what you need to do is edit the less files which get compiled on nodebb restart.

You can override the css either manually in the style.less by doing:

span.user-picture:before {
background: url('IMAGELINK');
}

or you could try and find the corresponding element in the variables.less

Havent done themes in ages so might be a bit outdated.

Hope this helps
xCausxn

[vatsal]

it helped thanks!

[vatsal]

@esiao hey are you sure it would be /plugins/your-theme-name/images/image.extension and not /plugins/your-theme-name/public/images/image.extension

[esiao]

@vatsal Yes I'm sure "folder-name" : "public/folder-name" means you can use /plugins/your-theme-name/folder-name/whatever
The first parameter correspond to the name that will be used after theme-name/folder, while second parameter means this alias points to path.