Failed to get image url from codepen

Hello guys help me,
I failed to get image url from code pen to add in my personal portfolio.
Thanks in advance.

Hi @19alema!

It would help to see your code.
Can you share your code pen link so we can see the problem?

https://codepen.io/19alema/pen/bGePpLg

So it sounds like you want to use image thumbnails of your previous projects in your portfolio.

If that is the case then you can take screenshots of your projects and host the images online somewhere and grab the image address from there. For my project I used dropbox because I already had an account but there are plenty of free hosting options.

Here what I did for my project so you can see how I incorporated the image address into my code.
https://codepen.io/jdwilkin4/full/JjXQXwM

Thanks
But I would like to know more about how I can add the icon of say facebook in my code and actually how to take the screenshot of the image from code pen.
thanks

You can use font awesome icons.
You can use this link in your html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

You can then choose a facebook icon from their site. Copy the html code for that icon.

There are a few ways to do this but one option is to do it straight from your computer.

Mac
Take a screenshot - Apple Support.
or
PC
How to Take a Screenshot on Windows 10 and Windows 11.

  • Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
    https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
    or
    https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
1 Like

codepen generates screenshots of your pens for you, could that be useful?

https://blog.codepen.io/documentation/screenshots/

1 Like

Thank you but where should I access the links you have send me,
or you mean I should copy this link and paste them in a google search box and later change the name and the slug before searching for it , because I have tried all this options but I have still failed to get the image into my project.
What should I exactly need to do with the links you have send me to get the images in my portfolio.
Thanks,

What happened when you did this? I tried looking in your codepen but didn’t see that link in your portfolio.

Did you do something this?

<img src="https://codepen.io/username/pen/NWGpvKm/image/small.png" alt="Random picture">

 <img src="https://codepen.io/19alema/pen/BazGqXX/image/small.png" alt="Tribute page">

Username:
19alema

Slug for tribute page:
BazGqXX

Actually from there i just used tribute page as the slug because

Did you have an issue getting the other project slugs?

I have no words of how I can thank you, I finally got the trick.
Thank you very much.

1 Like

I thought the instructions (both mine and from the codepen blog) were pretty clear. Good you were able to work it out with some help.

Let us know when you’d like feedback on your portfolio.
Right now a quick looks shows it passes 8/10 user stories and is not responsive.

Thank you for that information.
But to be sincere I still find it hard to make the the page responsive, I mean what should I do to it to make the page responsive?
Thanks in advance.