• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Theme Images

Scheduled Pinned Locked Moved Technical Support
8 Posts 4 Posters 4.5k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • danielflippanceD Offline
    danielflippanceD Offline
    danielflippance
    wrote on last edited by danielflippance
    #1

    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.

    • https://community.nodebb.org/topic/2211/how-to-use-images-in-themes
    • https://community.nodebb.org/topic/1636/can-t-find-css-images/2

    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?

    pichaliteP 1 Reply Last reply
    0
  • pichaliteP Offline
    pichaliteP Offline
    pichalite Plugin & Theme Dev
    replied to danielflippance on last edited by
    #2

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

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

    1 Reply Last reply
    0
  • danielflippanceD Offline
    danielflippanceD Offline
    danielflippance
    wrote on last edited by
    #3

    @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

    pichaliteP 1 Reply Last reply
    0
  • pichaliteP Offline
    pichaliteP Offline
    pichalite Plugin & Theme Dev
    replied to danielflippance on last edited by
    #4

    @danielflippance works for me on my custom theme

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

    1 Reply Last reply
    0
  • danielflippanceD Offline
    danielflippanceD Offline
    danielflippance
    wrote on last edited by
    #5

    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.

    yariplusY 1 Reply Last reply
    0
  • yariplusY Offline
    yariplusY Offline
    yariplus Community Rep
    replied to danielflippance on last edited by
    #6

    @danielflippance

    You need to add the staticDirs to plugin.json

    S 1 Reply Last reply
    0
  • danielflippanceD Offline
    danielflippanceD Offline
    danielflippance
    wrote on last edited by
    #7

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

    1 Reply Last reply
    1
  • S Offline
    S Offline
    santoshkumarr
    replied to yariplus on last edited by
    #8

    @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

    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development