Embed an image from Unsplash using random or query terms

[mlava]

✂️ Copy of your 42SmartBlock from Roam

• #42SmartBlock Unsplash

  • <%NOBLOCKOUTPUT%><%CLEARVARS%>

  • <%NOBLOCKOUTPUT%>
    <%SET:accessKey,<%RESOLVEBLOCKREF:((BLOCK REF HERE))%>%>
    <%SET:mode,<%RESOLVEBLOCKREF:((BLOCK REF HERE))%>%>
    <%SET:defaultQuery,<%RESOLVEBLOCKREF:((BLOCK REF HERE))%>%>
    <%SET:width,<%RESOLVEBLOCKREF:((BLOCK REF HERE))%>%>
    <%SET:display,<%RESOLVEBLOCKREF:((BLOCK REF HERE))%>%>

  • 
    <%NOBLOCKOUTPUT%><%JAVASCRIPTASYNC: ```javascript
    var url = "https://api.unsplash.com/photos/random?client_id="+roam42.smartBlocks.activeWorkflow.vars["accessKey"]+"";
    document.unsplashURL = "";

  if (typeof roam42.smartBlocks.activeWorkflow.vars["accessKey"] != 'undefined') { if (typeof roam42.smartBlocks.activeWorkflow.vars["mode"] != 'undefined') { if (roam42.smartBlocks.activeWorkflow.vars["mode"] == "QUERY") { var query = prompt("What mood | mode | theme do you want?", roam42.smartBlocks.activeWorkflow.vars["defaultQuery"]);
  url += "&query="+query+""; } else if (roam42.smartBlocks.activeWorkflow.vars["mode"] == 'RANDOM') { } else { alert("Please set Preferred Output mode to QUERY or RANDOM") } } else { alert("Please set Preferred Output mode in settings") } if (typeof roam42.smartBlocks.activeWorkflow.vars["width"] != 'undefined') { url += "&w="+roam42.smartBlocks.activeWorkflow.vars["width"]+""; } if (typeof roam42.smartBlocks.activeWorkflow.vars["display"] != 'undefined') { if (roam42.smartBlocks.activeWorkflow.vars["display"] == "PORTRAIT") { url += "&orientation=portrait"; } else if (roam42.smartBlocks.activeWorkflow.vars["display"] == "SQUARISH") { url += "&orientation=squarish"; } else if (roam42.smartBlocks.activeWorkflow.vars["display"] == "LANDSCAPE") { url += "&orientation=landscape"; } } } else { alert("Please enter Access Key in settings"); }

  var settings = { "url": url, "method": "GET", "timeout": 0, };

  $.ajax(settings).done(function (response) { console.log(response); var jsonUnsplash = JSON.stringify(response); var unsplash = JSON.parse(jsonUnsplash); var string = "\nImage by [["+unsplash.user.name+"]] at Unsplash"; let txtarea = document.activeElement; var setValue = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set; setValue.call(txtarea, string); const inputEvent = new Event('input', { bubbles: true }) txtarea.dispatchEvent(inputEvent) });``` %>

📋 Describe the SmartBlock

This SmartBlock allows you to embed either a random image from Unsplash or define a query and embed an image matching that term. There is some minor configuration required: see the images below.

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

You need to have a free account to access the Unsplash API. You can create one here.

Once signed up, you need to create a new application. The 'Demo' tier is probably enough as this allows up to 50 requests per hour.

Then, retrieve the Access Key from the Keys section in your Application settings as you need to enter this in the configuration as shown below.

You need to create a configuration section as below and complete using your desired settings. There are two mandatory settings and several optional ones.

- **Unsplash SmartBlock Configuration:**
    - **Mandatory Settings:**
        - *** Access Key:**
            - <Enter Access Key here>
        - *** Preferred Search Mode:**    __(QUERY | RANDOM)__
            - <Enter QUERY or RANDOM here>
    - **Optional Settings:**
        - **Default Query:**    __(preferred default search term for prompt)__
            - relaxed
        - **Width:**    __(in pixels)__
            - 600
        - **Display:**    __(LANDSCAPE | PORTRAIT | SQUARISH)__
            LANDSCAPE 

Note that your configuration section can go anywhere in your Roam graph. I have mine placed below the SmartBlock on the same page, but not as a sub-block!

You need the Access Key from your Unsplash settings to enter in the sub-block shown in place of . Then, type RANDOM or QUERY in the Preferred Search Mode sub-block.

The default query is only needed if mode is QUERY. Width and Display mode are not required but can be set if preferred.

Once you've set your configuration, you need to update each of the <%SET:accessKey,<%RESOLVEBLOCKREF:(())%>%> statements in the second block shown here:

Replace each block reference with the block ref in your own configuration section.

📷 Screenshot of your 42SmartBlock workflow/template from Roam

💡 Additional Info

Video Demonstration: https://www.loom.com/share/9aa25246fbfa4eed9f498fe2abebf667

---

[label_example]