Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jul 09, 2009 @ 12:06
    Warren Buckley
    0

    How could I display different icons for different file types?

    Hello all,

    I have a document section of this site I am currently working on, where it lists each child node as a sperate document which have an upload property on it.

    When displaying the files out with XSLT is there a way to detect the file extension and then display a different file icon for each file.

    For example a .pdf file will display a PDF icon and .doc file will display a word document icon etc...

    I am currently thinking about an XSLT extension possibly, but I was wondering if anyone has done this before, if so how have you solved it?

    Thanks,
    Warren :)

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 09, 2009 @ 12:10
    Jan Skovgaard
    0

    Hi Warren

    I'm thinking that it should be possible to determine the file type by using the substring function? Then you would just check on the result of the substring to determine, which icon you should display.

    /Jan

  • dandrayne 1138 posts 2262 karma points
    Jul 09, 2009 @ 12:14
    dandrayne
    100

    I guess in xslt you could use "contains()" or "ends-with()" to check for the extensions, but this can also be done just in css. 

    <xsl:if test="contains($fileName,'.pdf')">add pdf icon</xsl:if>

    or

    <xsl:if test="ends-with($fileName,'.pdf')">add pdf icon</xsl:if>

     

    Forget about ie6 and try this

    a[href$='.pdf'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(images/pdficon.gif) center left no-repeat;
    }

    a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(images/excelicon.gif) center left no-repeat;
    }

    a[href$='.ppt'], a[href$='.pps'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(images/ppticon.gif) center left no-repeat;
    }

    a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(images/wordicon.gif) center left no-repeat;
    }

    a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(images/zipicon.gif) center left no-repeat;
    }
  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jul 09, 2009 @ 12:16
    Warren Buckley
    0

    Thanks ddryane I totally forgot about the CSS3 selectors I just need to be 100% sure if we are not supporting IE6, otherwise the XSLT solution just looks as good.

  • dandrayne 1138 posts 2262 karma points
    Jul 09, 2009 @ 12:17
    dandrayne
    0

    A potential problem with substring is that extensions can be between one and 4 chars long, perhaps there is a way around this though.  i should also add checks for word 2007 files in the css above (docx, pptx etc)

  • bob baty-barr 1180 posts 1294 karma points MVP
    Jul 20, 2009 @ 17:50
    bob baty-barr
    1

    i have seen some jquery tutorials regarding this as well...

    http://cool-javascripts.com/jquery/add-icons-to-your-links-automatically-using-jquery-css.html

     

  • Jesper Ordrup 1019 posts 1528 karma points MVP
    Jul 24, 2009 @ 09:43
    Jesper Ordrup
    0

    @bob .. super solution! That's just what I needed.

    Thanks

    Jesper

Please Sign in or register to post replies

Write your reply to:

Draft