How to use images in themes ?



  • 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 ?

    problem explained



  • 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.



  • @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



  • @esiao will try thanks 🙂



  • 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



  • it helped thanks!



  • @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



  • @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.


Log in to reply
 

Suggested Topics

  • 4
  • 6
  • 3
  • 9
  • 1
| |