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.
| | |
|---|
| | | |
|---|
| | | | |
|---|
HERE'S THE RAW MARKDOWN
<center><a href="gastontrussi.com"></a></center>
<a href="gastontrussi.com">  | <a href="gastontrussi.com">  |
|-|-|
<a href="gastontrussi.com">  | <a href="gastontrussi.com">  | <a href="gastontrussi.com">  |
|-|-|-|
<a href="gastontrussi.com">  | <a href="gastontrussi.com">  | <a href="gastontrussi.com">  | <a href="gastontrussi.com">  |
|-|-|-|-|
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"></a></center>
<a href="EXTERNAL_LINK">  | <a href="EXTERNAL_LINK">  |
|-|-|
<a href="EXTERNAL_LINK">  | <a href="EXTERNAL_LINK">  | <a href="EXTERNAL_LINK">  |
|-|-|-|
<a href="EXTERNAL_LINK">  | <a href="EXTERNAL_LINK">  | <a href="EXTERNAL_LINK">  | <a href="EXTERNAL_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!
Dear @gastontrussi,
Your support for our previous proposal has been much appreciated but it expired end of December!
Do you mind renewing your vote to our proposal for 2022 so our team can continue its work!
You can do it on Peakd, ecency, Hive.blog or using HiveSigner.
https://peakd.com/me/proposals/199
We wish you a Happy New Year!
Oh this is something I'd love to try out.
Thanks for sharing! Will reblog this one..
Awesome! thanks for the reblog :)
You're welcome!
This is so awesome thank you very much. I find Markdown challenging because it feels like a subset of HTML rather than a self-enclosed editing language.
I can't wait to try this :-D
btw you picked up another follower and I am reblogging this useful article.
Thank you Chris, really appreciate it!
I would love to see it in one of your posts eventually.
Following you back as well 🙏