How to add pictures from photos folder to code pen

@Marom313,

It looks like Google disabled this anyway, please read this: https://gsuite-developers.googleblog.com/2016/07/reminder-turn-down-of-google-drive-web.html

I would suggest using cloudinary.

1 Like

yes sir (:smile:
thats CodePen link:

Im not sure you can see it without my user.
this is the Photo link:

https://drive.google.com/open?id=1OAd1C5DbrLzEXwo59RUu2MKlapBSBdS-

Tryin switch between the one with the round boudaries and mine.

Thnx for your time (:slight_smile:

Ok, your link is not an image link. It is a link to the file in google drive, you need to have a link directly to the image, and there shouldn’t be any download, zoom in/zoom out buttons seen.

Here is the direct link:
https://lh4.googleusercontent.com/IEi11k7uPxPm9FVfRfx3_KVQ93wOo8JUiUId3cpYTyfvzEz4nv-0KylvoQFJ7YFhn6IWl_QZN3z6hCMH8Ntp=w1920-h987-rw

I got this from the three vertical dots > embed item > and then the link in the src tag.

wow.
Thank U so much man

1 Like

hey’ some how it worked yesterday but today i seems not to succeed/.
am i doing it right?

  1. Upload your photo to google drive

  2. open in a new window
    3.Three dotes menu
    4.embed item

  3. the link usually looks like this:
    <iframe src="https://drive.google.com/file/d/1OAd1C5DbrLzEXwo59RUu2MKlapBSBdS-/preview" width="640" height="480"></iframe>

  4. i take only the link between the “.”, copy it, put it in code pen/

but does not seems to work

At step three, you take the part in the src. Paste that in a new window. You should see an image preview, this is not what you want. You need to right click the image and hit copy link address. That should be the link you want.

Also, read my link above I posted. Google is disabling web hosting from Google Drive. They probably change the link to the images every day to prevent this. You need to host your image somewhere else other than Google Drive, Dropbox, or Imgur. All of those sites prevent image linking.

Cloudinary is the most powerful image hosting, but you can just use www.postimage.org if you want a quick and easy solution.

2 Likes

ok got it
Thank u very much (:slight_smile:

You can use any image hosting service. Even sites or networks such as indiedb and moddb allow you to upload images to your member profile (or a separate media group there), then you just need to hit the View Original text link to get the direct url. If the chosen image hosting site allows you to copy a direct URL and is okay with hotlinking, then it is fine to use.

1 Like

Thank you that really helped me out

go to this link upload your image then open it in new tab and copy the url

1 Like

How did you get through this ma’am

many many thanks bro

This worked for me. thank you for your help. i think google photo/drive have disabled that features.

can you help I’m still getting how to upload my own image? put me on track

problem with the image side

Thank you for the suggestion. I’ve signed up but am reading some intricate upload instructions. I hope I get that figured out quickly! :thinking:

Hi, Just “copy image address”, from Wikimedia for instance, worked.
Thanks.

Hi, thanks for the tip to ‘copy the image address’.

It’s also very common to use imgur,. You can upload pics and then copy link location by right clicking on the image, and pasting that on the image src.

For anyone still needing to convert their local image assets into a link for use elsewhere. If you have a Github account, login and open any repo (or a create a new empty one) and navigate to the “Issues” tab once inside a repository.

After the issues tab as been clicked, create a new issue (large green button) and then drag and drop an image into the issue box. It will generate a public image in Markdown that you can copy/paste wherever you need.

Hope this helps :]

7 Likes