 | | |
|
Damon
Staff
/ Moderator
Apr 29, 2006, 11:46 AM
Post #1 of 5
(3473 views)
Shortcut
|
Tutorial: Icons for Uploaded Files
|
Can't Post
|
|
I came across this great javascript (linkpreview) for adding file icon images after a link. It automatically adds the matching file type icon after a link.
So instead of having a page with links like this:
You can have file type icons appear after each link:
It's really easy to set up for Article Manager, Listings Manager, Page Publisher or any web page.
Here are the steps for setting it for Article Manager:
1. Read about the script here and download it.
2. Upload the files to your site into the images/common/linkPreview directory.
Example: http://www.yoursite.com/artman/images/common/linkPreview/
3. Edit the following templates:
/templates/article/default.html
/templates/article/default_printer.html
/templates/search/search_results.html
In between the head tags of each the templates add this:
<link href="$_imageurl$common/linkPreview/linkPreview.css" rel="stylesheet" type="text/css" />
<script src="$_imageurl$common/linkPreview/linkpreview.js" type="text/javascript"></script>
Save, upload and login to Article Manager and re-publish. And that is it. Preview link images should now be visible in the article pages, index pages and search results.
One note: the preview link icons are not visible on the Preview without publishing. This is because links on the preview page are not available.
Cheers
Damon Edis
interactivetools.com
(This post was edited by Theo on May 5, 2006, 4:06 PM)
|
|
Attachments:
|
no_preview_image.gif
(2.18 KB)
|
|
|
preview_images_added.gif
(2.90 KB)
|
|
| |
|
kezza
User
May 12, 2006, 12:32 AM
Post #2 of 5
(3141 views)
Shortcut
|
|
Re: [Damon] Tutorial: Icons for Uploaded Files
[In reply to]
|
Can't Post
|
|
Damon - this is quite interesting as it covers (to an extent) a recent requirement I had ... I'd created separate fields in Article Manager that displayed Word, Excel, PDF icons against the three fields so the client could upload (if required) one document of each type (using ***image*** etc). Unfortunately they wanted to be able to upload as many as 8 documents and not be restricted to one of each, so my method (using CSS) wouldn't work!
This script would seem to cover the requirement except I'm wondering if it would be possible to modify it so that alternate file extensions could be accommodated (e.g. the client uses file extension .xbk which is a smartboard file)?? Also, do you think it would be possible to have the icons BEFORE the text rather than AFTER (neater that way as the icons would all be lined up!)
Cheers
Kerry
Kerry
|
|
| |
|
MikeB
Staff
/ Moderator
May 14, 2006, 10:20 AM
Post #3 of 5
(3038 views)
Shortcut
|
|
Re: [kezza] Tutorial: Icons for Uploaded Files
[In reply to]
|
Can't Post
|
|
Hi Kerry,
Thanks for posting! 
I'm glad to hear that this script sounds like it will work for you and I'll just go through your questions for you.
It looks like you should be able to add other types of file extensions to this list by modifying the linkPreview.js file. In this file you'll want to find this line:
if( extension in { doc:1, pdf:1, ppt:1, txt:1, xls:1, zip:1 } )
You should be able to add your extension to this list. Then, you'd just want to add a style to the linkPreview.css file so the script will know which image to output beside the name of the file.
I've taken a look into this script and to get the icons to display before the name of the link you just need to make another quick change to the .js file. You'll want to find this line of code:
currentLink.parentNode.insertBefore(span,currentLink.nextSibling);
And replace it with this:
currentLink.parentNode.insertBefore(span,currentLink);
You may then need to adjust some of the padding in the linkPreview.css file.
I hope this helps Kerry and if you have any other questions feel free to let me know!
Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
kezza
User
May 14, 2006, 10:29 AM
Post #4 of 5
(3037 views)
Shortcut
|
|
Re: [MikeB] Tutorial: Icons for Uploaded Files
[In reply to]
|
Can't Post
|
|
Thanks Mike - I will certainly take a look at doing this when I get a chance!!
Kerry
|
|
| |
|
del
User
May 14, 2006, 7:28 PM
Post #5 of 5
(3015 views)
Shortcut
|
|
Re: [Damon] Tutorial: Icons for Uploaded Files
[In reply to]
|
Can't Post
|
|
I have just included this script and it works great.
To have the images align to the left I changed the .js script removing the ".nextSibling" so the command was:
currentLink.parentNode.insertBefore(span,currentLink);
I then changed the .css file replacing right with left on all the background lines. For example:
background: url(images/doc.png) no-repeat left;
It would be good if the image also formed part of the link as well.
Thanks.
|
|
| |
|
