How to Make A Markdown Clickable Image Grid With External Links.

Hi everyone! Day two of posting this year, trying my best to keep it regular.

Today I'll be sharing how to do a markdown grid of images, from 1 to 4 images that can be clicked to external links.

NGL, this is a draft post I had in PeakD since early 2020, that I never finished, and quite frankly, I'm trying to maximise the little time I have to keep posting regularly. pffiuu!

The idea came as I wanted to have a footer on all my posts with the gear I use as a content creator, to keep it organised and beautiful, so here we go!

WHAT YOU SEE BELOW IS THE FINAL LOOK ALREADY APPLIED.

You can break down the code to make the grid whatever you like. Eg: I would like to have my gear showing in a grid of 3x9, kind of how Instagram looks, and make each image clickable to an external link. That can be an affiliate link or whatever.

IMAGE_TITLE

IMAGE_TITLE IMAGE_TITLE
IMAGE_TITLE IMAGE_TITLE IMAGE_TITLE

HERE'S THE RAW MARKDOWN

<center><a href="gastontrussi.com">![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG)


<a href="gastontrussi.com"> ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |                                                   
|-|-|


<a href="gastontrussi.com"> ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |                        
|-|-|-|


<a href="gastontrussi.com"> ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |  ![IMAGE_TITLE](https://siasky.net/XACirJ9Mzv8je1qqn8TMJx95ZYnbJtX4xMNaS9FGjZVeSg/gaston-profile-nft.JPG) |
|-|-|-|-|



Here is a cleaner version where you can replace: EXTERNAL_LINK with your affiliate link or something else, IMAGE_TITLE where you add the name of your image and DISPLAY_IMAGE_LINK which is your actual image.

<center><a href="EXTERNAL_LINK">![IMAGE_TITLE](DISPLAY_IMAGE_LINK)</a>center>


<a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) |                                                 
|-|-|


<a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) |                       
|-|-|-|


<a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) | <a href="EXTERNAL_LINK"> ![IMAGE_TITLE](DISPLAY_IMAGE_LINK) |
|-|-|-|-|



For DISPLAY_IMAGE_LINKS I used SkyGallery which is super easy to use and stores the images in SIA/SKYNET similar to IPFS. Here's a link if you want to give it a try. https://skygallery.hns.siasky.net/#/

I hope you can get to use this in one of your projects. I'll get back into this post eventually to clean it up a little bit more and also add the necessary missing information. I feel so rusty writing ;)

All the best for 2022!

IMAGE_TITLE IMAGE_TITLE IMAGE_TITLE IMAGE_TITLE
H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center