![Water drops on water base](/_astro/amadej-tauses-xWOTojs1eg4-unsplash.KX4xWmaS_1xxgd.webp)
Unsplash with Gridsome
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&utm_medium=referral&utm_content=creditCopyText'">
{{ unsplash.user.name }}
</a>
on
<a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&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.
Article Credits
Photo by Amadej Tauses on Unsplash