Jump to content

Display Images Instead Of Text Links For Downloading Files

Recommended Posts

Hi all,
I want to share what I have found.
I have files in my table, and I wanted to display an image instead of text links for downloading files. So, I have written the following Java Script code, added an HTML Block to my Results Page and entered the code (please do not forget to click the "Source" button):
var link_text="[@field:FIELDNAME/]";
var src_address="URL";
var image_to_display='<a href="' + link_text + '"><img src="' + src_address + '"></a>';
if (link_text.length>0) { document.write(image_to_display); }

You can enter the name of your field instead of "FIELDNAME" and your image URL instead of "URL" (e.g., https://mysite.com/images/download.png)

I hope, it will be useful.
Link to comment
Share on other sites


Thank you for this solution, it is timely as I just asked support about this.


I have partially completed this but I am still having trouble and wondering if you could help.


I am trying to use an clickable image to download PDF files from a table report.  Using your solution, I successfully referenced the image location and I can click on it, but it goes to a "Page not found". 


I actually saved the target file in the Caspio Bridge section, not on our server, so I am not sure how to reference the bridge as the URL when displaying the location of the file.  I did go ahead and move the same file to our local server and try to reference it that way as well, but hit a snag:


Please bear in mind I am not a programmer, but looking at your script through trial and error determined how the file is referenced in the concatenated code.


Using the local server as the source of the image and PDF files, I changed your script to the following with my particular info:


var link_text="[@field:Index_new_Publication_file]";
var src_address="
if (link_text.length>0) { document.write(image_to_display); }
The actual location of the PDF file on the server is:
However, when copying the link that results from the above script, it is actually:

if (link_text.length>0) { document.write(image_to_display); }
THe resulting link is now:

http://www.olemiss.edu/projects/pharmacy/test/NCNPR/projects/pharmacy/test/NCNPR/Bioactive''>http://www.olemiss.edu/projects/pharmacy/test/NCNPR/projects/pharmacy/test/NCNPR/Bioactive'>http://www.olemiss.edu/projects/pharmacy/test/NCNPR/projects/pharmacy/test/NCNPR/Bioactive Chemical Constituents of Ononis natrix.pdf


So the subfolders are unnecessarily replicated...



Probably syntax/operator error?  Wondering if reference files in bridge is easier.


Also, how do I change the size of the image, it comes up very large.


Much thanks for any help you can provide.




Link to comment
Share on other sites

Hi pgjacob,


I am glad that my suggestion is useful.


I am sorry, it was a misprint:

var link_text="[@field:FIELDNAME/]";

The "/" should be added after the fieldname. For example, [@field:file1/]


I think, the better way to change the size of the image is to use another image or edit the existing one.

Also you can define the size of the displayed icon if you change the code:

var image_to_display='<a href="' + link_text + '"><img src="' + src_address + '" width="40" height="40"></a>';

You can set your values of the width and height, the size is in pixels.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...