How to use Google Drive as a CDN (Content Delivery Network)
Summary
TLDRIn this video, the creator addresses a viewer's question on how to properly add an image from Google Drive to a Gmail signature. They explain why images might not appear when using a shared Google Drive link and offer a solution by modifying the URL. The tutorial demonstrates how to extract the unique file identifier from Google Drive and format the URL correctly to make the image display without extra Google Drive wrappers. Additionally, the video covers creating and embedding the HTML image tag needed for email signatures. The video concludes with a successful image insertion into a Gmail signature.
Takeaways
- 😀 The video is in response to a question from a viewer named Joanne about adding images to Gmail signatures using Google Drive.
- 📁 Joanne created her signature in Procreate, uploaded it to Google Drive, but encountered issues with the image not displaying in her Gmail signature.
- 💻 The issue arises when using the 'Insert image' feature in Gmail and selecting the 'Web address URL' option; the image does not show due to incorrect permissions and URL structure.
- 🔗 To fix this, it's necessary to set Google Drive sharing permissions to 'Anyone with a link' and then modify the image URL to remove unnecessary parts.
- 🛠 The correct URL format requires extracting the file ID from the original Google Drive link and using a custom URL: 'drive.google.com/uc?export=view&id=FILE_ID'.
- 🌐 This URL format displays the image directly without any Google Drive interface or wrapper.
- 🖼 The next step is embedding the modified URL into an HTML image tag, which can be used in the Gmail signature.
- 🔧 The video demonstrates troubleshooting issues with HTML quotes and ensuring the correct formatting for the image to display properly.
- 📧 After applying the corrected URL and HTML image tag in the Gmail signature editor, the image displays successfully in email previews.
- 👍 The video concludes by encouraging viewers to like and subscribe for more helpful tutorials.
Q & A
What is the video about?
-The video addresses a question from a viewer about how to correctly insert an image from Google Drive into a Gmail signature, resolving issues related to image visibility.
What problem did the viewer Joanne face with her Gmail signature image?
-Joanne uploaded an image to Google Drive and tried to insert it into her Gmail signature using a web address. However, the image did not show up until she set sharing permissions to 'anyone can edit', but even after this, the image still didn't appear in the signature.
What is the reason why the Google Drive image link doesn't work directly in the Gmail signature?
-The default Google Drive URL includes a view wrapper, which prevents the image from being displayed directly in Gmail signatures. The wrapper adds extra elements like the Google Drive interface, making the image unusable in this context.
How can you modify the Google Drive URL to make the image work in a Gmail signature?
-You need to change the URL to bypass the Google Drive interface. This can be done by using the file's unique identifier and constructing a new URL with the format: `drive.google.com/uc?export=view&id=FILE_ID`, replacing 'FILE_ID' with the image's unique identifier.
Why is the 'export=view' parameter important in the new URL?
-The 'export=view' parameter instructs Google Drive to serve only the image without the Google Drive interface, which makes it suitable for embedding in a Gmail signature.
How do you find the unique file identifier in a Google Drive link?
-The file identifier is found between the slashes in the original Google Drive link, typically after '/file/' and before '/view'. This string of characters is unique to the file and is used to reference it in the new URL.
What HTML tag can be used to embed the Google Drive image in an HTML file?
-The image can be embedded using the HTML `<img>` tag, where the 'src' attribute contains the modified Google Drive URL. For example: `<img src='drive.google.com/uc?export=view&id=FILE_ID' alt='Image description'/>`.
What common issue might arise when copying HTML code for the signature, and how can it be fixed?
-If the quotes around the URL are incorrectly encoded, the HTML may not render properly. This can be fixed by ensuring the quotes are standard double quotes ('"') instead of special characters used by some text editors.
What final step is necessary to confirm the image works in a Gmail signature?
-After constructing the correct URL and inserting it into the Gmail signature editor, you should verify that the image displays correctly in the signature preview and in a test email.
Why is it important to understand the construction of the image URL for Google Drive?
-Understanding how the URL works allows you to control how the image is displayed and avoid issues with permissions or the Google Drive interface, ensuring the image appears as intended in your signature.
Outlines
💡 Responding to a Viewer’s Question on Gmail Signatures
The video begins with a response to a viewer, Joanne Amantia, who raised a question regarding image insertion in Gmail signatures. Joanne encountered issues when trying to insert an image from Google Drive into her Gmail signature. Specifically, the image did not display properly until the sharing permissions were changed, but it still failed to show in the signature settings. The presenter acknowledges this problem and sets the stage for addressing how to correctly embed an image from Google Drive into Gmail signatures using a specific URL configuration.
🖼️ Setting Up and Testing an Image from Google Drive
The presenter explains how to prepare an image for use in a Gmail signature by first uploading it to Google Drive. A simple placeholder image is used as an example. After setting the sharing permissions in Google Drive to 'anyone with the link,' the presenter demonstrates how copying the URL and inserting it into Gmail using the 'web address' option still results in the image not being displayed properly. The issue stems from how Google Drive serves images, prompting the need for a more specific URL setup to bypass the image wrapper that causes the display problem.
🔧 Adjusting the URL for Proper Image Display
To resolve the issue, the presenter explains the need to modify the Google Drive URL. Instead of using the default link format that includes 'view?usp=sharing,' the correct approach is to extract the file ID from the URL and construct a new link. This modified URL should include 'uc?export=view&id=' followed by the file ID. This ensures that the image is served directly, without the wrapper. The presenter tests this new URL by pasting it into a browser, which now displays only the image without any surrounding interface, confirming the solution works.
📄 Embedding the Image into HTML and Troubleshooting
The presenter moves on to demonstrate how to embed the image using HTML. They create an HTML image tag with the updated Google Drive URL and an alt tag, 'My Business Logo.' After copying this HTML code into a file and opening it in a browser, the image initially does not display due to incorrect encoding of the quotation marks. Once the quotation marks are corrected, the HTML file successfully displays only the image, proving the code works as intended. This method can be used to create a working HTML signature manually.
✅ Successfully Adding the Image to Gmail Signature
In the final steps, the presenter demonstrates how to use the newly constructed URL in Gmail's signature editor. They delete the old image and insert the new URL into the 'web address' option. This time, the image correctly appears in the signature preview. The solution is confirmed as successful, meaning that the image will now display correctly in outgoing emails. The presenter concludes by thanking Joanne for the question and encourages viewers to like and subscribe.
Mindmap
Keywords
💡Google Drive
💡Gmail Signature
💡Image URL
💡File Identifier
💡Sharing Permissions
💡HTML Image Tag
💡Export View
💡Web Interface
💡Procreate
💡Signature Editor
Highlights
Introduction of video response to a viewer's question on adding images to Gmail signatures.
Viewer question about creating a signature in Procreate, uploading it to Google Drive, and facing issues with image display.
The issue occurs because the image doesn’t display unless sharing permissions are set to 'anyone can edit'.
Explanation of why Google Drive's default link for images includes a wrapper interface, preventing direct image display.
Solution requires modifying the URL to bypass Google Drive’s interface and directly display the image.
The critical part of the URL is the unique file ID, which needs to be extracted and modified to serve the image directly.
Construct a new URL using 'drive.google.com/uc?export=view&id=' followed by the unique file ID to display the image correctly.
When the correct URL is used, the image displays without any wrapper or additional interface elements.
Demonstration of how to take the correct URL and embed it into an HTML image tag for use in an email signature.
Overview of the HTML image tag structure, including the correct URL format and the 'alt' attribute for accessibility.
Caution against using incorrect double quotes in HTML code, as this can cause issues with displaying the image.
HTML code corrections are made to ensure the signature displays properly in web browsers.
Testing the modified HTML file shows that the image is displayed correctly without additional interface elements.
Final step of adding the correct URL to the Gmail signature editor, confirming the image now displays as intended.
Conclusion with a recap of the solution, hoping the viewer's question is answered, and a call to like and subscribe.
Transcripts
hello youtube hi guys uh this video is
in response to a comment from one of our
viewers joanne amatina
amantella
joanne amantia
sorry if i'm getting that wrong um and
in response to
our video about how do we add images to
our gmail signatures now if you don't
have a website for whatever reason and
that's okay
you might need to use something like
google drive to serve those images and
so joanne asks one of the things we
don't address is if someone saved their
signature file to their google drive i
created my signature in procreate and
uploaded the jpeg file to my google
drive i selected the insert a photo icon
in settings and selected web addresses
per the directions the image did not
show until i set the sharing permissions
to this file anyone can edit it when i
went back to my signature settings the
image did not show now that's the bit
that we're going to address in this
video i'm going to show you how to take
an image that you've got in your google
drive and actually make it work when
you're using an email signature okay
and again this is very specific you have
to have a particular
configuration for the url or for the and
the address path to the image all right
so let's start with the simple bits okay
and joanne thanks very much for the
question let's get into it
so the first thing is we need an image
inside of our google drive now i've got
just a very simple placeholder it's 250
pixels
and
that is my
my image that i'm going to use in this
presentation
now in my gmail signature i'm going to
create a new signature and i'm going to
do
i'm going to do one called demo of
google drive images okay so there it is
now
as joanne points out if you sort of do
it insert image and you just copy this
one
or let's actually do this let's go on to
share
and let's change the restriction on how
this is
set up to go anyone with a link
all right that's good now we'll copy
that link click on done
and if i go over here and i go web
address url which is how i want to
include it i'm going to click that
it appears to show in here
then i'll click select
but i get this little icon down here
that says well actually no i can't show
that at all it's not going to work all
right so there's our problem that's what
we're going to try and resolve today
so the way this works is
we have to tell google drive to serve
that image directly and if i take that
same url and i just paste that straight
in here
it's going to give me this interface
right which has got this wrapper and
stuff around it so that's why this image
isn't showing so we need to change this
so that actually what happens is we just
get this image being displayed
okay so let's look at why that is so
we've got our correct file path
that is the one that we've just copied
from google drive okay and that looks
like this it says drive.google.com
file
and then some garbage and then view usp
sharing okay so this last little bit the
view usp sharing is telling it to use
that interface with the wrapper and
stuff around it
now the important bit to this
is actually the bit between these
slashes so the slash view usb sharing we
can ignore but if we go back and we get
the bit of garbage that we need now that
that's the file identifier and it's
unique to your file in your google drive
account
across google drive everywhere all right
so that's the bit we're going to
concentrate on so we're going to copy
that bit out
and we're going to construct a new url
okay now that new url looks like this it
says drive.google.com uc question mark
export equals view now this bit here
this export v equals view is really
important because that now tells google
drive
instead of wrapping it in that sort of
interface we just want to view we don't
want to do anything else we just want to
view it then we've got and id equals and
then our unique identifier okay so now
that is going to display our image okay
so now if i take that url and i paste it
now into a new window and i click go
instead of all of those you see how
there's no items in the corners and i
can actually grab hold of that image and
see it
if i inspect the page here the only
thing on the page is that image right
see there's a body tag and then there's
this image that's it there's nothing
else there so this is perfect that's
exactly what we want to we want to have
all right so coming back to our
um process what do we need to do so we
need to take our
file id and put it into a new url so
that's our export view and then we need
to embed it into an image html image tag
okay now
when you're using the signature builder
directly you don't need to know this bit
but it's good knowledge so this is an
html image tag and the first bit is
image source image src equals
apologies for the wrapping that's just
the way the slide is working in google
slides
and then we've got our url that we've
built so that's the one we just tested
and we paste it into the browser that
gives us just the image on the page and
you can see that's encompassed in double
quotes here and here and then we've just
got an alt tag my business logo so
that's this bit here alt my business
logo okay
now if we were to take that image tag
put it into an html file and and open
that html file
if as if we were building our html
signature ourselves then this would now
display that so i've got a little html
file here and you can see i've just
started my html source
so i'm going to do is now just copy that
and put that into
into my html file okay and i'm going to
save this and we'll open it up
[Music]
okay cool so now i've got this file it's
called signature demo so we're going to
open that up on the in a web browser and
see what it does
okay here we go so uh what's happened
there all right so that the reason that
that's not worked is because these
little double quotes and stuff are
actually
um coming out incorrectly
they are the wrong
uh html quotes so i'm just gonna have to
replace all of these just give me one
sec
okay so now i've got my html signature
demo document i've corrected those
quotes there's a difference they might
look the same but they are different the
way they're encoded
and now if i refresh my html file i get
nothing but that image on there okay
so that's what this image tag here does
with double quotes and our file id okay
so now we've got that file we can go and
try that in our signature editor
so coming back to my signature what i'll
do is i'll just delete this one out of
here and then i'm going to click on
insert image again
use the web address url
and then paste my new image into here
now we're going to get much the same
thing it's still going to show in here
but this time when i click select it's
now going to appear in my uh
preview
for
the signature okay and now that means
when i go and create an email and this
signature is applied to it it's now
going to work and joanna hopefully that
answers your question if you like this
video please
like and subscribe and we'll see you in
the next one
you
浏览更多相关视频
How To Use New Google Gemini (Gemini AI Tutorial) Complete Guide With Tips and Tricks
(🐣Beginner) Create A Custom HTML Email Signature for FREE in 5 Min
Autofill Google Doc Template from Google Sheets | Google Apps Script
Backup and Restore a Contabo VPS to Google Drive, Dropbox, OneDrive etc
CARA MEMBUAT GOOGLE FORMULIR LEWAT HP ANDROID | Google Form
Make Outlook & Gmail Signature using Canva
5.0 / 5 (0 votes)