Forum Discussion

Claudius's avatar
Claudius
Boss
13 years ago

How to reference images? image base path?

Currently hacking together a custom component referencing some of the stock images. I'm currently referencing them with the relative path including the versioning path component: <img class="Article...
  • MoniqueL's avatar
    MoniqueL
    13 years ago

    Ah, my bad, I missunderstood. The format I posted eariler is what you use to refrence images in the skin.css file. For your component, the image path should look something like this.

     

    <img src="${("skin.images.icon_tkb_thread.url")}" />

    As for your follow up, as long as you're using our core images, this "skin.images.<file name minus file type>.url" path should work, regardless of it being a mobile or desktop image (I believe all the file names for each view are unique). If an image for both instances shares the same name, then I would suggest saving the image, giving it a unique name, and adding it to the skin as 'Other assets' and then you can refrencing each one. Although the path now changes to " /html/assets/<filename>"

MoniqueL's avatar
MoniqueL
Lithium Alumni (Retired)
13 years ago

If you're trying to refrence lithium core, default images or images that Professional services has added for you that were custmoized over-rides of the lithium core images, you'll need to use this images path

 

(${images.icon_tkb_thread.url})

 Otherwise, if you wanted the relative path to an image you've uploaded via studio as an asset, that path would be

 

url("/html/assets/<image-file-name>.png")

 

  • Claudius's avatar
    Claudius
    Boss
    13 years ago

    Hi Monique,
    thanks for your reply. that doesn't work out though as that context object seems to be undefined here. Using your code I get a Freemarker template Error:

    Expression images is undefined

     And a follow up question: Is there a way to use the image context object to access the image ressource in a certain skin? I might want to use the mobile skin ressources in one part of the component and the desktop one in another.

    • MoniqueL's avatar
      MoniqueL
      Lithium Alumni (Retired)
      13 years ago

      Ah, my bad, I missunderstood. The format I posted eariler is what you use to refrence images in the skin.css file. For your component, the image path should look something like this.

       

      <img src="${("skin.images.icon_tkb_thread.url")}" />

      As for your follow up, as long as you're using our core images, this "skin.images.<file name minus file type>.url" path should work, regardless of it being a mobile or desktop image (I believe all the file names for each view are unique). If an image for both instances shares the same name, then I would suggest saving the image, giving it a unique name, and adding it to the skin as 'Other assets' and then you can refrencing each one. Although the path now changes to " /html/assets/<filename>"

      • allensmith81's avatar
        allensmith81
        Boss
        13 years ago
        FYI I found there are to many brackets in that.

        <img src="${skin.images.icon_tkb_thread.url}" />

        remove the () and the extra set of qoutes works