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

9 Replies

Sort By
  • 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
  • cmathers's avatar
    cmathers
    Contributor
    12 years ago

    I'm confused. I have tried both 

    background: url(${skin.images.icon_paging_page_arrow_previous_dis_rtl.url}) no-repeat 0 0;
    and 

    background: url(${images.icon_paging_page_arrow_previous_dis_rtl.url}) no-repeat 0 0;

     

    and after using the browser inspector, I see the exact code that I input in my css. It does not resolve the freemarker code.

     

    When I try <img src="${skin.images.icon_paging_page_arrow_previous_dis_rtl.url}" /> in a custom component, it correctly outputs the image. The image path resolves to 

    <img src="/skins/images/527CD50CEF9AB8B1878F31BDA6C33AE2/hbo-439108329/images/icon_paging_page_arrow_previous_dis_rtl.png">

     

    What am I doing wrong when using in a CSS file?

  • Gursimrat's avatar
    Gursimrat
    Leader
    12 years ago

    Can we also upload the .js file and font files such as .ttf etc and call them in the wrapper head? if so, how?

     

    Thanks

    Gursimrat

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    12 years ago

    Hi Gursimrat,

     

    absolutely. You can use the Asset Library in Studio to upload and serve these files. There is the asset.get method that will help you out with that - files served in this way will also benefit from our CDN. If you are not sure about the upload function, have a look here.

     

    If you are planning to use custom fonts (as it seems from your message) I strongly reccommend uploading them in our asset library - as some browsers (IE and FF) are quite strict with cross domain policies and would refuse to load them if they are not served from the same domain.

     

    Hope that helps,

  • Gursimrat's avatar
    Gursimrat
    Leader
    12 years ago

    Great, so I am importing the js files like this in my wrapper Head

     

    <script src="${asset.get("/html/assets/color_box.js")}"></script>

     

    and font files like this

     

    <script src="${asset.get("/html/assets/case-font.ttf")}"></script>

     

    Is it correct?

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    12 years ago
    Yes - that should be okay and make use of the CDN.