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?
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.
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.
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)
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 :)
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
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.
or
Forget about ie6 and try this
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.
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)
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
@bob .. super solution! That's just what I needed.
Thanks
Jesper
is working on a reply...