How do I make thumbnail images from my CodePen projects for my portfolio?

HTML-CSS
1

As seen on the example from the Build a Personal Portfolio Webpage:

I would like to create images that are links to the projects I have done so far. However I have no idea how to get the initial image of my CodePen projects.

Help on how to do this would be much appreciated.

My CodePen profile below:
https://codepen.io/EbLuhar/

2

Just take a screenshot.

2 Likes
3

Since the image is bigger than the screen it isn’t possible to get a complete screen shot, only partial. Shrinking the page doesn’t work because it has to be made so small that it isn’t readable. What am I missing?

Thanks!

4

For my portfolio, the same was true, I just took a screen shot of the top half and resized it. You can either resize in your photo editor of choice or resize via CSS. (probably smarter to resize BEFORE adding to your project lol).

only one of my projects already had a custom photo that fit perfectly.

5

I suggest getting an extension that allows you to screenshot the entire page, and then cropping it from there.

Firefox Quantum comes with such a feature built in. You get to it by clicking on the “Page actions” button on the address bar, and selecting “Take a screenshot.”

This creates an image like this.

Taking a screenshot of an entire page is something you might find yourself doing a lot, so its good to have an extension for it. Here are some suggestions for Chrome

From there you can use a photo editor to crop and resize the image to show what you want it to show.

6

I use the Chrome extension Awesome Screenshot to capture the full page… and then from there crop and size it. I use Gimp for that.

3 Likes
7

Found this on the blog section, codepen automatically makes thumbnail screenshots of pens, but noticed the cdn window is expanded on the thumbnail so I guess file hosting is the way to go. Btw found a way to take full page screen shot without an extension using web browser’s built in developer tools here: https://www.gungorbudak.com/blog/2018/06/28/capture-full-size-screenshot-on-chrome-without-extension/

Hope this helps others, Happy Coding!

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/oknoblich/pen/rxwog/image/large.png

Small Image Preview

https://codepen.io/oknoblich/pen/rxwog/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.

#Things Screenshots Are Used For

  1. Served to mobile devices, instead of <iframe> s for Pen Thumbnails
  2. Users can opt-in (in User Settings) to browse the site with images instead of <iframe> s
  3. RSS feeds
  4. Social Media “cards” (metadata URLs)

PRO members can set a custom screenshot for Pens and Projects. Custom screenshots replace the auto-generated screenshot everywhere screenshots are shown.

3 Likes
8

I realize that this is quite an old post, but I found upon inspection of the codepen thumbnail element, you can find a thumbnail image url inside of the div.iframe-wrap. Inside there is a source set with thumb png files for different screen widths. Hope I can save some time for a future coder working on this project!

1 Like