GIPHY Linker : An easier way to embed GIFs into your blog

reprodev

Repro Dev

Posted on March 1, 2024

GIPHY Linker : An easier way to embed GIFs into your blog

One of my main reasons for starting a blog was to practice me some Markdown and HTML.

In theory this is a great idea but when I've learnt something interesting when moving over articles from my personal blog to my Dev.To blog.

My personal blog is built on the Ghost CRM and can handle embeds from sites with iFrames natively by using Markdown and a bit of extra HTML.

Dev.To handles this slightly differently so when I started posting on here I came up against a little trouble.

I found a guide from 2020 by Tomo Ernst, which I add to my reading list and was going back and forth to look to get the syntax and wrap around code I needed.

https://dev.to/timo_ernst/how-to-add-giphy-gifs-into-dev-to-posts-17jd

This is the code below which uses the direct share link from GIPHY.

$html = "<img width=`"100%`" style=`"width:100%`" src=`"YOURGIPHYSHAREDLINK`">"
Enter fullscreen mode Exit fullscreen mode

I spent a while manually writing out the lines of code to convert my built up GIPHY addiction or if I wanted to post something new.

Then I realised. Wait a second. This can be automated. In Powershell.


GIPHY Linker

Introducing GIPHY-Linker, a GUI tool built in Powershell to automatically create the correct embed from the Copy GIF Link to use in your Dev.To blog and much more.

https://github.com/reprodev/GIPHY-Linker/

You can use this tool to convert GIPHY.com GIF Sharing links into a line of Markdown with HTML code for blogs and some Markdown editors.

This will save you time and frustration for when you get in a writing flow.

00-Giphy-Linker

For now this tool is Windows only, sorry Linux family but that's in the works.


Prerequisites

  • Windows machine
  • Unrestricted Execution Policy in Powershell
  • GIPHY link or just a GIF link
  • Blog or Markdown Editor

Instructions

  • Download the .PS1 file from GitHub and Run With Powershell

  • Go to giphy.com or your fave GIF site and find a GIF

01-Giphy-Linker

  • Click Share on the GIF and copy the 'Copy GIF Link'

02-Giphy-Linker

03-Giphy-Linker

  • Paste the link into the box in GIPHY Linker

04-Giphy-Linker

  • Click 'Convert into Markdown with HTML' to create the HTML code for your Blog with your chosen GIF

05-Giphy-Linker

  • Use 'Copy HTML' to copy the link to your clipboard

06-Giphy-Linker

  • Paste your HTML line of code into your blog like normal

07-Giphy-Linker

  • Use 'Clear' to reset the form and start again

08-Giphy-Linker

- Meme without having to worry so much

This project is the first of a few possibly useful to me and maybe useful to you tools I'll be releasing on my GitHub and here on Dev.To. You'll also be able to find them by using the Portfolio tags on my site.

Hopefully, you'll get some use out of this and as long as you are using Windows, Powershell and an Unrestricted Execution Policy you can run it.

This tool is based on some other GUI clipboard tools I've made in Powershell over the past few years. It now takes pride of place in my blogging toolkit for my Dev.To blog and beyond.

Lazyness and automation wins again.


Don't forget to explore the rest of our website as we build out more content. Stay tuned for more tutorials, tips, and tricks to help you make tech work for you.

If you want to stay up-to-date with regular updates, make sure to subscribe to our free mailing list.

💖 💪 🙅 🚩
reprodev
Repro Dev

Posted on March 1, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related