Adding images hosted through Google Drive into the editor
kyle-hunady opened this issue · 1 comments
Hi! Awesome email builder. I'm hoping to embed images hosted on Google Drive into my project. However, I can't seem to get them to show up. I'm not experienced in html. Would you mind offering some guidance?
The original GDrive link looks like this:
https://drive.google.com/file/d/1S8CEargX7LmTycDVtLtKMa_mWrVHi2XN/view?usp=sharing
First attempt
After putting the GDrive link through this embedding URL generator, the file URL looks like this:
https://drive.google.com/drive-viewer/AKGpihZ--qmtSQLncieK4UaeakenzzevYpvBsWr4CwCBCbbtaVkdI_YAO5b3-EZtazTWvebw4MQE89DHPKFkNe3Mj4tvxYRs0xIq2A=s2560
If you click this, you'll notice it takes you directly to the image in your browser (rather than through GDrive). However, no luck. See the builder's empty image container:
Second attempt
Perhaps the URL is not properly formatted? Another URL alternative looks like this:
https://drive.usercontent.google.com/download?id=1S8CEargX7LmTycDVtLtKMa_mWrVHi2XN
The URL takes you directly to the image in your browser. But again, nothing shows up in the image container.
Third attempt
I tried to use the html block instead of the image block. However, this did not work either:
<a href="https://drive.google.com/drive-viewer/AKGpihZ--qmtSQLncieK4UaeakenzzevYpvBsWr4CwCBCbbtaVkdI_YAO5b3-EZtazTWvebw4MQE89DHPKFkNe3Mj4tvxYRs0xIq2A=s2560?source=screenshot.guru"> <img src="https://drive.google.com/drive-viewer/AKGpihZ--qmtSQLncieK4UaeakenzzevYpvBsWr4CwCBCbbtaVkdI_YAO5b3-EZtazTWvebw4MQE89DHPKFkNe3Mj4tvxYRs0xIq2A=s2560" /> </a>
Images that do work
Often copying the URL from Google Images will work. Here are two examples of images that display in the builder:
- https://www.shutterstock.com/image-photo/word-test-on-wood-cubes-260nw-2037828293.jpg
- And images that are base64-encoded into the URL (Github won't let me link, they are obnoxiously long).
Any suggestions? Should I switch from GDrive to something else to generate image URLs?
Hi @kyle-hunady, I believe you'll want to look into a 'public link' option on Google Drive. I haven't used Google Drive for that use case, so I'm not sure if it's possible/acceptable.
This link appears to be a good starting point: https://www.bannerbear.com/blog/the-ultimate-guide-to-using-google-drive-for-image-and-video-hosting/
If that doesn't work out, others tend to use cloud storage services like Amazon S3 – which is much more geared for this kind of image hosting.
Good luck!