Kevin Powell - Community•12mo ago

How do I extract the thumbnail URL from a given URL

so let's say I have like a list. each of them has a url. I want to go through each of them and extract their thumbnail image url to display it. Is this possible?

13 Replies

Jochem•12mo ago

I think you'll have to be a bit more specific, maybe share an example what does the list look like, for example

Khoa•12mo ago

let snippetList = [
        {
            title: 'Pancake Stack Layout',
            href: 'https://codepen.io/wentallout/pen/KKrqXMj',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/KKrqXMj-800.jpg?version=1688395959',
            desc: 'a commonly used layout in both desktop and mobile'
        },
        {
            title: 'Sidebar Layout',
            href: 'https://codepen.io/wentallout/pen/LYXLzLj',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/LYXLzLj-800.jpg?version=1688396607',
            desc: 'quick way to achieve a left sidebar + right main layout'
        },
        {
            title: 'Holy Grail Layout',
            href: 'https://codepen.io/wentallout/pen/yLQXzqe',
            thumbnailUrl: '',
            desc: 'classic holy grail layout using grid'
        },
        {
            title: 'Responsive Hamburger Navbar without JS',
            href: 'https://codepen.io/wentallout/pen/ExOmjXv',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/ExOmjXv-800.jpg?version=1688066327',
            desc: 'hamburger navbar that skip JS.'
        }]

let snippetList = [
        {
            title: 'Pancake Stack Layout',
            href: 'https://codepen.io/wentallout/pen/KKrqXMj',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/KKrqXMj-800.jpg?version=1688395959',
            desc: 'a commonly used layout in both desktop and mobile'
        },
        {
            title: 'Sidebar Layout',
            href: 'https://codepen.io/wentallout/pen/LYXLzLj',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/LYXLzLj-800.jpg?version=1688396607',
            desc: 'quick way to achieve a left sidebar + right main layout'
        },
        {
            title: 'Holy Grail Layout',
            href: 'https://codepen.io/wentallout/pen/yLQXzqe',
            thumbnailUrl: '',
            desc: 'classic holy grail layout using grid'
        },
        {
            title: 'Responsive Hamburger Navbar without JS',
            href: 'https://codepen.io/wentallout/pen/ExOmjXv',
            thumbnailUrl: 'https://shots.codepen.io/username/pen/ExOmjXv-800.jpg?version=1688066327',
            desc: 'hamburger navbar that skip JS.'
        }]

Ok so the thumbnailUrl is the one that I want to "automate" cuz I don't want to manually extract the thumbnail of each item the href is the link so people can click and visit the codepen page

Jochem•12mo ago

right, so what do you mean by extract then?

Khoa•12mo ago

I want to get the url string of the thumbnail, like... open graph image or something

Jochem•12mo ago

snippetList[0].thumbnailUrl? are you trying to show them in a list or something?

Khoa•12mo ago

ok sooo I want it to automatically get the thumbnailUrl without me manually typing into it it's like when you put a link in Discord and it shows the preview

Jochem•12mo ago

oh, you have the codepen link but not the thumb url and want to generate it from the href field?

Khoa•12mo ago

yes I have the link but I want to automate the thumbnail

Jochem•12mo ago

well, looking at the format you've got for the ones you filled in manually, you can probably just do some string substitution on the href something like

let thumbnailUrl = href.replace('codepen.io', 'shots.codepen.io') + '-800.jpg';

let thumbnailUrl = href.replace('codepen.io', 'shots.codepen.io') + '-800.jpg';

you don't seem to need the version query param, I assume it'll always just give you the latest one

Khoa•12mo ago

oh I see. I thought I have to do like a fetch or something to grab the thumbnail

Jochem•12mo ago

you'd have to check the API for codepen, if they have one, but the URL of the thumbnail is similar enough that you can just rewrite it yourself

Khoa•12mo ago

thank god their url is similar 😆 . If they use a weird image url Im gonna have to do some crazy stuff to get the thumbnail thanks for the help

Jochem•12mo ago

no problem

Gaming

Programming

How do I extract the thumbnail URL from a given URL