cancel
Showing results for 
Search instead for 
Did you mean: 
jbuchner
Community Contributor

Animated Gif as profile picture?

Jump to solution

One of my students uploaded and animated gif as a profile picture. How did they do that?

3 Solutions

Accepted Solutions
James
Community Champion

 @jbuchner ​,

Sorry I didn't see your comment on that page. It was lengthy and I honestly went just as far as finding the URL.

The uploading process works for .jpg, .png, and .gif files. Since the creation of the image isn't done within Canvas, they're assuming that you already have an image (from somewhere) that you want to use, and didn't explain how to do it.

Canvas dishes the image to the browser to display. If you modified the image inside Canvas, I'm not sure that it would retain the animation. But if you have it properly sized before uploading it should go straight into the system as an animated GIF file.

There are things you can do to disable animated GIFs like replacing them with a copy of the first frame, but I guess Canvas isn't doing any of them. Based on my work creating a photo roster for Canvas, I think some processing should be done on the Avatars before they're accepted / displayed. I had one student upload a hires photo for his Avatar and it took a while to load the page because of it. I would also add an option to disallow animated GIFs as avatars - set at an account level.

View solution in original post

kmeeusen
Community Coach
Community Coach

I have been using an animated GIF as my Canvas avatar/profile pic since we first migrated to Canvas five years ago. You scared me so I checked, and yup, the animation is still animated.

Life is good.

Kelley

View solution in original post

James
Community Champion

 @misemer4 ,

Are you asking how to make an animated GIF or how to get a profile picture in Canvas to use an animated GIF that you already have?

The answer to the first one is that you use software designed to do this. This can be done with several paint programs, including Photoshop, or online websites. Search for "animated gif maker" or "photoshop animated gif", replacing the photoshop with the name of your paint program to see if it's supported.  For the guy bashing his head on the computer, I just did a Google search for "animated gif banging head computer" or something similar.

If you're asking about how to get Canvas to use an animated GIF for a profile picture, that's a bit more challenging as the software crops the image you upload and that process removes the animation and just takes the first frame. That means that you cannot upload an image to Canvas through the profile page. Taking a photo won't make it animated. 

I don't use Gravatar, which is the third option when you go to update your photo, but a search of the web shows that people were complaining about the lack of support for animated GIFs a couple of years ago. However, reading their information makes it sound like you can use you own image if it is hosted somewhere that allows hotlinking. Like I said, I haven't tested this, but that should bypass the editing from Canvas that removes the animation. You can also try uploading an animated GIF to Gravatar and see if it works.

None of those are the way that I got my profile picture to be an animated banana, but the Gravatar approach is the only way I know of that might work using just the web interface. Again, I have not verified this since I don't use Gravatar.

View solution in original post

19 Replies
James
Community Champion

To add the picture, see How do I add a Profile picture?

To learn how to create or find the animated GIF, do a Google search ... it's done outside of Canvas.

jbuchner
Community Contributor

Hey thanks! I looked up the directions first, and didn't see any indications of how to upload and animated picture. I even left the same comment there. Also, I've made gifs before, but thanks for the tip, I will google it next time.

James
Community Champion

 @jbuchner ​,

Sorry I didn't see your comment on that page. It was lengthy and I honestly went just as far as finding the URL.

The uploading process works for .jpg, .png, and .gif files. Since the creation of the image isn't done within Canvas, they're assuming that you already have an image (from somewhere) that you want to use, and didn't explain how to do it.

Canvas dishes the image to the browser to display. If you modified the image inside Canvas, I'm not sure that it would retain the animation. But if you have it properly sized before uploading it should go straight into the system as an animated GIF file.

There are things you can do to disable animated GIFs like replacing them with a copy of the first frame, but I guess Canvas isn't doing any of them. Based on my work creating a photo roster for Canvas, I think some processing should be done on the Avatars before they're accepted / displayed. I had one student upload a hires photo for his Avatar and it took a while to load the page because of it. I would also add an option to disallow animated GIFs as avatars - set at an account level.

View solution in original post

jbuchner
Community Contributor

Agreed, while cute the time, if everyone's doing it, pages with profile pictures might become unbearably slow, and I already think some pages load far to slow for my tastes. I agree with out, it should be a setting, with default "off" or not allowed at all.

cwendt
Community Champion

For crying out loud . . . why, oh why did I read this? Now you guys have me wanting a sparkly, animated .gif for my own profile pic!

What is the right size for the gifs?

littletinydino,

The documentation is here: How do I add a profile picture in my user account as a student? The recommendation on that page is that the images be square and as small as possible. It then gives you the ability to go through and crop. The canvas_logo.png shown there is 128x128 pixels, the photos are larger.

That's not definitive, but when a user pulls up their profile page, the default image wrapped in the circle is 132x132 pixels. On the global navigation menu on the left, the avatar is 32x32. On the course People page, the avatars are 28x28. However, if you pull up the actual avatar that is being used, it's 128x128 pixels. The default user avatar that is used when someone hasn't uploaded their own is 50x50 pixels.

I would say 128x128 pixels is the preferred size.

So I tried all of those sizes and it still doesn't animate. It only has the first frame.

The size has nothing to do with the animation portion of it. I also found this documentation in the Users API

For maximum compatibility, please use 128 px square images.

It appears that Canvas is doing some processing to the uploaded images that removes the animation. Once again, Canvas is awesome!

That said, there is a way to do it by bypassing the image upload process. In testing, I forgot to switch over to our beta instance and I just accidentally overwrote my image in our production site with a dancing banana from http://media.idownloadblog.com/wp-content/uploads/2016/11/Animated-GIF-Banana.gif 

I'm not sure if "From Gravatar" option allows animated GIFs or not.