How to Create Image and PDF Download Link with CSS
You can easily create a downloadable link for any image and pdf file. You can do this in any platform with bare CSS and in WordPress environment as well. In this tutorial, I’m going to share this trick and strategy with simplified example.
There is no complication in creating such links. Anybody having a decent understanding of CSS, can hit the target. But many are not aware of such links and also not aware that this type of linking may be important in their sites. This help is only for them.
In case of WordPress, you need to take an HTML Block first and then implement the process. So, let’s proceed-
How to create an image download link with CSS
For this, do the followings:
- Take an
imgelement with essential attributes including
src. This image is the clickable link. So you can define
heightas you wish.
- Wrap the
aelement with necessary attribute including
href. In addition, use
downloadattribute with no value. This
hrefvalue links to the original image and directs the clickers to download-popup.
srcvalues are the same image url.
Look at the Code:
<a href="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg" download> <img src="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg" style="width:100px; height:100px;"> </a>
Now, give clicking the image a try. And enjoy!!
Image download link in WordPressOpen Gutenburg Editor, take the Custom HTML block or alternatively, open Text mode in Classic Editor. Insert the codes direct in the point you like the image to be placed. That’s all.
How to create an PDF download link with CSSFor this, do the followings:
- Take an
hrefattribute. Also add
downloadattribute with no value. Put PDF file url as
- In the text field, between
</a>tag, write “Download [File_Name] as .pdf”. All is OK.
In our example, we’re going to use a .pdf file named ‘Math_suggestion-2020.pdf’. Let’s see the code.
<a href="https://www.netplanter.com/wp-content/uploads/2020/02/Math_suggestions-2020.pdf" download> Download Math_suggestions-2020 as .pdf </a>
OUTPUTDownload Math_suggestions-2020 as .pdf
PDF download link in WordPress
In Classic Editor, click Text mode and insert the code in the point you want the link to appear. That’s all.
In Gutenburg Editor, do the followings:
- Click ‘+’ sign to add block.
- In Common block group, click ‘file’.
- In the inserted file block, click Upload to upload your pdf file or click Media Library to select one from library.
- Click Select and all is done. With file name, a link will be created automatically with a Download button.
Hope you enjoyed. Comment please!