Image Download Button for Wordpress - javascript

How can I add custom image download button for Wordpress?
I mean when we click on download button, instantly image downloading starting without any pop up or warning.
Please help me with all required codes.
Thanks...

from the formatting of your question, I'll assume that you're not too technical. To do this properly you'll need to do some work on the server, to send the file requested by the client with the correct headers.
There is a simple dom method to do it though, have a look at
http://caniuse.com/#feat=download
Though its not widely supported, it may be a viable and simple solution.
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
There is also a handy plugin for WordPress that will help with downloads, there may be others, but have a look at
https://wordpress.org/plugins/wp-downloadmanager/
There is also many discussion on SO here regarding this, so in the interest of brevity have a look at these if you'd like a more robust and complete solution
Example given with PHP
href image link download on click
Expamle given with server config and JS
Force Download an Image Using Javascript

Do you want like this link updated
<a href="#" download="image.jpg" title="ImageName">
<img src="http://www.teluguone.com/photos/images/download_new.png" alt="ImageName">
</a>

Related

I want to grab a screenshot or logo of a website with only its URL

I'm trying to develop a chrome extension and I want to mimic how browsers are able to grab a screenshot or logo of a website by only its link. You usually see it when you open a new tab. I'm using json, javascript, css and html.
Below is the examples of those.
(https://i.stack.imgur.com/upxrr.png)(https://i.stack.imgur.com/KKMpb.png)
I've tried to search for within the Chrome API Documentation, but I couldn't find anything on it. I've also tried to use iFrames, but they are extremely insufficient and they don't resize well on a smaller display.
Do you have an specific use case for that?, if not i think you could save a lot of time implementing it yourself.
You could import a custom png or svg file and wrap it with a tag
<a href="link">
<img src={yourImgSrc} width={} height={}></img>
</a>

download a local file, on button click

Hi there I'm trying to download a local file on button click in VueJs
<a href="./documentation.docx" download>Download</a>
I have the documentation in the same folder as index
But when I'm trying to download, its saying No File
This should work properly as you've written it. It's essentially comes down to the given path, try something like this structure and this code (with an absolute path):
<a href="/azuki.jpg" download> download stuff </a>
Also, check the official documentation page here: https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

How to display a link on my page

I want to display google link like that in my page.
whenever we post a link on a Facebook page its look like as the above picture. how to do the same in my webpage .how to display the google link like that
That looks like a link shared on Facebook. The styling of a link like that doesn't happen automatically. You'll have to use html and css to format a link to look like that yourself.
Here's an example using pseudo html. You'd need to actually style this yourself to achieve the desired result. If you don't know how, some websites to start learning html / css are codecademy.com & w3schools.com
<a href="link_url">
<img src="google_logo_url" />
<div>
<h3>Google</h3>
<p>Search the world's information....</p>
</div>
</a>
Embed.ly can be useful for you. It takes a URL and generates a piece of code, which you can paste in your HTML document to get similar look to that of your picture. Below is an example of its code in usage
From this link you can access it for free: http://embed.ly/code

How to Create a Save as button for an image

I'm developing a Screenshot extension for Chrome, and would like to know how could I implement a 'Save as' button in Html/Javascript. Currently users only Right Click To 'Save as'. I'm new to Javascript & didn't exactly find a way how to do it online. Any ideas? Thanks!
You can use the HTML5 download attribute, is it what you are looking for ?
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="Stack Overflow">
<br />
<a href="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" download>Save !</a>
You can create a download link with Save as …. The download attribute will cause the resource to be downloaded instead of viewed in the browser.
Then, if you want the link to actually refer to the resource, use something like yourAnchorNode.href = yourImageNode.src;, or if you use a <canvas> element to display the picture (you didn’t specify it in your original question, unfortunately) use toDataURL or toBlob:
yourAnchorNode.href = yourCanvasNode.toDataURL();
or
yourCanvasNode.toBlob((blob) => yourAnchorNode.href = URL.createObjectURL(blob));
Note that toBlob is an asynchronous operation.

Use google plusone button (not share button) in a newsletter

Good morning folks.
I try to implement the Google "+1" button into a newsletter (they are also as static web version available) but I can't use javascript here.
Is there any way to do this without javascript? It's also possible to share a page via a static url from google:
https://plus.google.com/share?url=your-page-url
Thanks in advance
I think you answered your own question by adding that link.
You'll have to create a "+1" image and embed it in your newsletter (remember to host the image on your servers and link it from there). Example:
<a href="https://plus.google.com/share?url=your-page-url">
<img src="http://www.yoursite.com/images/plusone.jpg" />
</a>
where your-page-url is your page url (http://www.yourpace.com)
No. The JavaScript button is the only supported method of +1'ing a URL. You can add a feature request.

Categories

Resources