I recall seeing some time back a Steem profile pic that was a moving GIF.
I tried several things to create a GIF profile pic, but have failed. Do you know how to do this?
100% upvote reward to anyone who can create a tutorial for this.
I would want this GIF to be my profile pic:
Thanks,
Stella
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? ;-)
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?
Sorry? I don't understand what you mean..
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.
You found out first!
yeah thanks! It turned out that Busy.org and Utopian display my avatar as a GIF now, but Steemit is the problem.
6.15 kick backs.. sweet lord.. i go awol for four days!! .. great stuff @scipio :}
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
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!
hahaha @scipio thnx for the vote just i don t know if you read this or not
thank you anyway (^_^)
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...)
@bunnychum knows it. He can do it.
thanks
u r always welcome. :)
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
So the avatar profile images are displayed in an HTML div container tag, using an inline CSS style for the background-image attribute.
<div class="Userpic" style="background-image: url('https://steemitimages.com/u/stellabelle/avatar');"></div>
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. :|
Nope.
Wow excellent gif. thanks for sharing.
@stellabelle
Have a nice day
@jumowa ... any ideas ?
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.
Do you happen by any chance recall whose profile it was on? I haven't seen one yet. It'd be fun to have one.
Yes @stellabelle i can make GIF like this only give me a picture of ur choice
I know how to make GIFS. i am talking about having them as our steem profile
She doesn't want a gif... the image above is already a gif. She wants her profile pic to be a gif.
I think it has to do with the blockchain coding
https://lh3.googleusercontent.com/VxdQ_RzVSxodZ1IhFog1_Bh0W7NGjQj9PLJylKFgNi1rD2o_oOskAlROO6DCwmoYFpQpVaQ=s85
I think you should type this in
I looked it up on google and on google I could copy the link so I guess this is the way to do it
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?
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
Check it out.
http://gifmaker.me/
@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
@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_128x128Me too! I want to learn it. please stella resteem if you find someone who can do it..
Yes. You must use an external service like this https://giphy.com/upload/. Link it on your profile settings
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.
I cant even figure out the background. And so i have nothing helpful to provide here. Except to say hi!!! ✌🏻
It mat not work here but will in utopian-io, im a testament
Some coding might work out perfectly
Alternatively, try uploading a gif profile on busy.org.
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
Oh i have not seen that on steemit either but on utopian.io yes.
I hope steemit devs look into that soon.
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.
busy.org has it but it would be awesome to have it here and particurarly to see yours!! hehe ;)
Mine is a gif but clearly it is not moving lol... would love to know if you did it!!
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 .
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.
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
Please post a how-to when you figure it out! I think this would be a nice novelty for Steemians to use :D
Good question as usual!
I'm so glad that I'm not the only one wondering how to do this. @stellabella
Wow nice gif @stellabelle