Is there any way to get the image used for the background of an artist page in PHP or JS? It's different from the normal artist image, so I don't think it's included in the artist JSON from the API.
Example on an artist page:
The link for this image can be found by inspecting the elements of an artist page and searching "artist-header", which is the element with the image as a background-image.
I tried simply loading the artist's open.spotify page, searching for the "artist-header" class, then taking the background-image style attribute. However, for some reason calling file_get_contents() on the artist's page returned a pletely different page. This page did not contain the background image.
Is there any way to get the image used for the background of an artist page in PHP or JS? It's different from the normal artist image, so I don't think it's included in the artist JSON from the API.
Example on an artist page:
The link for this image can be found by inspecting the elements of an artist page and searching "artist-header", which is the element with the image as a background-image.
I tried simply loading the artist's open.spotify page, searching for the "artist-header" class, then taking the background-image style attribute. However, for some reason calling file_get_contents() on the artist's page returned a pletely different page. This page did not contain the background image.
- 1 It's going through a CDN. Maybe there's a step in between to stop this automated scraping? – evolutionxbox Commented Dec 15, 2019 at 16:50
3 Answers
Reset to default 5The artist header image is now at:
document.querySelector('div[data-testid="background-image"]').style.backgroundImage.slice(5, -2)
Open the profile of the artist you're nabbing the cover banner from on your browser and fire up the inspect/developer tools interface. Hit CTRL-F and type in 'background', scroll a little through the results, and when you get to the line seen in the screenshot attached, copy and paste the url within the brackets into a new tab, and voila! All yours to save and customise.
Screenshot of Spotify artist profile of 808 State
You can use <element>.style["<parameter>"] to get to the contents of <element>'s style.
It also allows you to change that value.
Extracting link to the image:
document.getElementsByClassName('artist-header')[0].style["background-image"].slice(5,-2)