Re: Unsplash image clipper
Are you looking for some free-to-use photos for inspiration? Here’s a recipe using CSS selectors to automatically grab an image from Unsplash, along with the page URL, photographer name, photographer handle, specified image location, and image description.
In your target base/table, you’ll need to have the following fields (or you can make a copy of this base)
- Link (URL field)
- Image (attachment field)
- Photographer name (single line text field)
- Photographer handle (single line text field)
- Location (single line text field)
- Description (long text field)
And here’s the snippet you can import:
"schemaVersion": 3,
"fieldMappings": [
{
"fieldName": "Link",
"fieldType": "url",
"defaultValue": {
"type": "pageUrl",
"opts": null
}
},
{
"fieldName": "Image",
"fieldType": "multipleAttachments",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._2QvSN > div > div > button > div._2yFK-.IEpfq > img"
}
}
},
{
"fieldName": "Location",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._1ltEq > div._2DxLe._3kEvh > div:nth-child(1) > a > span"
}
}
},
{
"fieldName": "Description",
"fieldType": "multilineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._1ltEq > div._2DxLe._3kEvh > div:nth-child(2) > div > p"
}
}
},
{
"fieldName": "Photographer Name",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._33qjA > header > div.HAAez._2iWc- > span > div._80uCh > div > a._3XzpS._1ByhS._4kjHg._1O9Y0._3l__V._1CBrG.xLon9"
}
}
},
{
"fieldName": "Photographer Handle",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._33qjA > header > div.HAAez._2iWc- > span > div._80uCh > div > a._3l__V._1CBrG.vTCGl._1ByhS._4kjHg"
}
}
}
]
}
Clip on, friends! :v:
Hello @Katherine_Duh.
Thank you for sharing the base. I made a copy, but not getting the results I expected. I’m wondering if there may have been changes to the structure of the page that is causing some fields in the clipper to no longer populate??
As part of my test, I tried to clip images that you had in your example.
When you originally created this, how did you figure out the path for the CSS Selectors? Did you print out the HTML and use a highlighter? Is there an online tool or extension that can help?
Thank you for the advice.
I made a few adjustments which appear to be working with Unsplash’s current selectors (as of writing, on 17-Dec-2020).
You can copy the revised base with 2 versions of the web clipper to cover lightbox images and page images – or continue scrolling to copy and import the snippets.
The fields are the same as:
- Link (URL field)
- Image (attachment field)
- Photographer name (single line text field)
- Photographer handle (single line text field)
- Location (single line text field)
- Description (long text field)
The first version of the clipper uses Lightbox selectors:
Lightbox snippet:
{
"schemaVersion": 3,
"fieldMappings": [
{
"fieldName": "Link",
"fieldType": "url",
"defaultValue": {
"type": "pageUrl",
"opts": null
}
},
{
"fieldName": "Image",
"fieldType": "multipleAttachments",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._2QvSN > div > div > button > div._1NNG0._2yFK- > div.c_6Je > div > img"
}
}
},
{
"fieldName": "Photographer Name",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._324Yk._33qjA > header > div.HAAez._2iWc- > span > div._80uCh > span > a"
}
}
},
{
"fieldName": "Photographer Handle",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._324Yk._33qjA > header > div.HAAez._2iWc- > span > div._80uCh > a"
}
}
},
{
"fieldName": "Location",
"fieldType": "singleLineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._1ltEq > div._2DxLe._3kEvh > div:nth-child(1) > a > span"
}
}
},
{
"fieldName": "Description",
"fieldType": "multilineText",
"defaultValue": {
"type": "cssSelector",
"opts": {
"cssSelector": "body > div.ReactModalPortal > div > div > div._2YoKj._1PdBr > div > div > div:nth-child(1) > div._1ltEq > div._2DxLe._3kEvh > div:nth-child(2) > div > p"
}
}
}
]
}
Here’s it in action if the photo is in a Lightbox:
