An answer to a quesiton over here has worked perfectly for me to allow anonymous users to view pictures from my google drive.
The instructions are to form a url as so:
https://drive.google.com/uc?export=download&id={fileId}
Where fileId is the identifier of a publicly viewable file in one's google drive.
This works great! However the images I've uploaded are very large (megabytes). I'd like to get a link to lower resolution images so that users aren't downloading several megabytes upon loading pages I display these images on.
I've tried tacking on GET parameters "w" "width" "h" and "height", and using a little sizing trick I've seen elsewhere in google's interface. Nothing has worked thus far.
https://drive.google.com/uc?export=download&id={fileId}=w{widthpx}-h{heightpx}
I haven't been able to find google documentation for this endpoint nor any help for getting lower resolutions images by googling and searching stackoverflow.
Is there a way to specify resolution to this endpoint (or another that works for obtaining displayable images), or must I upload separate lower-res images for each image I upload?
I'm using the API as a solution for now. If anyone finds another solution I'd love to hear it.
https://github.com/joshterrell805/gDriveScaledImages
Related
I recently started my first HTML project with the help of Youtube. I'm a beginner and only saw the basics of Javascript in college.
Just finished writing my HTML project and wanted to upload it for free using Google Drive and drv.tw.
The only problem is that certain images and icons do not load (irregularly) enter image description hereand/or the pages on the navigation bar take too long to switch.
My question would be, is it because of the free domain or did I do something wrong in HTML?
When I open the HTML file in Safari everything works fine.
Since I'm new to the community, I don't know exactly what and how much I have to upload to get help. So have mercy on me :'D.
To help troubleshoot, use your browsers "developer" (F12) mode. Look at the Network view to see why the images aren't displayed. For example: It might be "not found", "not authorized", or other reasons.
From your comment, it would appear that at times the page is rendering before the images are available to display or something else is limiting image files from being presented at all.
Once we know why the browser can't display the images, then the cause can be addressed.
Post the .html .js and .css code
Please update your question and show the folder structure. It should look something like:
-site-
|
-js
-css
-images
Copy and paste in the code below the folder structure and list the images and their size.
I am not familiar with google drive's capabilities.
It is important to use a web host. There are plenty of free or low cost sites available, so I won't go into it.
Can I use images stored in Google Drive to be used in a website by the html,<img src="<webContentLink>" /> ?
Where <webContentLink> is returned after a file is uploaded and is in the format, 'https://drive.google.com/uc?id=<FILEID>&export=download'
I have a small website created for account users only. They can upload files to their google drive folder and this folder has permissions set to share with the accounts of the other users (specific people only). This is an ASP.NET MVC 5 website using the Google API Client Libraries for .NET.
In Chrome and Firefox the images display fine, in IE and Safari they don't show and return a 302 status code. Sometimes if you view the image directly in a new tab and then refresh the web page it shows. It might also show if the folder permission is set to 'anyone with the link', but this isn't ideal.
The documentation (https://developers.google.com/drive/v3/web/manage-downloads) says, 'If you want to allow a user to view a file directly in a web browser instead of through the API, use the webContentLink.' I understood this to be okay to use img src='' to display an image directly without the API, however it then goes on to say, 'You can either redirect a user to this URL, or offer it as a clickable link'.
So can Google please confirm if 'webContentLink' can be used in img src='', or not and why it works in some browsers and not others? I've read many posts on this, some old, some more recent. If it's not to be used in img src I think it should be made clear in the documentation.
Many thanks
Yes, you can definitely use webContentLink as your img src in your HTML page. I tried and this is what I got on my sample HTML page.
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
webContentLink can be obtained using Files.list and place 'files' in the fields parameter.
Displaying an image from Google Drive can be done in 3 steps:
Retrieving your image ID
Right click on your image and select Share.
You'll see a link that you need to copy. You will extract the image's ID from the URL.
Here is what your sharing link should look like:
https://drive.google.com/open?id=YourFileId
Check your sharing settings
Your images will only be visible to people who have access to those files. To allow anyone access to your images, you need to set the sharing setting as Visible with the link.
Display your image
With your sharing settings properly configured and your image file IDs at hand, you can now specify how your images will be displayed using a prescribed format.
https://drive.google.com/thumbnail?id=YourFileID
More details can be found here
when I do this I just get a sign like an nonexistent image.
Why?
I just copy paste this line:
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
JS Fiddle
I have minimal knowledge of coding but I just spent the past 6 hours trying to resolve this issue.
Go here to see the image I am trying to have load.
If I am suppose to chance the SRC lines, how and where do I do that?
The HTML image loads perfectly from my computer.
Like what #mlegg said, I get the same error when trying to go to your link. It looks like that is no longer a valid URL or there is some form of security on it so it's only accessible from your computer (since you said it works from your computer?).
It could also be getting pulled from your browser cache if it was a good URL at one time. Try doing a Shift + Refresh of the page or purposely clear your cache.
If you have the image locally you could try uploading to a different web based repository and src it from there.
Just to cover all bases, I trust you know how to put an image on a web page using the img tag:
<img src="http://lorempixel.com/400/200/">
You might also want to try a different image that you know is available and accessible. You can use the URL above for lorempixel.com or you can scrounge up a different image from a Google Images search.
I know you can share messages with and this is working on android and ios now:
Share with whatsapp
However I'd like to share an image trough a button on my website like someone would share an image from his phone (gallery). Is this anyhow possible?
One solution that comes to mind is uploading a photo to your server via AJAX, returning the link to the uploaded photo and then sending a message with the link to your photo using the method you described in your question. This is not quite the same as sending an image directly using Whatsapp since the recipient would only receive a link, but I doubt there will ever be a way to send an image to another application from your gallery using a webpage since that would raise some serious concerns.
Roughly, the process would like this (keep in mind that this will require some testing to get right and find a solution that works well on all platforms or at least most of them):
Create an image upload on your website. Simply having <input type="file" accept="image/*"> on your page should, on most platforms, allow you to create a button which will open a dialog to select an image from your phone's gallery when clicked. You can find a full example here or use a library such as Plupload which contains many upload methods, including HTML5 which is what you need.
Create a simple server-side upload. This depends on your language and platform, but all you need to do is store the image somewhere and return a link to it in response. If you don't want to store these images on your server, you could forward it to Imgur API and upload there.
Redirect the user to the whatsapp:// link that contains the image link.
window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL);
This is the point where you need to do some testing on different platforms, though. You might not be able to redirect to a whatsapp:// link this way (since it seems like a security concern), so you may need to trick it (this is a bad idea, but I'm including it for the sake of completeness; the data-action part is from this answer):
var fakeLink = document.createElement('a');
fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL));
fakeLink.setAttribute('data-action', 'share/whatsapp/share');
fakeLink.click();
In the end, if neither of these work, your best bet is creating a link once the upload is complete for the user to "confirm" sending which actually contains the above whatsapp:// link in the href field.
There are many factors to test and some that are implementation specific so I had to keep it vague without much code - if you come across anything else when implementing this, please mention it in the comments.
Edit :
in the html source I have thigs like :
<img src="./images/someimage.jpg" />
This displays fine IE/FireFox would display the images coming from URL's like "http://mypc" or "http://localhost" or ip adress on the netwrok , google chrome on Galaxy, Windows Machine, or google Android will not display the images.
After having burned too many hours trying various CSS, image src tag, html document description tricks, I have given up.
During my search I found (and lost) the link to chrome forums regarding this issue that seemed to say it is just so by users.
Anyone has any more information on weather it is possible to view images on local host/computer name on netwrok or ip adress?
try using http://localhost/resouce.jpg instead of http:/localhost/resouce.jpg
From your comment above (where you say if you put h11p://mycomputer/images/image1.jpg it works) and your question (where you put image URL of ./images/someimage.jpg), my guess is that you have a problem with the relativeness (lacking a better word) of your URLs.
E.G.
if your page is at h11p://mycomputer/folder/page.html and you use the relative URL ./images/image1.jpg to source the image then your browser will look in h11p://mycomputer/folder/images/image1.jpg to find that image.
This can also happen with URLs that have been rewritten to include additional slashes.
Solutions are to use either a url that is absolute on the site e.g. /images/image1.jpg (omitting the leading .) or to use a URL that is absolute to the host e.g. h11p://mycomputer/images/image1.jpg
The first solution is preferable because it will continue to work when you change the host-name/domain-name of the site.
** read http where I write h11p