Forum Discussion

Claudius's avatar
Claudius
Boss
12 years ago

Correct URL to reference an images in a skin

I want to reference an image ressource within my community style from within my CSS. Let's take as an example the "icon_paging_page_arrow_next.png" right facing arrow from my skin called "Skype". A...
  • YuriK's avatar
    YuriK
    12 years ago

    Hey Claudius,

     

    You can reference skin images in the skin css as follows:

     

    a.mypic {
        background: transparent url(${images.icon_paging_page_arrow_next.url}) no-repeat left top;
    }

    See this post for more info How to reference images?  The only difference here is that you don't need the "skin." as you are already in the skin.

     

    Hope this helps,

     

    Yuri

     
nathan's avatar
nathan
Executive
12 years ago

Within studio, you can find the correct URL for an image by doing the following:

  1. Click on the Community Style tab
  2. From the 'Work With' combo box, select Asset Library
  3. Select the 'Other Assets' tab

You should now see a list of all the uploaded images. The value in the 'RELATIVE URL' column is the URL you want in your CSS.

 

It's best not to include the domain, otherwise it may not work in all environments.

 

So, for example, if you have an image with the RELATIVE URL of /html/assets/mypic.png then your CSS rule would look something like:

 

a.mypic {
  background: transparent url("/html/assets/mypic.png") no-repeat left top;
}

 

  • Claudius's avatar
    Claudius
    Boss
    12 years ago
    Thanks for your reply. Your instructions help if I've uploaded an image as an asset, but not when you are using an image in "Community Styles -> Images" - either the stock Lithium one or one that you've replaced it with.
    e.g. the disabled kudos button here on Lithosphere is referenced as "/skins/images/165F838B0E595B2652592D2FE384FDFD/castlerockui/images/button_kudos_v2_h_disabled.png".

    I want to use a reliable URL that works to reference image resources within a skin on my community that works consistently across stage and production.
    • YuriK's avatar
      YuriK
      Khoros Expert
      12 years ago

      Hey Claudius,

       

      You can reference skin images in the skin css as follows:

       

      a.mypic {
          background: transparent url(${images.icon_paging_page_arrow_next.url}) no-repeat left top;
      }

      See this post for more info How to reference images?  The only difference here is that you don't need the "skin." as you are already in the skin.

       

      Hope this helps,

       

      Yuri

       
      • Claudius's avatar
        Claudius
        Boss
        12 years ago
        Haha! I recall I asked that question earlier, but couldn't find it again. Thanks for digging it up.