Avatar and cover images for your Steem apps

in #steemdev7 years ago (edited)

Hello developers!

Today I want to show a simple solution to display avatar and cover in your app using identifiable url.

Why this solution? If you are building an app for Steem and would like to show user avatar, the quick solution would be to show directly the image URL from the user json_metadata.profile.image. It's working but have few downsides:

  • It's not optimized. Your users might have to download some really heavy files and / or with a different aspect ratio.
  • Original image link might be broken and fail to load.
  • It allows anyone to track you users. If you show original image within you app someone might get your users IP, user agent or store cookie to them.

That's why Busy created this service. It allows 3p apps to display avatar without having to deal with this concern, the image is optimized you can choose the size, it's fast, and if the link of the image is broken it will show a default image.

So how to use it? You can simply create link like this to get @hellosteem avatar:
https://img.busy.org/@hellosteem
or add this HTML code:
<img src="https://img.busy.org/@hellosteem" />

There is few optionals parameters that you can use:

If the user doesn't have a profile image or the image fail to load, we will show a default avatar. The default avatar can appear in multiple colors, the color being based on user id.

These parameters works also for cover picture. You can get cover like this:
https://img.busy.org/@fabien/cover

We are very proud to have few apps using our service already like DTube, ChainBB or MangoSteem and we encourage others apps to use it too! Here is some statistics about last month usage:

This service was running under the URL img.steemconnect.com previously but we had to depreciate it unfortunately, if you already using this service please update to the new url img.busy.org before we close the steemconnect URL (within 1 month).

This post rewards will be sent to @busy.org and as usual this project is open source with MIT license you can find the code here and fork it or contribute:
https://github.com/busyorg/busy-img

Have a good Steem!

Sort:  

Busy.org has a lot of potential. In fact, I think it could surpass Steemit if it wasn't so buggy and had a interface that is good on the eye. One of the biggest reasons I don't use it is because of the blinking of comment whenever I visit a comment (by clicking on its url). My eyes can't tolerate it.

We will soon release the v2 of Busy.org and i can tell you there will not be the blinking anymore :D. We completely rebuild most of the features and integrated into a new design that should be good on the eye.

excited to see that! a mobile app as clean would be killer.

Nice image

great work as always @fabien. I would like to know how to contact you on the Steem JS.

Specifically, how does one parse the string metadata retrieved by

steem.api.getAccounts(['ned', 'dan'], function(err, response){
}

so as to retrieve the only the profile metadata string as JSON? that is where the profile info is including the profile picture URL. how does one retrieve this JSON string which is again embedded inside the callback JSON result?

"json_metadata":"{"profile":{"profile_image":....."

JSON.parse() will help you

I will totally give this a go! I assume this service is and will remain free to use?

Yes sure it will remain free to use :)

I'm going to try it out. I might implement it into my current project.

this is just right ... Perfect 👍... And thank you!

This is really nice @fabien 😎
I did not know that the statestic was so high, but this tell me that this is growing good.

Lets hope for more growth now with SmartTokens 😉

You are doing a great job @fabien even if I am not a developer, I didn't forget you, I promise :).

Thank you!

nice work! :)

J'ai du regarder à deux fois que c'était bien toi qui avait écrit un article ! :D
Une fois tous les 6 mois, certes. Mais toujours au top !

Mdr merci je fait de mon mieux, prochain article dans 6 mois :p

He he @fabien qui poste ! Y a rien là !

Glad i have found you on steemit !

@fabien
About @promoted bot account.
Is it not working now?

I didn't receive upvote from @promoted.

Could you check it?

Fabien hy i saw you are loking for translations : i can translate french italian dutch romanian and italian! I am half italian half romanian and i live in belgium for 15 years so french and dutch is no problem! Let me know if i can hook you up

Thank you, that would be great! We already have French and Romanian (trop tard :p) but we miss Italian. You will need to go here and signup: https://crowdin.com/translate/busy/13/en-it to start translation.

Hello good post my name is Yudexis Jaume and I am from venezuela can you give a vote to my last post?

I've been very little time here. Im learning slowly but from what I've seen, I just love @promoted! Thanks a lot.

@fabien
i mentioned you in my post.. i hope you do not mind... thanks

Hi fabien here is rival again.. But now I am also here as witness on the blockchain.. I checked your votes and see that you have a vote for user arhag who is not an online witness anymore.. so you could better reuse your vote.. off course I hope that you vote on me but maybe you have others waiting on your list.. thank you so much. Check out my witness profile, and dreams..

That's cool! Thank you!

Congratulations @fabien! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Congratulations @fabien! You have received a personal award!

SteemFest 1 Attendee SteemFest 1 Attendee
Click on the badge to view your own Board of Honor on SteemitBoard.

For more information about this award, click here

By upvoting this notification, you can help all Steemit users. Learn how here!

Congratulations @fabien! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of comments

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Hi fabien, once you asked for translation help. I did my part for Esperanto. No feedback from your side. Maybe I missed something? Please come back!

busy.org more ecxiting now