Theme Images

danielflippance

I've followed the instructions in these two threads but I'm not able to get images from my theme to show in a browser.

My theme is structured like this:

0_1451956847379_Screen Shot 2016-01-04 at 5.19.58 PM.png

I have the following in my theme.json:

{
    "id": "nodebb-theme-mytheme",
    "screenshot": "screenshot.png",
    "staticDirs": {
        "images": "static/images"
    } 
}

HTML added to header.tpl:

<a id="homeLink" href="/myHref">&nbsp;</a>

Here's the CSS:

#homeLink {
    background-image: url("/plugins/nodebb-theme-mytheme/images/lpb-logo.jpg");
    border: solid 1px red;
    height: 65px;
    width: 302px;
}

Here's what I see

0_1451951770541_Screen Shot 2016-01-04 at 3.55.51 PM.png

I've tried adding the image using CSS with all the following URLs, restarting NodeBB after each change to the CSS but none have worked:

background-image: url("/plugins/nodebb-theme-mytheme/images/lpb-logo.png");
background-image: url("/plugins/nodebb-theme-mytheme/static/images/lpb-logo.png");
background-image: url("/plugins/mytheme/images/lpb-logo.png");
background-image: url("/plugins/mytheme/static/images/lpb-logo.png");
background-image: url("/nodebb-theme-mytheme/images/lpb-logo.png");
background-image: url("/nodebb-theme-mytheme/static/images/lpb-logo.png");
background-image: url("/mytheme/images/lpb-logo.png");
background-image: url("/mytheme/static/images/lpb-logo.png");
background-image: url("/images/lpb-logo.png");
background-image: url("/static/images/lpb-logo.png");

I've also tried using the URLs directly in the browser but that didn't work either. I've tried all the same URLs but with a .png file but no difference. I've tried prefixing everything with http://localhost:4567 but no difference.

Is there some kind of cache I need to flush or similar?

pichalite

@danielflippance what do you get when you open this in a browser?

http://[yourdomain]/plugins/nodebb-theme-mytheme/images/lpb-logo.png

danielflippance

@pichalite said:

]/plugins/nodebb-theme-mytheme/images/lpb-logo.png

I get a Not Found error:
0_1451956713258_Screen Shot 2016-01-04 at 5.17.44 PM.png

pichalite

@danielflippance works for me on my custom theme

what does the URL in your config.json look like?

danielflippance

From config.json:

"url": "http://localhost:4567",

I tried it with "http://127.0.01:4567" and "http://0.0.0.0:4567" with the same results.

yariplus

@danielflippance

You need to add the staticDirs to plugin.json

danielflippance

Thanks @yariplus. I moved the staticDirs to a new plugin.json, I added a package.json and the problem is now fixed.

santoshkumarr

@yariplus I'm trying in the same way like you mentioned.
created: static/images in node_modules/nodebb-theme-persona
in plugin.json i have added the below line
"acpScripts": [
"lib/admin.js"
],
"staticDirs": {
"images": "static/images"
}
and in the header file i'm trying to get the image like below
<img src="/plugins/nodebb-theme-persona/images/logoWithText.png" />

but this is not working. Please suggest what am i doing wrong

Thanks