DEV Community

Krzysztof Kopieczek
Krzysztof Kopieczek

Posted on

4 3

How to embed GIFs on dev.to posts with Azure

Yesterday I had an idea to show text completion by Autohotkey with animated images (GIFs)

Unfortunately dev.to changes pasted images to *.png. After the image is pasted to the text, it's being changed to a proper markdown image placeholder:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj3ef8hw44slxqk1agn1.png)
Enter fullscreen mode Exit fullscreen mode

Seeing AWS in the image source immediately triggered me to use my existing Azure subscription to host *.gif files.

How to upload GIF to Azure Storage

  1. Let's assume you have existing Azure subscription. If not, you may consider reading/watching different tutorial.
  2. Create a new Storage Account. I suggest using a new, separate resource group for your "blog stuff"
    image
    image

  3. Provide account name (f.e. "kopieczekdevstoraccount"), select Azure region of your choice (any will be good, as dev.to readers are from all over the world), set standard performance, v2 account type and replication of your choice (I chose LRS because I don't need any backup). Other settings are irrelevant.

  4. Wait for the account to be created and create a container. Give it any name, f.e. "images" and set Blob public access level.
    image
    image

  5. Now just open newly created blob and upload your GIF.

  6. Click on the uploaded gif on the blobls list and copy the blob URL.
    image

  7. Paste the URL to your post:

![image](https://kopieczekdevstoraccount.blob.core.windows.net/images/No1p3JHaGb.gif)
Enter fullscreen mode Exit fullscreen mode

Voila! Now you can use GIFs in your dev.to posts.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay