Embed pictures from google pictures into a website

Hi, I am working on the product launch page project for the responsive web design certification. I am trying to embed pictures from google pictures into my website, and I found a site that should allow me to do this, but when I put the output of the site into the html editor I only get part of the picture, and I can’t figure out what I am doing wrong.
Example picture: https://photos.app.goo.gl/SMBmY4xUQwwNst4RA
Site I found: https://www.labnol.org/embed/google/photos/
Project: https://codepen.io/starry_17/pen/bGrMpRG?editors=1000 (still in a very rough stage)

Did you try right clicking on the image and selecting, “Copy image address”?

You should be able to use that to access the image.

But in a real app you’d want to control that image, that is, host it somewhere or embed it in your code. That way you know it will always be there. And of course you want to make sure that you have the rights to it. But probably none of that matter for a curriculum project.


I take it the issue is that the picture was local to your pc and now you want to put it onto codepen?

You’re on the right track, keep going with this as it is deffo possible. You may even have done it right. It could be a formatting issue… Have you tried changing the size of the image? I’m pretty sure I used this site to convert a google photo and didn’t have (to) much of a problem.

@kevinSmith I think this is the only way to embed a picture onto codepen? or at least one of the easier ways that doesn’t involve buying a server haha.

1 Like

Sorry, I missed the codepen angle.

With codepen, the only way I’ve done it is the “right click save link address” method for images already on the web. If you host the images somewhere you could do it that way. I think with premium codepen accounts you can save files.

1 Like