Is it possible to display icons next to files?

sekhu · 2006-04-01 20:44:32

I’d like to display specic icons for file uploads from specifc categories and all categories

For example:

Icon | file name

Thanks in advance

thebombsite · 2006-04-01 20:49:34

Did you mean something simple like I use cuz I know you. You ask the easy question then hit us with the crap when we think we’ve solved it. ;) And does it have to be an icon?

Last edited by thebombsite (2006-04-01 21:01:14)

Elenita · 2006-04-01 21:32:25

Or something similar to <a href=“http://textgarden.org/”>TextGarden</a>?

els · 2006-04-01 21:44:45

Can I join you in guessing? ;)

I think sekhu means displaying an icon depending on the file category, a bit like upm_category_image, but now for files.

A plugin request maybe?

thebombsite · 2006-04-01 21:57:56

I tend to go into the kitchen and cook something for a long time when sekhu asks questions. ;)

wet · 2006-04-01 22:19:10

Has CSS vanished from earth’s surface on April, 1?

Assuming common filenames (basepart dot extension) you can extract the extension from the download filename, style a part of your filelist with a proper class and attach a tiny icon to it.

First, a small in-line PHP will extract a proper class name and add it to a <p> element surrounding the file description. Add this to your file form:

<p class="
<txp:php> 
$fn = file_download_name( array () );      # read download filename
$ext = explode('.', $fn);     # split at dot
$ext = $ext[ count ($ext - 1) ];      # assume last part is extension, a file type
echo $ext.'-icon">'      # build class name, e.g. "foo-icon"
</txp:php>
<txp:file_download_name /></p>

Which leaves us with a HTML snippet like that:

<p class="foo-icon">somethinguseful.foo</p>

Then make it up with a little background styling:

p.foo-icon { background: url(iconic-foothing.gif) no-repeat left top; padding-left: 20px; }
p.pdf-icon { background: url(iconic-acrobat.gif) no-repeat left top; padding-left: 20px; }
p.txt-icon { background: url(iconic-writer.gif) no-repeat left top; padding-left: 20px; }
p.xls-icon { background: url(iconic-accountant.gif) no-repeat left top; padding-left: 20px; }
p.php-icon { background: url(iconic-codemonkey.gif) no-repeat left top; padding-left: 20px; }

Provide styles for every type of file you use. Just a thought, I will have to try and weed out the probably unavoidable typos in case I guessed your requirements correctly.

If the request is about a single icon for all files of a certain file download category, you can omit all the php mumbo jumbo:

<p class="<txp:file_download_category />-icon"><txp:file_download_name /></p>

HTH.

//w&

Last edited by wet (2006-04-06 17:04:16)

sekhu · 2006-04-02 00:43:42

ok i’ll try to explain a bit more.

I have four categories created for files:

mp3 new
mp3 old
mp3 preview
ahx

What I’d like to see is when I upload say a file which belongs to the category mp3 new display on the page as a file under that category with an icon next to the file name, with that icon used exclusively for that category and files belonging to it.

So:

MP3 New
star icon | file 1.mp3
star icon | file 2.mp3
star icon | file 3.mp3

MP3 Old
egg timer icon | file 1.mp3
egg timer icon | file 2.mp3
egg timer icon | file 3.mp3

AHX
custom icon | file 1.ahx
custom icon | file 1.ahx
custom icon | file 1.ahx

so gleaming from Wet’s detailed reply, would that be the way to go?

thanks again for the replies

Last edited by sekhu (2006-04-02 00:45:31)

wet · 2006-04-02 07:09:33

Sure it would.

Put this into the form displaying your file names:

<p class="<txp:file_download_category />"><txp:file_download_name /></p>

Then decorate each of the categories with its own icon in the stylesheet:

p.mp3new { background: url(star.gif) no-repeat left top; padding-left: 20px; }
p.mp3old { background: url(eggtimer.gif) no-repeat left top; padding-left: 20px; }
p.ahx { background: url(custom.gif) no-repeat left top; padding-left: 20px; }

Keep in mind that class names must not contain white space so you will have to amend your category names accordingly, “mp3old” instead of “mp3 old” and so on.

Last edited by wet (2006-04-06 17:03:38)

sekhu · 2006-04-02 09:09:08

so does this mean when a file is uploaded and displayed on the page, it will have it’s relevant icon next to it? In practice there would be several files displayed from a given category with the icon next to each file name.

Given the info, should I use the latter code in your post, the former, or both? Also can the category names be hypenated?

This sounds very promising, and I hope it works.

Thanks again for your time

