Personal Portfolio Project- How do I get a link to an image of my project?

#1

I’m doing the Personal Portfolio Project. As part of the “projects” section, I want to include a clickable image to link to a project.

But I don’t know how to get an image link for the project. In the example pen given, all the projects have image links: https://codepen.io/El_Escandalo/pen/PoYXzQJ?editors=1100

I tried right-clicking the projects in my Codepen dashboard but I don’t see an option to copy the image link. How do I get links to images of my Codepen projects?

#2

If you go to ‘Settings’ from the pen that you want an image of, and scroll down do ‘Screenshot / Custom Thumbnail’ section, you’ll see the screenshot that they’re using and you’ll be able to see two versions of it (‘View Large’ and ‘View Small’) under the image. So you might try using those links as a source for your image.

Honestly, I haven’t tried this in my projects, so I’m not sure whether it would work, I just made my own screenshots and used those in my portfolio. :sweat_smile:

3 Likes
#3

@kristina_v Thanks that did work! But let me ask you this: how did you link to your screenshots? Like, where do you host images? (sorry for the beginner questions!)

#4

I’ve hosted mine on Dropbox, but I’ve read on this forum that people used other platforms too (can’t remember exactly which ones, but you could maybe do a search on this forum, something like ‘hosting images’ and you’ll get the threads that discuss this in more detail) :slight_smile:

1 Like
#5

You can host your screenshots on Github.

1 Like
#6

@El_Escandalo you can use cloudinary.com to host your pictures its simple and fast platform as far as I can tell.

https://cloudinary.com

1 Like
#7

This was a very hard task (getting the images of my project into the personal portfolio). After a long time, I found a solution.
To get the job done;

  • Get a print screen of your browser and edit it to show your project.

  • Upload the photo to google photos.

  • Create a link to share your photo

  • Open the link Embed Google Photos

  • Paste you photo link

  • Copy the HTML embed code and paste in your img src
    This should get the image of your project into your code.
    Repeat this process for all of your projects to complete this challenge.
    It worked for me it should work for you too.

#8