Imbed a download link into a web page 
Autore: Mike T.Below the dotted line is a thread from 2015, which answered Andrew's issue.
I want to do the same, but I'm obviously missing something, as I can't get my link to work.
I want to allow someone to download a file stored on my web site.
It is an *.gpx file to provide route info for a cycle ride.
Having provided the link to this file, instead of getting some form of download option, the actual *.gpx file opens showing the code contained within the file.
So how do I to stop the file from opening, but be ready for downloading ?
You can see this in operation by going to my web site :- www.denmeadcycleride.org.uk
Go to the Cycle Routes page and click on the button saying '10 Mile gpx file'
Mike.
-------------------------------------------------------------------------------------------------------------------------
How do I imbed a Download button into my Webpage Author: Andrew H. Visited 672, Followers 2, Shared 0 Tags: button,download,imbed,website x5 home 12
I am currently designing a Web site to allow customers to download a piece of software. I wish to imbed a 'Download' button or similart into a Web page.
How can I achieve this?
Posted on the 11/05/2015 10:46:212 ANSWERS - 1 USEFUL - 1 CORRECT
Paul M. Moderator
Hello Andrew,
First use a free button generator such as this one to create your download button (save it as a PNG image):
Then insert the PNG image on the appropriate page of your WebSite X5 project using an Image Object:
http://help.websitex5.com/en/v12/evo/index.html?ogg_immagine.htm
Then use the 'link' icon on the editing toolbar to set a hyperlink on the image pointing to the location of the software which is available for download (i.e. 'File or URL'):
http://help.websitex5.com/en/v12/evo/index.html?ins_link.htm
Please let us know if you require further information.
Kind regards,
Paul
Read morePosted on the 11/05/2015 11:02:35 from Paul M.
Andrew H. User
Author
Hi Paul,
Many thanks indeed. That did the job beautifully.
Kind Regards,
Andrew
Mike,
First things first.
You can always add a text or description on the link (in the link box (tab description) to make use of the right mouse button, then select download. This always downloads the file.
This is the easyest and savest solution.
The option of the visitor of your website for file or downloads, is in the settings of the pc from the visitor. If the file extension is known to that pc (if you have the program that uses it installed) then it will open it immidiatly. This dicision is made by the pc / browser that visits the page. Not by x5 or the website.
example:
(if you don't have a pdf reader, a file with pdf extension will be downloaded, if you have a pdf reader, it wil download also but the pc wil open it immidiatly with the connected program, the pdf reader.
Another solution like Paul has givin is to find a custum script that downloads everything.
(use google) and read the instruction how to use it. I can look for you, but I think you should be able to this yourself as well.
I hope it will help you on your way, but to be honest, I norally set a text to it or as description or as mouse over in the download option to use right mouse button. That always works.
Another solution is the make the file a zip or arj file, these extensions are also always downloaded by a pc.
Best Regards,
Andre
Hi All,
For the more adventurous users, you can always go back to HTML and CSS
. That's free and there's no need to add much additional weight and loading time to your page...
Try this for fun:
1. Define a button style in step 1 under Statistics, SEO and Code, before closing the </head>-tag. The style I've added looks like this
<style>
button {
width: 200px;
background-color:#09287b;
border: 0 none;
border-radius: 10px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: 'Verdana',Verdana,sans-serif;
font-size: 13px;
font-weight: bold;
height: 40px;
line-height: 15px;
padding: 4px 20px;
margin: 2px;
text-align: center;
transition: background-color 0.3s ease 0s;
}
</style>
2. Then, on your webserver, create a folder under the root of your website, for example /httpdocs/downloads
Upload the file you want to share in this directory (can also be done using websitex5, by linking a file to a html-object or the the code-part of the general settings.
3. Next, place a text object on the page with the following text:
---
Download the file by clicking on the button
<a href="https://www.yourdomain.com/downloads/yourfile.pdf" download><button>Download the file!</button></a>
---
don't forget the download option in the url. That forces the link to download the file in stead of opening the file in a web page, and don't forget to enable html in this text object by clicking on the '</>'-button in the tool bar.
(of course change yourdomain.com and yourfile.pdf to suit your situation).
The result should look like this.
Have fun experimenting!
Robert
Hello Mike
Maybe I am missing something - but have you tried the Download object ?
https://market.websitex5.com/en/objects/live-preview/ca0b2570-2b30-4351-a139-337898ed2e
This should function, and you can have a counter to show the number of downloads.
If the object has been mentioned in this thread I apologize.
Kind regards
John S.
Autore
Andre,
Thanks for your reply, but I am still struggling with solving how to do it by the simple right click method.
Below the dotted line is a snapshot of the Image Object function within WebSite X5, as I have attempted to set up.
The red icon (with 10 Mile gpx) in it, is a simple *.png file I created as per Paul's notes above.
The link is to the file I wish people to be able to download. (Full file name is .....org.uk/GPX-Files/10-Miles)
You said in your earlier email :- You can always add a text or description on the link (in the link box (tab description) to make use of the right mouse button, then select download. This always downloads the file.
Did you mean put text into the Properties fields of Title and/or Alternative Text, because when I have done that nothing appears next to the icon.
Also when I right click on the icon all I see is this :-
No reference to download and the copy does nothing, so I suspect the right click is to do with the icon itself.
I'm sorry to be so dumb on this, as I am obviously missing something.
I would appreciate your patience and help.
Mike.
----------------------------------------------------------------------------------------------------------------
Hello Mike
Could you explain why you won't use the download-object that is obviously made for something like this you want.
Autore
John,
Thanks for your response.
Nothing against using the Download Object, but once Andre had mentioned about a supposedly simple way of achieving a download, I thought I would try that first.
Trouble is, I'm having trouble understanding some fairly fundamental aspects of using Image Objects.
I need to master those, before using the Download Object.
Regards,
Mike.
Hello Mike
The download-object is really simple to use.
You design the look of the button, and specify the link to the download file - that's all.
If you want to make your own code ( download button ) it is always a good idea to visit w3school
https://www.w3schools.com/tags/att_a_download.asp
Here you have the possibility to "try it yourself".
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download
For people that works with coding, w3school is a good place to visit.
Kind regards
John S.
You can change the code and when done, you can in most cases, just clip the code to a html-object.
This is also rather simple.
In the example you can use full URL's and it should function.
Autore
Thanks John,
For being most helpful.
Mike.
Just tested myself - for the download it has to be in your own site - but then if you clip all the code into a html-object it functions.
You can have an image for the button, and then your special file for the download. You will then have a button and when clicking the button, the download will take place.
And the code for this is rather clean.
The code needed :
<a href="URL-for-your-file-to download" download>
<img border="0" src="URL-for your-button" alt="W3Schools" width="14" height="14">
</a>
You can use full paths for the url or you can use relative paths:
Example :
or relative : /images/icon32-038_psa1yi3t.png
As I used the full path, in the upper example, you can see the image.
The alt=2W3Schools" is the text you want to show when there is no image ( or slow loading ). If it is only for a little button, you will probably not need it - you can change the text as you wish.
John,
The download button does not work on these files.
It works only online because in preview you have special options on the right mouse button.
check here: http://andreweb.nl/v14_test/page-56.html
What I did:
Just use the lnk option Mike in a text object.
Write a text, like : DOWNLOAD GPS FILE (or any other text you prefer) You could write behind it use right mouse button for download.
then set a link to it with the link button. in the description text write: use left button for download) then set the link to your file. That's it.
If you prefere a picture you can add that also in the text object.
Hello Andre
Take a look here : http://www.bramminginfo.dk/brm09/side-7.html
I just tested and downloaded a file.
The code for this is :
<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
<img border="0" src="http://www.bramminginfo.dk/brm02/images/icon32-038_psa1yi3t.png" alt="W3Schools" width="204" height="142">
</a>
What is it that should not function ?
Kind regards
John S.
To make it fancy you could also make a text or a hover image.
Tomorrow I will make a nicer example.
Andre - could you confirm if you are able to download a gpx-file via clicking on the icon ?
I ment the download button in x5, it does not support gpx files, and that is what Mike is looking for.
Maybe Incomedia can add it? It would be a logical option.
Hello Andre
I also found out that all files is not all files. That is something INCOMEDIA maybe could explain why this is so.
I have now made a new download. Here : http://www.bramminginfo.dk/brm09/side-7.html
It is with an animated button that has 3 stages :
1 the initial image
2 animated GIF when hovering ( mouse over )
3 end image when mouse leaves the area.
1 and 3 could be the same image.
The code for this is very clean and compact. Purely html.
<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
<img src="http://www.bramminginfo.dk/brm09/images/downloadpng2.png" onmouseover="this.src='http://www.bramminginfo.dk/brm09/images/downloadanimated.gif'" onmouseout="this.src='" target="_blank" rel="nofollow">http://www.bramminginfo.dk/brm09/images/downloadpng.png'">
</a>
If no animation is wanted then the mouseover/out could be deleted.
I really think Mike could use something like this.
Mike : let's hear what you find out, please.
Kind regards
John S.
Autore
Andre & John,
Please believe me when I say I'm truly thanful for the assistance from both of you.
And I have taken a printed copy of all your info so far.
But this thread has become very long and I still have some questions for both of you.
So I'm going to start up a new thread to concentrate sorting out some basic stuff with Andre.
Then I intend to start another thread for John, when I get a chance to try out some of his suggestions.
Hope that's OK with the two of you.
Regards,
Mike.
OK
I will not interfere in the other post so I continue here anyway:
If you go to http://www.bramminginfo.dk/brm09/side-7.html and refresh ( CTRL+F5) then you should see an extra possibility.
The code for the last one is here :
You can download a gpx-file_<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>here</a>
<br><br>
You can download a jpg-file_<a href="http://www.bramminginfo.dk/brm09/files/Door.jpg" download>here</a>
AND if you read through the posts, the download object is NOT able to handle gpx-files.
I would suggest you make an idea post for this.
contunue here:
https://helpcenter.websitex5.com/it/post/191000#2
They need to supply an extension always.
At the start of the download buttun (many years ago) there where way less possibilities then there are now. Incomedia already addad a lot of extension, but considering the programs it is close to impossible to set them all.
So hopefully for Mark they can add the gps file and maybe more of these files type, rxf, gpx, gdb, tcx, loc, kml, kmz, trl, wpr, wpt, trk, gpb, mps, gpi, but this is already stated multiple times now.
( I added these extra file names for Incomedia's convience)
Thanks John!
Best Regards,
Andre