x

How to Make GIFs Work on Tumblr Themes

by Alan Sembera

You can often draw more attention to your Tumblr blog by using animated Graphics Interchange Format files as part of your theme. To get the animation on your sidebar or description area, you must first upload the GIF file and then add a link to the file in your theme's HTML code. If you have trouble getting the animation to work properly, you may need to modify the original file to meet Tumblr's image standards.

Add Image to Theme

Upload the animated GIF file to Tumblr from its static file upload page (link in Resources). Tumblr allows you to upload animated GIF files as large as 5MB from this page, as long as they are for use on your theme. Alternatively, upload the file to an image-hosting site such as TinyPic, PhotoBucket or ImageShack. For other sites, keep the file size under 10MB.

Copy the image URL provided by Tumblr or the image hosting site.

Go to your Tumblr dashboard and click "Customize" to access your blog theme's settings.

Click inside the Description field at the point where you want to insert the animated GIF file and enter the following HTML code: <img src="URL"> Replace "URL" with the URL for your animated GIF. Keep the quotation marks around the URL. The final code should look similar to: <img src="http://imagehost.com/imagefile.gif">

Click anywhere in the preview pane to see how the image looks. On some themes, you may need to add a width attribute to the code so that the image fits in the sidebar. To set a width of 300 pixels, for example, modify your code as follows: <img src="http://imagehost.com/imagefile.gif" width="300">

Click "Save" and then "Exit." If the image doesn't display properly, or the animation doesn't work, wait a few minutes for Tumblr's server's to update your page. If it still doesn’t work, you may have to modify the original GIF file and then upload it again.

Tips

Reduce the dimensions of your animated GIF file if it exceeds 500 by 700 pixels. Many Tumblr themes can't handle larger images, or Tumblr may be having a problem reducing the image to fit your sidebar.

Reduce the size of the original file if you're still having problems. While Tumblr supports files up to 10MB when they are on other websites, the resources required to process such a large file may be the source of the problem. The easiest way to reduce the file size is to reduce the image dimensions, but you can also reduce the layers or the number of colors.

Resave your original animated GIF file if it meets all the size requirements, but still won't display properly. The problem may be a simple case of bad coding in the original file. Make sure you select the animation option when saving or exporting the file in your image editing software.

Use a standard image-editing program such as GIMP, Photoshop or CorelDraw when modifying your animated GIF files. You can also resave or resize animated GIF files using free websites such as GIFMaker.Me, GIFMagic or ResizePic (links in Resources).

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

More Articles