- Posts: 1
COMMUNITY FORUM
Add fileype icons on Attachmentfiles in K2 item
- Ola Åkerman
-
Topic Author
- Offline
- New Member
Less
More
13 years 6 months ago #95214
by Ola Åkerman
Add fileype icons on Attachmentfiles in K2 item was created by Ola Åkerman
Looking for a simple and straightforward solution in order to show icons next to the K2 Item/Article? Well, my take is a simple solution that after it's implemented solely relies on CSS when/if you find need to add more or new types of files.
1. Instead of hacking the original file: /components/com_k2/templates/default/item.php
I copied this to /templates/mytemplate/html/com_k2/templates/default/item.php and edited that one. This copy overrides the one in the original folder.
(You don't have to do this but it is a good idea to make future upgrades of K2 easier)
2. In addition I also moved a copy of K2.CSS into the /template/mytemplate/css/.. folder. (Again you don't have to do this but can edit the original files if you like. Just trying to help ;-)
Ok, here we go:
A. Edit /components/com_k2/templates/default/item.php (or your copy)
Find the following line at about line 300:
Replace existing code with this:
As you can see, we declare a string that we fill with the extension part of the filename by using the PHP function 'strstr()' . We then insert this extension string into the link by 'a class=""'.
Now we can make some nice CSS styling for each file extension and also easily add/remove these if/when we need to alter the icons for each type.
I've used the Silk Iconset but you can use any free icons or your own of course
B. The CSS
In K2.CSS at about line 240 add the class that you need for the file extensions. Here are a couple of examples:
Many PHP examples in regards of file extension testing are talking about the importance of testing file extensions on a mimetype basis, which are all valid discussions for those instances where you need to check validity of the file. For example when a user perform uploads. In our case these files are already entered into the K2 Attachment part of the item(article) and all necessary testing has already been performed, thus it is my opinion that you can keep this very simple.
Having problems with CSV files in K2 Attachments?
Well that is because K2 converts the file from 'mynicecsvfile.csv' --> 'mynicecsvfile.csv.txt'
Hope this helps.
Regards
Robert O. Akerman
1. Instead of hacking the original file: /components/com_k2/templates/default/item.php
I copied this to /templates/mytemplate/html/com_k2/templates/default/item.php and edited that one. This copy overrides the one in the original folder.
(You don't have to do this but it is a good idea to make future upgrades of K2 easier)
2. In addition I also moved a copy of K2.CSS into the /template/mytemplate/css/.. folder. (Again you don't have to do this but can edit the original files if you like. Just trying to help ;-)
Ok, here we go:
A. Edit /components/com_k2/templates/default/item.php (or your copy)
Find the following line at about line 300:
<?php if($this->item->params->get('itemAttachments') && count($this->item->attachments)): ?>Replace existing code with this:
<?php if($this->item->params->get('itemAttachments') && count($this->item->attachments)): ?> <!-- Item attachments --> <div class="itemAttachmentsBlock"> <span><?php echo JText::_("Download attachments:"); ?></span> <ul class="itemAttachments"> <?php foreach ($this->item->attachments as $attachment): ?> <?php //Get file type string no matter how long the extension. CSS in K2.CSS to support each format. $mimetype = ltrim(strstr($attachment->filename, "."),"."); ?> <li> <!-- Add a class to the link --> <a class="<?php echo $mimetype;?>" title="<?php echo htmlentities($attachment->titleAttribute, ENT_QUOTES, 'UTF-8'); ?>" href="<?php echo JRoute::_('index.php? option=com_k2&view=item&task=download&id='.$attachment->id); ?>"><?php echo $attachment->title ; ?> </a> <?php if($this->item->params->get('itemAttachmentsCounter')): ?> <span>(<?php echo $attachment->hits; ?> <?php echo (count($attachment->hits)==1) ? JText::_("download") : JText::_("downloads"); ?>)</span> <?php endif; ?> </li> <?php endforeach; ?> </ul> </div> <?php endif; ?>
As you can see, we declare a string that we fill with the extension part of the filename by using the PHP function 'strstr()' . We then insert this extension string into the link by 'a class=""'.
Now we can make some nice CSS styling for each file extension and also easily add/remove these if/when we need to alter the icons for each type.
I've used the Silk Iconset but you can use any free icons or your own of course
B. The CSS
In K2.CSS at about line 240 add the class that you need for the file extensions. Here are a couple of examples:
div.itemAttachmentsBlock ul.itemAttachments li a { background:url("../images/icons/silk/page_white.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.txt, { background:url("../images/icons/silk/page_white_text.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.pdf { background:url("../images/icons/silk/page_white_acrobat.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.xls, div.itemAttachmentsBlock ul.itemAttachments li a.xls, div.itemAttachmentsBlock ul.itemAttachments li a.xlsx, div.itemAttachmentsBlock ul.itemAttachments li a.xlt, div.itemAttachmentsBlock ul.itemAttachments li a.xltx { background:url("../images/icons/silk/page_white_excel.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.doc, div.itemAttachmentsBlock ul.itemAttachments li a.docx, div.itemAttachmentsBlock ul.itemAttachments li a.dot, div.itemAttachmentsBlock ul.itemAttachments li a.dotx { background:url("../images/icons/silk/page_white_word.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.pptx, div.itemAttachmentsBlock ul.itemAttachments li a.ppsx { background:url("../images/icons/silk/page_white_powerpoint.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;} div.itemAttachmentsBlock ul.itemAttachments li a.odt { background:url("../images/icons/silk/page_white_text.png") no-repeat scroll left center transparent;padding:5px 0 5px 20px;}
Many PHP examples in regards of file extension testing are talking about the importance of testing file extensions on a mimetype basis, which are all valid discussions for those instances where you need to check validity of the file. For example when a user perform uploads. In our case these files are already entered into the K2 Attachment part of the item(article) and all necessary testing has already been performed, thus it is my opinion that you can keep this very simple.
Having problems with CSV files in K2 Attachments?
Well that is because K2 converts the file from 'mynicecsvfile.csv' --> 'mynicecsvfile.csv.txt'
Hope this helps.
Regards
Robert O. Akerman
Please Log in or Create an account to join the conversation.
- Thomas Nabseth
-
- Offline
- New Member
Less
More
- Posts: 11
13 years 5 months ago #95215
by Thomas Nabseth
Replied by Thomas Nabseth on topic Add fileype icons on Attachmentfiles in K2 item
First of all, I like this idea.
I've tried to use it, but get a white page from item.php after replacing the code.
Since my php skills are close to zero, I have no idea where the problem is.
As soon as I replace your code with the original code everything is back to normal.
I'm developing locally, so I don't have any link to share. Any clue?
Regards
Thomas Nabseth
I've tried to use it, but get a white page from item.php after replacing the code.
Since my php skills are close to zero, I have no idea where the problem is.
As soon as I replace your code with the original code everything is back to normal.
I'm developing locally, so I don't have any link to share. Any clue?
Regards
Thomas Nabseth
Please Log in or Create an account to join the conversation.
- noppe
-
- Offline
- New Member
Less
More
- Posts: 5
11 years 7 months ago #95216
by noppe
Replied by noppe on topic Re: Add fileype icons on Attachmentfiles in K2 item
Thank you for this solution! This is exactly what I needed.
If anyone is interested in implementing this, you don't need to copy the whole code from above, just put this:
<?php $mimetype = ltrim(strstr($attachment->filename, "."),".");?>
under the ul line
<ul class="itemAttachments"><?php foreach ($this->item->attachments as $attachment): ?>
and add this class class="<?php echo $mimetype;?>" to the hyperlink
<a class="<?php echo $mimetype;?>" title="<?php echo htmlentities($attachment->titleAttribute, ENT_QUOTES, 'UTF-8'); ?>" href="<?php echo JRoute::_('index.php? option=com_k2&view=item&task=download&id='.$attachment->id); ?>">
And of course you have to take the above css code
If anyone is interested in implementing this, you don't need to copy the whole code from above, just put this:
<?php $mimetype = ltrim(strstr($attachment->filename, "."),".");?>
under the ul line
<ul class="itemAttachments"><?php foreach ($this->item->attachments as $attachment): ?>
and add this class class="<?php echo $mimetype;?>" to the hyperlink
<a class="<?php echo $mimetype;?>" title="<?php echo htmlentities($attachment->titleAttribute, ENT_QUOTES, 'UTF-8'); ?>" href="<?php echo JRoute::_('index.php? option=com_k2&view=item&task=download&id='.$attachment->id); ?>">
And of course you have to take the above css code
Please Log in or Create an account to join the conversation.
- Tijuana Mou Cartelli
-
- Offline
- New Member
Less
More
- Posts: 9
11 years 6 months ago #95217
by Tijuana Mou Cartelli
Replied by Tijuana Mou Cartelli on topic Re: Add fileype icons on Attachmentfiles in K2 item
Thank u! It worked very well!
Anyone knows how to show attachment filesize in item view?
I can't find any function...I'm a little poor in php...
I tried to put thisin item.php but It doesnt work...I was optimistic ... :)
thank u!!
Anyone knows how to show attachment filesize in item view?
I can't find any function...I'm a little poor in php...
I tried to put this
<?php echo $attachment->filesize; ?>thank u!!
Please Log in or Create an account to join the conversation.
- Pierpalo Gulla
-
- Offline
- New Member
Less
More
- Posts: 2
10 years 10 months ago #95218
by Pierpalo Gulla
Replied by Pierpalo Gulla on topic Re: Add fileype icons on Attachmentfiles in K2 item
same problem about the filesize. Do you solve the problem?
Thanks
Thanks
Please Log in or Create an account to join the conversation.
- Lenny
-
- Offline
- New Member
Less
More
- Posts: 12
10 years 5 months ago - 10 years 5 months ago #95219
by Lenny
Replied by Lenny on topic Re: Add fileype icons on Attachmentfiles in K2 item
Hi,
I don't think you can use "$attachment->filesize" (I did not see it available anywhere in the code), but you can achieve this with something like :
<?php
$filetotest = JPATH_SITE.'/media/k2/attachments/'.$attachment->filename;
$filesize=filesize($filetotest);
echo $filesize . ' bytes';
?>
A good idea would be to replace /media/k2/attachments/' by $savepath, had to try...
I don't think you can use "$attachment->filesize" (I did not see it available anywhere in the code), but you can achieve this with something like :
<?php
$filetotest = JPATH_SITE.'/media/k2/attachments/'.$attachment->filename;
$filesize=filesize($filetotest);
echo $filesize . ' bytes';
?>
A good idea would be to replace /media/k2/attachments/' by $savepath, had to try...
Please Log in or Create an account to join the conversation.
- Lenny
-
- Offline
- New Member
Less
More
- Posts: 12
10 years 5 months ago #95220
by Lenny
Replied by Lenny on topic Re: Add fileype icons on Attachmentfiles in K2 item
And BTW for filetype you have to rely on PHP mimetypes function or on (better) FIDO python script to find the filetype.
lenny
lenny
Please Log in or Create an account to join the conversation.