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". According to the KB article Uploading your own images using Studio I should simply use "res/skins/Skype/images/icon_paging_page_arrow_next.png" as the image url for this, but http://community.skype.com/res/skins/Skype/images/icon_paging_page_arrow_next.png is an invalid ressource :(

 

What's the correct way to reference skin images from within CSS?

 

  • 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