How to display size and icon for pdf and word docs?

Question

Hi, I have webpages that contain links to word documents and pdf files. For each link I want to display the file size and an icon showing what the file type is.

I'm thinking the best way to do this would be with CSS? Can anybody give me an example of how to do this?

Thanks!

Answer 1

When you create the link html you will need to specify the css class based on the file type you are linking to eg:

<a class="document" href="http://someurl.com/some/file/worddoc.doc" title="Your file size could go here">Word Doc</a>
<a class="pdf" href="http://someurl.com/some/file/somefile.pdf"&gt;PDF File</a>

In your css:

.document {
  padding-left: 24px; /* size of icon +  a bit */
  background: url('document.png') no-repeat;
  background-position: left;
}

In your code behind you can add the following to get the file size, assuming the file is on disk. You would then need to convert this to something more readable and add it to the "title" attribute in the example links above.

System.IO.FileInfo info = new System.IO.FileInfo("filename");
long fileSizeInBytes = info.Length;

Or something along those lines. Above is not tested.