How to use Google Drive as a CDN (Content Delivery Network)

Summary

In 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

00:00

💡 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.

05:00

🖼️ 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.

Keywords

💡Google Drive

Google Drive is a cloud storage service where users can upload and share files. In the video, the speaker discusses how to host images for Gmail signatures using Google Drive. Joanne, a viewer, uploaded her signature image to Google Drive but faced issues displaying it in her Gmail signature.

💡Gmail Signature

A Gmail signature is a personalized block of text, images, or links added automatically at the end of emails. The video focuses on adding an image from Google Drive to a Gmail signature, which was not showing up correctly for a user named Joanne due to permissions issues.

💡Image URL

An image URL is a web address used to link directly to an image file. In the video, the speaker explains how the URL generated by Google Drive for an image has additional elements, like 'view usp sharing', that need to be modified in order to display the image correctly in a Gmail signature.

💡File Identifier

A file identifier is a unique string of characters assigned to a file in Google Drive, used to locate and access the file. The video explains that this file ID is necessary for constructing a proper URL to display the image outside Google Drive's web interface, enabling its use in email signatures.

💡Sharing Permissions

Sharing permissions control who can view or edit files stored in Google Drive. In the video, Joanne initially sets her image file's permissions to 'anyone can edit', but this does not resolve the issue. The speaker suggests using a specific URL configuration to display the image instead of relying on sharing permissions.

💡HTML Image Tag

The HTML image tag ('<img>') is used to embed images in web pages and email signatures. The speaker demonstrates how to manually create an image tag with the correct Google Drive URL to ensure that the image appears properly in the Gmail signature.

💡Export View

The 'export=view' parameter is part of the modified Google Drive URL that allows the image to be served directly without the Google Drive interface. The speaker shows how adding this parameter to the URL ensures that the image can be embedded in a Gmail signature without issues.

💡Web Interface

A web interface is the user-facing part of a web service, like Google Drive, that includes navigation and tools. In the video, the speaker points out that the default Google Drive URL displays an image within this interface, which is why the image does not show correctly in Gmail signatures.

💡Procreate

Procreate is a digital illustration app for creating graphics, such as logos and signatures. Joanne used Procreate to design her signature and uploaded it to Google Drive. The video addresses how to correctly embed that image in a Gmail signature.

💡Signature Editor

The signature editor is a tool within Gmail settings that allows users to create and customize their email signatures. In the video, the speaker walks through the process of embedding a Google Drive-hosted image in the signature editor using a properly formatted URL.

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