Here’s how the site currently looks, so the little icons would sit next to each file

Here’s my current files form:

<code><div class=“files”>
<txp:file_download_link>
<txp:file_download_name /> <br />[<txp:file_download_size format=“auto” decimals=“2” />] (<txp:file_download_downloads /> downloads)
</txp:file_download_link>
</div></code>

EDIT: I tried the above code as follows:

<code><div class=“files”>
<txp:file_download_link>
<p class=”<txp:file_download_category />”><txp:file_download_name /></p>
<br />[<txp:file_download_size format=“auto” decimals=“2” />] (<txp:file_download_downloads /> downloads)
</txp:file_download_link>
</div></code>

CSS is:

<code>p.mp3new {
background-image: url(../images/mp3new.gif) no-repeat left top; padding-left: 20px; }

p.mp3old {
background-image: url(../images/mp3old.gif) no-repeat left top; padding-left: 20px; }

p.mp3preview {
background-image: url(../images/mp3old.gif) no-repeat left top; padding-left: 20px; }

p.ahx {
background-image: url(../images/ahx.gif) no-repeat left top; padding-left: 20px; }</code>

Now the path to the images is correct, but they’re not displaying?

Last edited by sekhu (2006-04-02 10:14:50)

whatbrick · 2006-04-02 16:45:05

so does this mean when a file is uploaded and displayed on the page, it will have it’s relevant icon next to it?

Correct.

Also can the category names be hypenated?

Yes, they can be hyphenated. The reason you cannot have spaces in a class name is because you can have multiple classes assigned to the same element, like class="topnav mainlink". That element would then use the rules for both the classes topnav and mainlink, though if both topnav and mainlink had a border rule listed, only the border from mainlink would be used.

EDIT: I tried the above code as follows:

I don’t think background-image will accept anything other than a url to the image file, so adding no-repeat left top makes that rule invalid, thus ignored by the user-agent. Use background: transparent url(blah blah) no-repeat left top;. Also, are you positive that the path to the images are correct? When in doubt, I’ll use absolute url’s like http://domain.com/images/image.gif. You may want to try alternative paths to see which ones will work, such as url(images/mp3new.gif).

sekhu · 2006-04-02 23:31:56

yes, the path is correct- the full patch would be:

http://sekhu.net/dev2/images/ahx.gif

That displays the image, but when I enter that same path it still fails to show. I’ve removed the padding but still no love.

whatbrick · 2006-04-02 23:58:34

In order to troubleshoot most CSS issues, I start with the web-developer extension for Firefox, which allows me to edit the CSS file and see the changes take effect in real-time. It’s a handy tool to have and it is the reason I asked about the correct path to the image. I was able to make the icons appear by using the following styles:

p.mp3new { 
background: transparent url(images/mp3new.gif) no-repeat left top;
padding-left: 12px; }

p.mp3old {
background: transparent url(images/mp3old.gif) no-repeat left top;
padding-left: 12px; }

p.mp3preview {
background: transparent url(images/mp3old.gif) no-repeat left top;
padding-left: 12px; }

p.ahx {
background: transparent url(images/ahx.gif) no-repeat left top;
padding-left: 12px; }

The path to the images are different. The way you have them now, the CSS is looking for the images at http://www.sekhu.net/images which, of course, doesn’t exist. I know that doesn’t make much sense, considering the path TXP uses to link to it’s stylesheet(http://www.sekhu.net/dev2/textpattern/css.php?s=default), but it’s the only thing that worked (other than listing the absolute url).

Fun, isn’t it? :)

Textpattern CMS

Textpattern CMS support forum

#1 2006-04-01 20:44:32

Is it possible to display icons next to files?

#2 2006-04-01 20:49:34

Re: Is it possible to display icons next to files?

#3 2006-04-01 21:32:25

Re: Is it possible to display icons next to files?

#4 2006-04-01 21:44:45

Re: Is it possible to display icons next to files?

#5 2006-04-01 21:57:56

Re: Is it possible to display icons next to files?

#6 2006-04-01 22:19:10

Re: Is it possible to display icons next to files?

#7 2006-04-02 00:43:42

Re: Is it possible to display icons next to files?

#8 2006-04-02 07:09:33

Re: Is it possible to display icons next to files?

#9 2006-04-02 09:09:08

Re: Is it possible to display icons next to files?

#10 2006-04-02 16:45:05

Re: Is it possible to display icons next to files?

#11 2006-04-02 23:31:56

Re: Is it possible to display icons next to files?

#12 2006-04-02 23:58:34

Re: Is it possible to display icons next to files?

Board footer