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)

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,