Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Discontinued/Classic Products: Article Manager 1 Add-ons:
Tutorial: Icons for Uploaded Files

 
 


Damon
Staff / Moderator


Apr 29, 2006, 11:46 AM

Post #1 of 5 (5294 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

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

(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 (4962 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 (4859 views)
Shortcut
Re: [kezza] Tutorial: Icons for Uploaded Files [In reply to] Can't Post
Hi Kerry,

Thanks for posting! Smile

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! Smile

Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com

[hr][i][url "http://www.interactivetools.com/consulting/"][b]Hire me![/b][/url]
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 [url "http://www.interactivetools.com/consulting/"][b]Priority Consulting[/b][/url].[/i]


kezza
User

May 14, 2006, 10:29 AM

Post #4 of 5 (4858 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 (4836 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.