Uploading Animated GIFs to WordPress

There is a subtle trick!

To show off your animated GIFs you must upload them to WordPress using the add media tool (see the documentation on uploading images). A subtle trick in doing this is knowing that when you upload images, WordPress automatically makes several different copies, in different sizes, for use in your themes (e.g. a thumbnail a small sized version).

The problem with animated GIFs is that copies WordPress makes loses all of the frames (and hence animation) from for file. Have no fears! The thing you have to make sure you do is to select the full sized version when you get the option, you want to insert the original file. For this reason, you want to make sure your source GIF is not too wide to fit in the space your theme allows for your posts- 500px is a safe bet if you are unsure.

This screencast will walk you through the steps.

\

Comments

  1. Alyssa

    February 4, 2013

    Thank you so much! Your video was extremely helpful and I figured out what I was doing wrong.

  2. Shawn

    February 10, 2013

    After trying to figure out what I was doing wrong for an hour, your video fixed my problem. Who knew it needed to be the full size file?! Thanks so much!!!

  3. April Francis

    March 8, 2013

    Sweet. Thank you, I could have screamed when I saw my first attempt at inserting a .gif failed, but then I found you :)

  4. darren case

    April 7, 2013

    hey thanks a lot! this helped out quite a bit.
    a quick way to get dimensions for pictures are using command-shift-4 (on a mac). just click and drag over the picture and the cursor will show you the size. while holding down the mouse button, press the esc key to not take the screen shot.

  5. ????

    June 27, 2013

    very helpfull

  6. Shereen

    August 12, 2013

    Didn’t help at all… my gif is still not animated -_-

    • cogdog

      August 12, 2013

      Ok, but you have to provide more information if you want some help, such as a link to the failed effort, and more description about what you did, expected to happen.

  7. Bob A.

    September 3, 2013

    This was very helpful, thank you. However, my animated GIF only plays once when you open the post then stops. It also plays and stops when you click to view in a separate window. It loops while I’m editing the image in WordPress and even in the favicon! What am I doing wrong that stops it from looping continuously? Below is the link to the post and also to the image file. Thanks again:

    http://bobsfreeblog.wordpress.com/2013/08/22/the-sun-sets-on-summer-13-at-camden-yards/
    http://bobsfreeblog.files.wordpress.com/2013/09/silos-by-the-susquehanna.gif

    • cogdog

      September 3, 2013

      Hi Bob,

      What software did you use to create this GIF? When I opened in PhotoShop the settings look like they are set to play only once. You might have to regenerate it and check your settings to make sure it is set o loop forever.

  8. nan

    October 20, 2013

    thank you! i’m a relative newbie, had no idea how to handle a .gif and now i know! you’re a doll!

  9. Homeli

    November 6, 2013

    Amazing. Spent ages re-uploading this gif of the walnut float table trying to work out why it wasn’t working (and spent ages looking at the post preview in case it was just taking long to load!)
    Can’t believe it was something as simple as using Original Size.

    By the way in case any one is wondering how to have different GIFs at dimensions, if you insert it as ‘Original Size’ and then click the image and go to settings, you can enter the dimensions in pixels manually although you’ll have to do some calculations to keep it scaled.

  10. cogdog

    November 7, 2013

    WordPress really ought to generate the multiple sizes as animations- it is able to generate the thumbnail version (what you see in your media library)

  11. Kate

    December 10, 2013

    Hi there,

    Really need help – basically the gif works on the “edit post” page and its moving.
    However, it just doesn’t work on my blog entry. I don’t think I’m doing anything wrong and I’ve used the original image URL. Thanks!

    • cogdog

      December 10, 2013

      It helps if you can send a URL where you see this problem, it’s hard to diagnose a problem without anything to look at. I looked at your blog and saw your black outfit dance post with a GIF that was animating. Maybe you figured it out.

  12. Reuben Saltzman

    December 13, 2013

    Very helpful, thank you for the info. Now I understand why my GIFs weren’t working.

  13. Enmanuel Corvo

    January 19, 2014

    Good wordpress plugin to build custom animations using the UI.
    wordpress.org/plugins/wp-visual-slidebox-builder

  14. Megan

    January 24, 2014

    Hi, I am really new to WordPress but I’m familiar with Tumblr. I’m trying to add a gif that I saved from there to the start of my blog but it won’t loop after I add it. Am I saving it wrong? Is there a setting I’m missing? I am aware that the gifs need to be Full Size to work. What can I do to fix this? I’ve scoured the internet at this point Lol

    Here’s a link to the blog with the gif inserted:

    http://cheersnutmeg.wordpress.com/

  15. Alan Levine

    January 24, 2014

    Hi Megan,

    It does not look like a WordPress issue; the GIF animates once. Does the original file loop when you open it on your computer?? My hunch is the GIF was not created with the loop option set to “forever”

    • Megan

      January 24, 2014

      Thanks for the reply.

      No it doesn’t loop at all actually which I why I was wondering if I was even saving it correctly. (I’m on a macbook and I saved the image from tumblr where it looped, opened it in preview, then saved it as a GIF) When I insert it into the post it only loops once as well. Lol

  16. Nic

    February 10, 2014

    Thanks for the tips!

    V helpful man!

  17. Zelia

    April 12, 2014

    Wow, so cool. I was seaching for days how to upload a gif. It really help. Merci de Suisse ! ;)

  18. Clara

    April 13, 2014

    Thanks this post is really helpful. I use gifs frequently on my portfolio site.

    Has anyone figured out how to get the feature image (post thumbnail) to pull up the animated gif and not the image copy? I need to have the post thumbnail next to my post animated but the feature image does not give me the option of using the original gif. This is what the post looks like now: http://www.clarathames.com/blog/

    • cogdog

      April 13, 2014

      Hi Clara,

      This is only a guess, and it depends on how your theme generates the feature image. What I would try is making a copy of the GIF in the size of the featured images (yours looks like 150×150) and upload that in your editor in the featured image area. Let me know if that works.

      I really like your design work, it shows a lot of breadth of design. Tietry is just elegant and clean; Grumpys makes me laugh.

      • Clara

        April 14, 2014

        Thanks Cogdog,

        I’ll give that a try and see what happens. If it doesn’t work and I find another solution I’ll let you know too.

        Thanks for the compliment on my work too- glad I could make you laugh.

        • Clara

          April 14, 2014

          I figured it out. You have to edit the php files. Open index.php and find and change it to

    • cogdog

      April 15, 2014

      That about covers it! Thanks.

  19. Billy Walters

    April 16, 2014

    Is there anyway to have a thumbnail of a gif that’s clickable so it opens in the same page? I don’t really want to have 10 gifs going all at once

  20. Ayrton

    June 27, 2014

    Thanks for this tutorial, very helpful !

  21. Elena

    July 23, 2014

    Thanks so much!!

  22. Brooke Ryan

    July 23, 2014

    Thank you so much! I wasn’t selecting the full size! I don’t normally post in comments on things but I just wanted you to know how much I appreciate your easy to follow notes on how to fix it! thank you!

  23. Bnimbhal

    September 2, 2014

    Hi,
    I am looking for the solution but on this page their is an error message.

    Warning: preg_match(): Compilation failed: group name must start with a non-digit at offset 8 in /home/ds106/public_html/wiki/includes/MagicWord.php on line 872

    Plz check

    Waiting for reply.

  24. ashland

    September 12, 2014

    thanks you very help me great guide..

  25. Cathal McErlean

    November 21, 2014

    Can you do animations on you header at the top of your blog? E.G Animation in my Logo?

  26. Clare

    December 17, 2014

    Thank you, this made sense and worked for me!

  27. Avi

    December 29, 2014

    My animated gif simply won’t play infinitely. It works fine when I open it in the browser but my WordPress site seems to insist on playing it only once. The size is OK and it plays fine on its own but the moment I embed it, it only plays once.

    If you look at this page to the picture of the bridge, you’ll see it only plays once but it’s meant to loop continuously.

    http://xdaysiny.com/christmas-in-dublin/

    I would really appreciate you help!

    Thanks

    • Reverend

      December 29, 2014

      Avi,
      If it only loops once that’s an issue with the GIF itself. You have the option of infinite loop when saving the GIF, did you check that box? I use GIMP, and it comes up in the final dialog box, it is probably somewhat similar in Photoshop. Let me know if this makes sense.

  28. Avi

    December 30, 2014

    Thanks for the quick reply. I used http://gifmaker.me/ and selected the infinite loop option but that did not seem to work on wordpress. Could it be in the way i upload it to wordpress?

    • Reverend

      January 2, 2015

      It could be, make sure the name of the GIF file is exactly the one you create that loops eternally. If not, change it to the original file name.

  29. Gaby

    July 5, 2015

    Thanks, very helpful!!!

  30. Aanya Rajput

    August 1, 2015

    Finally, I got the remedy for the Animated gifs inclusion to the blog…
    A great thanks to you for this informative article thanks again

  31. Jenn

    August 25, 2015

    That was great sir!!! Thank you so much! Solved my issue. You rock!

  32. Meaghan

    January 15, 2016

    Worked perfectly, thank you so much! I really appreciate simple solutions like this!

  33. Nivedita

    January 30, 2016

    Thank you so much for this video. Was really frustrated when i could not upload one gif file until i found your video. thank you

  34. Eloise

    July 18, 2016

    Thanks for the tips. How about if upload gif to flex slider? It can’t seems to work when I preview the flex slider. Anyone encounter this before? Thanks in advance for the help.

Add a comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

  1. Dear WordPress: I know you can resize animated gifs, but… - CogDogBlog11-20-13
  2. So long, farewell Week 2… | I haven't a clue what I'm doing!04-01-14
  3. GIFs and WordPress | Blogula Rasa05-17-14
  4. Sept 10: Saving animated GIFs, File Formats, and the paint bucket, crop, and lasso tools | Intro to Digital Media at UConn09-09-15
  5. Getting the .Gif – Pavy's blog & etc.02-02-16
  6. 2016-06-07 Animation Gif Code – Creative Aspects, Inc.07-17-16

ds106 in[SPIRE]