Help

Re: Unsplash image clipper

1197 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Katherine_Duh
Airtable Alumni (Retired)

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.

Screen Shot 2019-09-25 at 4.55.43 PM.png

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:

2 Replies 2
Colleen_Brady
5 - Automation Enthusiast
5 - Automation Enthusiast

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.

two-bucks-fight-using-horns-photo-–-Free-Animal-Image-on-Unsplash (1) two-bucks-fight-using-horns-photo-–-Free-Animal-Image-on-Unsplash

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.

Melanie_E_Magda
5 - Automation Enthusiast
5 - Automation Enthusiast

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:

Screen Shot 2020-12-17 at 03.36.47

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: