How to get Personal Portfolio card images?

I’m doing the Personal Portfolio Webpage project and I’m stuck on how to get the images from your projects on CodePen for the #projects section cards. How do I do that?

Hello @troyb16,

If you have the subscription to CodePen, it is possible to add the images to the project. If not, the only way to have them in your code is that they be accessible online. You can trick with Github, do you have a Github account and the images you need?

Yes I do, I actually just read something about image hosting, I was thinking of uploading the images to Google Photos, not sure which is a better idea though, that or Github or does it matter?

Also, do you know if the aspect ratio matters when cropping your images you will be uploading?

No it doesn’t. The important is just that it be accessible with a url. Just take care of the content you make public with this. :wink:

I think it depends the platform you use (I guess). Github will not change anything on the image, not sure about Google Photos.

Okay awesome, what exactly do you mean by the “:wink:” though lol

Why do you ask question I don’t know how to answer? Let’s say that I just mean I’m cool what about it haha? Modesty 0 I know

Lol okay haha well thank you for the help though @LucLH !

You’re welcome @troyb16, good luck for the projects!

1 Like

@troyb16, Codepen creates large and small screenshots of your pens that can be used in your portfolio. Their official documentation explains how to access them.

1 Like

Yes thank you! It’s says:

"When you save a Pen, it enters a queue for a screenshot. It’s not instant, but it shouldn’t take too long. We generate two screenshot sizes for your Pen.

You can access them at a URL structure like this:

Large Image Preview

https://codepen.io/chriscoyier/pen/NWGpvKm/image/large.png

Small Image Preview

https://codepen.io/chriscoyier/pen/NWGpvKm/image/small.png

Note those are just examples. You’d replace the username and slug for any given Pen.

Those image preview URLs will redirect to where the images are actually stored. If you are counting on getting an image back, use the URL in the format above. Where it redirects to may change (if the Pen changes and is resaved) but those URLs should always resolve to a real image."

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.