Display Images Instead Of Text Links For Downloading Files

[Jan]

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):

<script>
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); }
</script>

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.

[pgjacob]

HI,

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:

 

<script>

var link_text="[@field:Index_new_Publication_file]";

var src_address="

if (link_text.length>0) { document.write(image_to_display); }

</script>

 

The actual location of the PDF file on the server is:

 

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

 

However, when copying the link that results from the above script, it is actually:

 

if (link_text.length>0) { document.write(image_to_display); }

</script>

 

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.

 

 

 

[Jan]

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.

[pgjacob]

Jan,

Thank you, it worked!  File is meing referenced from Bridge successfully and I changed the size of the JPG and it looks much better.

 

 

[Jan]

Hi pgjacob,

 

You are very welcome!