How To Create An Animated Gif Featured Image on WordPress

Chloé Watts is the Founder of chloédigital and a Fashion Technologist.

I am working on an email series for theFEED users of helpful tips they can apply to their mobile site!
In the email series one of the emails will cover how create an Animated Gif Featured Image on mobile so I am creating this blog post for further information and to help others who are interested in creating the same effect!
Here is the animated gif I made using, I took 5 shoes from Nasty Gal Shoe Cult as an example.
Animated Gif Featured Image nastygal-shoecult
Out the box, WordPress doesn’t allow you to have featured images as animated gifs because your theme uses a resized version of the actual image you upload, so it’s not actually using the original animated gif you uploaded and therefore it becomes a static gif.
The workaround that you can do is upload an animated gif as the FIRST image you upload through the WordPress Media Uploader from within the specift blog post edit screen. Then don’t upload a featured image through the official setting in WordPress.
Featured Image
This way theFEED will take the first image an apply it as the blog post featured image and because it will grab the original it will stay as an animated gif. BOOM!
This could work for desktop blogs as well if you use a plugin like Autoset Featured Image or Automatic Featured Image Posts.
Here is what this blog post looks on mobile. Cool huh?




Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles-
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">