Unsplash with Gridsome / Features / mtype

There’s severals ways of incorporating images on your site. With that said, this is probably not one of them. With all your enthusiasm drained, please continue reading… or don’t.

For starters, you probably shouldn’t hotlink to an image from a 3rd-party URL unless it’s a trusted CDN. Most certainly, it will take longer for the image to load compared to an image hosted within your own site’s directory. Another disadvantage when it comes to Gridsome, the image can’t be processed using a <g-image> component because they live offsite. True, there’s an awesome plugin for that, but then you’ll just be adding to the workload at build-time.

Postscript: Gridsome might be a static site generator, but it still relies on javascript to run properly such as rendering your other <g-image> components, prefetching routes, delivering page transitions, other things.

Basically, I wanted to explore how to GET data from an endpoint that included a dynamic part. In this case it’s the image :id.

The API endpoint: https://api.unsplash.com/photos/:id/?client_id=xxx

The documentation: https://unsplash.com/documentation#get-a-photo

To grab a specific image from Unsplash, you will only need to add its :id to your markdown file’s frontmatter. That’s all. No need to figure out and download the right image size or format, no need to grab the photo’s attribution snippet. This logic will be expressed inside the template.

BTW, you can find said :id when visiting a single photo’s modal/page.
Example: https://unsplash.com/photos/gdU9NcMLg-M
The :id resides at the very end of the URL.

Basic frontmatter inside ./content/posts/my-post-title.md:

---
title: My Post Title
coverImage: gdU9NcMLg-M
---

Abridged code for ./src/templates/Post.vue:

<template>
<div>
  <img :src="unsplash.urls.regular" loading="lazy" :width="unsplash.width" :height="unsplash.height" :alt="unsplash.alt_description" />

  // Give the author street cred
  Photo by
  <a :href="unsplash.links.html + '?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText'">
  {{ unsplash.user.name }}
  </a>
  on
  <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
  Unsplash
  </a>
  </div>
</template>

<page-query>
query Post($path: String, $id: ID) {
  post: post (path: $path, id: $id) {
    id
    title
    coverImage
  }
}
</page-query>

<script>
import axios from 'axios';

export default {
  data () {
    return {
      unsplash: {
        links: {
          html: ''
        },
        user: {
          name: ''
        },
        urls: {
          regular: '',
          raw: ''
        }
      }
    }
  },
  async mounted () {
    try {
      const results = await axios.get(
        `https://api.unsplash.com/photos/${this.$page.post.coverImage}/?client_id=${process.env.GRIDSOME_UNSPLASH_CLIENT_ID}`
      )
      this.unsplash = results.data
    } catch (error) {
      console.log(error)
    }
  }
};
</script>

I didn’t arrive at this solution on my own. The code example above can easily be discovered on Gridsome’s official docs.

Leaving off with a silver-lining, here’s a more suitable option instead of the nonsense I’ve advocated above. When using Unsplash as local images, refer to this helpful part of “How to Add Cover Images To Your Gridsome Posts” by Simon Mannes. This part comes from “Build Your Static Blog With Gridsome” – his wonderful guide.

Photo by Amadej Tauses on Unsplash

Unsplash with Gridsome

Article Credits