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="ArticleStatusIcon" title="TKB article" id="display_0" src="/skins/images/CC9089B090CA08394A664FC599785C68/base/images/icon_tkb_thread.png"/>

 

What's the nice way to reference those images? e.g. is there a freemarker variable that returns the image base path?

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