Does Anyone Know How To Make Our Profile Pic Into a Moving GIF?

stellabelle (75) in gif • 7 years ago (edited)

View this post on Hive: Does Anyone Know How To Make Our Profile Pic Into a Moving GIF?

7 years ago by stellabelle (75)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!

Sort Order:

Trending

[-]

scipio (65) · 7 years ago (edited)

Your steemit avatar is a static .png file, stored at Amazon S3. I think the Steemit interface just converts an externally located image to an internally controlled, externally sourced S3-hosted ("image proxy") 128x128px .png, just in case the external source doesn't load, then your profile picture wouldnt display at all, and on top of that it could contain malware or be extremely large in filesize and therefore cumbersome to load.

The Utopian interface (currently) just displays the external source images, in @cnts's case an animated gif.

Edit: animated PNGs are possible as well. The coolest online image filesize reducer I know of, is https://tinypng.com/ . It has an API as well, so you might want to suggest using TinyPNG for conversion purposes, to Steemit Inc. I guess you know who to contact? ;-)

$6.87

6 votes

[-]

spectrums (55) · 7 years ago (edited)

I'm over here digging into JSON and .gifs now—rather than writing that post I mentioned to you, @scipio. I wonder if the different parameters on Utopian (for calling on resources from the blockchain, which has to be different than this interface??) is what makes it easier—or plain possible versus not—to get the full effect of the file?

$0.00

[-]

scipio (65) · 7 years ago

Sorry? I don't understand what you mean..

$0.00

[-]

spectrums (55) · 7 years ago (edited)

I was rushing, apologies. Utopian.io’s interface allows more flexible expression of json metadata than Steemit ß (you can see this blockchain-tethered information when you go to Steemd and view an account; there’s a box with all of that information, including your profile picture URL). That’s what I’m assuming, at least. I was wondering aloud re: what exactly makes this little thing/task—one which seems so simple (posting an animated gif as your avatar on this particular website on the steem blockchain)—actually so hard, if it is possible. I figure the answer is somewhere in the layers between the interfaces and the blockchain itself.

$0.00

[-]

fabiyamada (64) · 7 years ago

You found out first!

$0.00

[-]

stellabelle (75) · 7 years ago

yeah thanks! It turned out that Busy.org and Utopian display my avatar as a GIF now, but Steemit is the problem.

$0.00

[-]

cnts (64) · 7 years ago

6.15 kick backs.. sweet lord.. i go awol for four days!! .. great stuff @scipio :}

$0.00

[-]

thegoldenphoenix (61) · 7 years ago (edited)

this would be awesome but on steemit you can't because it is related with the development of the website maybe for security issues but if you want to see where is the exact problem just follow this steps @stellabelle you still can see it but without refreshing the page
1- start your profile in a new tab browser then press f12 button or ctrl+shift+i you will see a window like this

2- now click the button shown in this picture to select an element in the page to inspect it which is your profile avatar picture in this case

3- when you click with the cursor on your user picture you will see that there is zone in the inspection window will change the color

4- so now copy the code that you will find in this link https://codeshare.io/5MbQEe
and past it in the place of the old one follow the steps on the pictures

this zone will appear

you can edit the written code inside this window so just delete it then past the code from the link https://codeshare.io/5MbQEe

we have finished now just close the inspection window and enjoy ;)
do not refresh the web page or every thing will be lost . i hope you will like it

$0.22

2 votes

[-]

scipio (65) · 7 years ago (edited)

What you are doing is a lot of work which nobody will see: you are changing the HTML DOM by replacing the static 128x128px Steemit profile .png with the original animated .gif, but only within your own browser. If you would reload / clear-cache that page, your entire work is gone.

PS: Nice try though! I upvoted your comment myself because you tried hard! :-)
PS2: next time, you might want to re-think if your solution actually solves the problem at hand before posting it!

$0.04

1 vote

[-]

thegoldenphoenix (61) · 7 years ago

hahaha @scipio thnx for the vote just i don t know if you read this or not

thank you anyway (^_^)

$0.00

[-]

scipio (65) · 7 years ago

You're welcome for my upvote! And yes I did read it! Did you also read my comment? (It's just below Stellabelle's article...)

$0.00

[-]

honeychum (68) · 7 years ago

@bunnychum knows it. He can do it.

$0.08

1 vote

[-]

stellabelle (75) · 7 years ago

thanks

$0.00

[-]

honeychum (68) · 7 years ago

u r always welcome. :)

$0.00

[-]

danielownsall (60) · 7 years ago (edited)

That would be so cool and hip to see. Lol I remember in the early 90s lurking on message boards and the page took like 20 minutes to load up everybody's GIF avatars. those were the days. I think I always used pro wrestlers doing body slams. Haha

$0.00

1 vote

[-]

sircork (64) · 7 years ago (edited)

So the avatar profile images are displayed in an HTML div container tag, using an inline CSS style for the background-image attribute.

From this we know that to use an animated image for the CSS background-image attribute, as defined here https://www.w3schools.com/cssref/pr_background-image.asp should be totally fine. Examples on other pages on this topic, show it should just work with an animated image profile pic chosen.

The thing is browser support for animated background images varies.

You would need to make a properly animated gif as you have done and use it as your profile image URL. Really is should be as basic as that.

The thing is I suspect most modern browser versions prevent the animated image from being used as a background image. Safari is reported to have had historic issues with animated gifs in general anyway. Support for them will vary.

But there is technically nothing stopping it from working "as-is" based on the source code the profile image I can view in the client side browser dev tools.

PS, have I upset you? I dm'd you on steemit chat to no response, and noticed the witness unvoting. Id sure like to give my side of whatever story caused all that. :|

$0.00

1 vote

[-]

