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
Jochem•17mo 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
Khoa•17mo 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
Jochem•17mo ago
right, so what do you mean by extract then?
Khoa
Khoa•17mo ago
I want to get the url string of the thumbnail, like... open graph image or something
Jochem
Jochem•17mo ago
snippetList[0].thumbnailUrl? are you trying to show them in a list or something?
Khoa
Khoa•17mo 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
Jochem•17mo ago
oh, you have the codepen link but not the thumb url and want to generate it from the href field?
Khoa
Khoa•17mo ago
yes I have the link but I want to automate the thumbnail
Jochem
Jochem•17mo 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
Khoa•17mo ago
oh I see. I thought I have to do like a fetch or something to grab the thumbnail
Jochem
Jochem•17mo 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
Khoa•17mo 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
Jochem•17mo ago
no problem
Want results from more Discord servers?
Add your server