I have a webpage that has an image that is stored in google drive, and using the google drive embed code results in this-
and I want to include this image in my website without the border and tools, making it look like this-
Adding the image file to my project is not an option, as I am using google apps script as web domain as I am not old enough to have a credit card to purchase REAL web domain, and I am broke and cannot simply rake leaves or shovel driveways because of COVID. so I cannot add the image file to my project, any advice?
Answer:
Instead of the embed code, use the view link.
Example:
<img src="https://drive.google.com/uc?export=view&id=FILE_ID_HERE">
This solution is a little bit ironic. The tool that stack overflow uses for images can be used for anything else, so I just had to right-click on the image in this question, click on 'copy image URL' then put it in my website and I got a working image!
Related
I am making a HTML email. I want my png image to be formatted in a hyper link like:
<img src="https://www.w3schools.com/images/w3schools_green.jpg">
Where can I upload my png image to get a link like above that ends in .png?
I know I can upload my png to files and grab it in files using HTML but I want everything to just be in one file.
Imgur is free and reliable. Alternatively, just put the image next to your html file and then set the url to just the name of the image
<img src="w3schools_green.jpg">
Have you tried using google drive? You can upload your images there and then use its link in the HTML. Here is an explanation of how to do it How do I display images from Google Drive on a website?
There are so many image hosting services available, just google "free image hosting" and you will get tons of websites. For PNG specific image hosting you can try: https://www.pngtank.com/en/user-request-png
However, choose your image hosting service wisely because if any of the website deletes your image, it will stop appearing on your website. You can also try storing images locally if this is an option for you.
I need to embed images into an email signature, the images arent hosted on a website but I can't just reference images from a folder as this needs to work for 50 people. I've tried using URI for base 64 but gmail and a few other email clients won't open the images. I've heard about inline attatching them but don't know how to go about it.
I recommend using Google's embedded images as follows: You save your images to your google photos. Go to one of your images, then, click "share". Click on "create link". Copy that link and paste it in the text field on this site (Google
's embedded image site) : https://www.labnol.org/embed/google/photos/ Click "generate", and the embedded link for your image will appear. This is what I use for my HTML-Emails. Unfortunately, it is tedious if you have many images, but it works.
I have a webpage that has an image that is stored in google drive, and using the google drive embed code results in this-
and I want to include this image in my website without the border and tools, making it look like this-
Adding the image file to my project is not an option, as I am using google apps script as web domain as I am not old enough to have a credit card to purchase REAL web domain, and I am broke and cannot simply rake leaves or shovel driveways because of COVID. so I cannot add the image file to my project, any advice?
Answer:
Instead of the embed code, use the view link.
Example:
<img src="https://drive.google.com/uc?export=view&id=FILE_ID_HERE">
This solution is a little bit ironic. The tool that stack overflow uses for images can be used for anything else, so I just had to right-click on the image in this question, click on 'copy image URL' then put it in my website and I got a working image!
Looking to automate the tedious clicking to change the backround of my PNG images from white to transparent.
The images reside in Google Drive, and as new images are submitted I have to make it transparent, each time, again. There's got to be a better way!
I don't see any way to use that website with code. That website has what it calls an API, but it looks like it's nothing more than a link. You could use something like AutoIt, to reproduce the keystrokes that you manually do.
AutoIt website
If there was an online picture editor that had an API that would receive HTTP Requests, Apps Script can send and receive HTTP Requests.
Google Documentation urlFetch
But the online picture editor would also need to read your files from your Google Account.
HTML does have a canvas tag, that you can manipulate pictures with, but Apps Script currently doesn't work with the canvas HTML tag the last I knew.
You can access your Google Drive with Apps Script, and get files, but then you'd need to either send the file out somewhere, or process it yourself, just like that online picture editor does. If Caja would allow the HTML Canvas tag to work with HTML Service, there might be a way to automate what you want.
I created a way to re-size pictures with the Canvas tag, but it wouldn't work with Apps Script HTML Service.
I have made a page in html5 with css3. It works fine on local (I dont use any server, just doubleclick in the index to open it).
I want to put it in google drive. I have load all the documents needed, but when I try to open the html, I can only see the text (I mean, it is not being executing, I can see just the source code).
Any suggestion?
Not available any more, https://support.google.com/drive/answer/2881970?hl=en
Host web pages with Google Drive
Note: This feature will not be available after August 31, 2016.
I highly recommend https://www.heroku.com/ and https://www.netlify.com/
EDIT: As of August 2016 Google Drive can no longer be used to host static web pages, so this solution no longer works.
Create a new folder in Drive and share it as "Public on the web."
Upload your content files to this folder.
Right click on your folder and click on Details.
Copy Hosting URL and paste it on your browser.(e.g. https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM)
It will launch index.html if it exist in your folder other wise list all files in your folder.
I don't think it is necessary to "host" the content using the way from the accepted answer. It is too complicated for a normal user with limited developing skills.
Google actually has provided hosting feature without using Drive SDK/API, what you need is just few clicks. Check this out:
http://support.google.com/drive/bin/answer.py?hl=en&answer=2881970
It is the same to the answer of user1557669. However, in step 4, the URL is not correct, it is like:
https://drive.google.com/#folders/...
To get the correct host URL. Right click on the html file (you have to finish 1-3 steps first and put the html in the public shared folder), and select "Details" from the context menu. You will find the hosting URL right close to the bottom of the details panel. It should look like:
https://googledrive.com/host/.../abc.html
Then you can share the link to anyone. Happy sharing.
Now you can use
https://sites.google.com
Build internal project hubs, team sites, public-facing websites, and more—all without designer, programmer, or IT help. With the new Google Sites, building websites is easy. Just drag content where you need it.
While drive allows you to edit plain text and HTML files I don't believe they allow the HTML to actually be displayed. I don't think they want people hosting websites from their drive space.
A lot of the solutions offered here do not seem to work anymore. I'm currently on a chromebook and wanted to view an HTML5 banner. This seems impossible now through Google Drive or other apps (as mentioned in previous comments).
The method I ended up using to view the HTML5 was the following:
Open Google Adwords (create a free account if you dont have one)
Click on Ads in the top panel
Click on "+AD" and choose image ad
Choose "upload an ad"
Drag and drop your zip file into the area
Click on Preview
Voila, you will see your HTML5 banners in their full beauty
There may well an easier way, but this way is pretty good too. Hope it helps and worked well for me.
Create a new folder in Drive and share it as "Public on the web."
Upload your HTML, JS & CSS files to this folder.
Open the HTML file & you will see "Preview" button in the toolbar.
Share the URL that looks like www.googledrive.com/host/... from the preview window and anyone can view your web page.
Found method to see your own html file (from here (scroll down to answer from prac): https://productforums.google.com/forum/#!topic/drive/YY_fou2vo0A)
-- use Get Link to get URL with id=... substring
-- put uc instead of open in URL