spectrums (55) · 7 years ago (edited)

I have wanted to do this and you prompted my trying for 10 minutes. I think it's important that the extension of the URL end in either .png or .gif, plus (like others have said) compression of the file is important. I tried too hard, actually, for a minute. I gave up before things got out of control:

)

I wish I were a more efficient bot, but I'm only a sissy man who tried.

$0.00

[-]

japfive (56) · 7 years ago (edited)

Yes @stellabelle i can make GIF like this only give me a picture of ur choice

$0.00

[-]

stellabelle (75) · 7 years ago

I know how to make GIFS. i am talking about having them as our steem profile

$0.00

[-]

builderofcastles (65) · 7 years ago

She doesn't want a gif... the image above is already a gif. She wants her profile pic to be a gif.

$0.00

[-]

japfive (56) · 7 years ago

I think it has to do with the blockchain coding

$0.00

[-]

jostro (52) · 7 years ago

https://lh3.googleusercontent.com/VxdQ_RzVSxodZ1IhFog1_Bh0W7NGjQj9PLJylKFgNi1rD2o_oOskAlROO6DCwmoYFpQpVaQ=s85

I think you should type this in

$0.00

[-]

jostro (52) · 7 years ago

I looked it up on google and on google I could copy the link so I guess this is the way to do it

$0.00

[-]

royalfinest (56) · 7 years ago

It has do with using the right dimensions and resolution. I will do it, I believe.
What is the dimension of the gif you got up there Ma?

$0.00

[-]

maintain4real-eu (57) · 7 years ago

This is awesome @stellabelle

Having gif as profil picture
Am seing this for the first time and i think the same process followed by having this one uploaded can be follow to make use it for profile.
Thanks for sharing this

$0.00

[-]

aftabkhan10 (65) · 7 years ago

Check it out.
http://gifmaker.me/

$0.00

[-]

steveconnor (65) · 7 years ago

@stellabelle , I found a post about your topic however from the way it sounds it's only available on Utopian right now. The gif will play on Utopian but does not translate over to Steemit. I am tagging @cnts (Utopian Connection) in this discussion to see what can be done to make this available on Steemit as well. There still may already be a way so I hope everyone keeps searching. Here is the post I referenced https://steemit.com/utopian-io/@rufans/how-about-gif-file-as-photo-cover

$0.00

[-]

annhoyblog (55) · 7 years ago

Good question as usual!

$0.00

[-]

taimoorahmad (58) · 7 years ago

Nope.

$0.00

[-]

builderofcastles (65) · 7 years ago

@stellabelle when you just tried to change your avatar, what size and what type of image did you use?

Because it got converted to 128x128 and a png.

This is your stored avatar
https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5duBHkknYzLKcK8SKjzRDFtus9wvkR_128x128

$0.00

[-]

maxibyte (38) · 7 years ago

Me too! I want to learn it. please stella resteem if you find someone who can do it..

$0.00

[-]

yanosh01 (61) · 7 years ago

Yes. You must use an external service like this https://giphy.com/upload/. Link it on your profile settings

$0.00

[-]

goldcoin (66) · 7 years ago

Wow excellent gif. thanks for sharing.
@stellabelle
Have a nice day

$0.00

[-]

limabeing (56) · 7 years ago

I cant even figure out the background. And so i have nothing helpful to provide here. Except to say hi!!! ✌🏻

$0.00

[-]

josediccus (75) · 7 years ago

It mat not work here but will in utopian-io, im a testament

$0.00

[-]

steveconnor (65) · 7 years ago

@jumowa ... any ideas ?

$0.00

[-]

jostro (52) · 7 years ago

I thought it would be the same as just a picture, just put a link but maybe there is a video on youtube. I first did not know how to upload a profile picture and I was helped by a video.

$0.00

[-]

mickyscofield (54) · 7 years ago

Some coding might work out perfectly
Alternatively, try uploading a gif profile on busy.org.

$0.00

[-]

fabiyamada (64) · 7 years ago

hey! I know the problem
https://utopian.io/@stellabelle
it is steemit! it doesn't render animated gifs
because if you see your profile in utopian it is animated ;D
SOLVED XD I guess

$0.00

[-]

phunke (59) · 7 years ago (edited)

Oh i have not seen that on steemit either but on utopian.io yes.
I hope steemit devs look into that soon.

$0.00

[-]

intuitivejakob (65) · 7 years ago

Hey @stellabelle, I have been working with GIFs the past couple of days for my own content and noticed that as long as I'm saving them properly as animations, they work fine within blog posts.

I've begun to speculate as to whether there is something in the page build that prevents the animations from being viewed within the header portion of the blog pages. (It would make no sense otherwise, why an animated GIF would work within the blog posts, but not the headers of the blog itself.

I'd love to see this adjusted. It would be a hot feature.

$0.00

[-]

kingyus (59) · 7 years ago

busy.org has it but it would be awesome to have it here and particurarly to see yours!! hehe ;)

$0.00

[-]

kingyus (59) · 7 years ago

Mine is a gif but clearly it is not moving lol... would love to know if you did it!!

$0.00

[-]

pedroo (58) · 7 years ago (edited)

It not allowed on steemit ,it woths changing css style for it.It's really nice idea, and an idea specially for developers to work on it. It's the best suggestion.thank you very much .

$0.00

[-]

dwinblood (73) · 7 years ago

They have to make the website support it... Remember when the feed used to show GIFs and they disabled that? So they would have to enable GIF display as the profile picture.

$0.00

[-]

uwelang (74) · 7 years ago

I wrote a tutorial recently on how to create GIF via certain areas - depending on browser and glasses I say my profile photo "gif-ing" which was this - but I might have drank too much beer and might be wrong lol