How to link Unsplash images directly to your jekyll blog

Unsplash is one of the most popular source of high-resolution images on internet. There are several API available to get the Unsplash images to your blog if your are using Medium, or even Wordpress. But if you are using jekyll and don’t want to overload your blog with unnecessary plugins, then you have come to the right place. I will show you how you can easily link unsplash images to your blog and can easily make that featured (or teaser) image or even embed into your posts.

Video Tutorial

Make unsplash image as your featured image for blog post

Every blog post on jekyll starts with a front matter. Here, you can add several meta data to your blog post. The featured image or the teaser is also defined at this location.

---
title: "A quick tutorial on machine learning"
date: 2021-04-10
tags:
  [machine learning, earth inversion,
  ]
excerpt: "Add the summary of the post"
mathjax: "true"
header:
  teaser: "https://source.unsplash.com/gySMaocSdqs/600x300"
classes:
  - wide
sidebar:
  nav: "docs"
category: machinelearning
---

As you can notice that I have added teaser as https://source.unsplash.com/gySMaocSdqs/600x300. When you want to add any image to your site, you can find the image on unsplash website, and then copy its ID (e.g., gySMaocSdqs). Then you can structure your link by concatenating https://source.unsplash.com, gySMaocSdqs, and other requests if you want.

For the above teaser, I requested the image in specific dimension 600x300. You can also simply define the width only (e.g. https://source.unsplash.com/gySMaocSdqs/w=600).

Adding unsplash image inside a blog post

The link structure would be same as in the previous section. All you will have to do is embed the image as you would insert any image.

![Unsplash computer image with cat](https://source.unsplash.com/gySMaocSdqs/600x300)

Or, if your prefer html:

<img src="https://source.unsplash.com/gySMaocSdqs/600x300" alt="Unsplash computer image with cat">