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.
\
Alyssa
Thank you so much! Your video was extremely helpful and I figured out what I was doing wrong.
Shawn
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!!!
April Francis
Sweet. Thank you, I could have screamed when I saw my first attempt at inserting a .gif failed, but then I found you :)
darren case
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.
????
very helpfull
Tatiana S.
Thank you so much!
:D
Shereen
Didn’t help at all… my gif is still not animated -_-
cogdog
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.
Bob A.
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
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.
nan
thank you! i’m a relative newbie, had no idea how to handle a .gif and now i know! you’re a doll!
Homeli
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.
cogdog
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)
Kate
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
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.
Reuben Saltzman
Very helpful, thank you for the info. Now I understand why my GIFs weren’t working.
Enmanuel Corvo
Good wordpress plugin to build custom animations using the UI.
wordpress.org/plugins/wp-visual-slidebox-builder
Megan
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/
Alan Levine
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
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
Nic
Thanks for the tips!
V helpful man!
Zelia
Wow, so cool. I was seaching for days how to upload a gif. It really help. Merci de Suisse ! ;)
Clara
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
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
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
I figured it out. You have to edit the php files. Open index.php and find and change it to
H S SOni
I was facing same problem. So i have created a list of solutions which surely solve the problem:
http://listenmefirst.com/use-animated-gif-image-in-wordpress-blog-post-2/
cogdog
That about covers it! Thanks.
Billy Walters
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
Ayrton
Thanks for this tutorial, very helpful !
Elena
Thanks so much!!
Brooke Ryan
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!
Bnimbhal
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.
ashland
thanks you very help me great guide..
Cathal McErlean
Can you do animations on you header at the top of your blog? E.G Animation in my Logo?
Clare
Thank you, this made sense and worked for me!
Avi
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
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.
Avi
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
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.
Alice Keeler
THANK YOU! This solved my problem.
Howe
http://giphy.com/gifs/3o85xCQo4GBdCgpFtu/html5
Gaby
Thanks, very helpful!!!
Aanya Rajput
Finally, I got the remedy for the Animated gifs inclusion to the blog…
A great thanks to you for this informative article thanks again
Jenn
That was great sir!!! Thank you so much! Solved my issue. You rock!
Meaghan
Worked perfectly, thank you so much! I really appreciate simple solutions like this!
Nivedita
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
Eloise
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.
Mayur Oza
Thanks a lot!!!!
It works fine…. :)
John Young
Thanks a ton, Allen. This worked like a charm.
Andrew Yan
Hello there,
I was wondering if it is possible to upload a gif to my WordPress theme for use as a background video. If yes, could you kindly point me in the right direction? Alternatively, is there a plugin that loops a video indefinitely?
cogdog
That’s what this post explains.
Nick
Thank you for sharing mate. You saved me a ton of time.
Hannah
It’s pronounced “JIF” with a J sound.