wallin/angular-gravatar

Easy-to-use and flexible Angular.js directive for Gravatar images

angular-gravatar's Issues

Angular dependency is outdated

"Provider gravatarService must define $get factory method."

I got this error: "Provider gravatarService must define $get factory method."

Fixed by editing the JS to do provider('gravatarService', function() { … } instead of provider('gravatarService', [ function() { … } ].

Maybe a Angular version thing? I'm on 1.2.

Need help with urlFunc

Hi --

I have this almost working! Thanks for implementing it. The thing I've run into is that it looks like I need to duplicate the default code for those cases when I just want the standard behavior.
This works, but the code depends on the angular-gravatar md5 module.
(Currently this is working for me, since hashRegex returns true in my case.)
I'm not sure how to include it -- adding it as a provider fails -- or if this is the best approach.
Any ideas how to deal with this?

I can't put the check for $preloaded.kiosk outside the definition of urlFunc, so that I leave urlFunc undefind -- I tried that. It is always false.

gravatarServiceProvider.urlFunc = function (opts) {
        if ($preloaded.kiosk){
            return '/static/project/img/embrace_gravatar.jpg';
        }
        else {
            // This code duplicates what is in angular-gravatar.js
            var params, pieces, prefix, src, urlBase, hashRegex, serialize;
            hashRegex = /^[0-9a-f]{32}$/i;

            serialize = function(object) {
                var k, params, v;
                params = [];
                for (k in object) {
                    v = object[k];
                    params.push("" + k + "=" + (encodeURIComponent(v)));
                }
                return params.join('&');
            };
            prefix = opts.protocol ? opts.protocol + ':' : '';
            urlBase = opts.secure ? 'https://secure' : prefix + '//www';
            src = hashRegex.test(opts.src) ? opts.src : md5(opts.src);
            pieces = [urlBase, '.gravatar.com/avatar/', src];
            params = serialize(opts.params);
            if (params.length > 0) {
                pieces.push('?' + params);
            }
            return pieces.join('');
        }
    };

Check if Gravatar Returns a 404

Is there a way to check if the gravatar exists, and if it doesn't return some other element?

<img ng-if="gravatarExists" gravatar-src-once="user.email">
<div ng-if"!gravatarExists">Some other element</div>

Any help is appreciated. Thanks in advance!

Not compatible with Grunt's magic

Hiya,
Could you change your bower.json to say this

"main": ["./build/md5.js", "./build/angular-gravatar.js"]

It is breaking the grunt goodness grunt is only injecting the angular-gravatar.js file.

I would create a pull request but there is a bunch of obnoxious versioning stuff that goes along with this and it is a copy-paste fix.

Thanks, your project works fantastically just dropped into an app!

aaron

Can't force update the image

Hi,

I have a profile page on my app and the user data come from Parse.com.
When the page loads, I start a query to get the user data.

Everytime I get the same image: www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?default=identicon&size=96

Checking the script, image loaded is from the email = ""
After the email is updated with a new email but the image continue the same.

I already tried to user $scope.$apply() but nothing change.
If I set the email, the image loads perfectly.

Inspecting the element is possible to see that the email is updated in the "gravatar-src".

Follow part of my code:

JS:

var user_parse = Parse.Object.extend("_User");
var query = new Parse.Query(user_parse);
query.get(profile_id, {
  success: function(profile_user) {
    $scope.user_email = profile_user.get("email");
    $scope.$apply();
  },
  error: function(error) {
    toaster.pop('error', 'Error...');
    $scope.$apply();
  }
});

HTML:

<img gravatar-src="'{{user_email}}'" gravatar-size="96" class="img-circle">

Best regards,
Douglas

Custom 404 Image

Great Project here 😃

Any directions or clue on how to use your custom image when the email provided is not available?

Default images without network access

Hi --

In some cases my application needs to run on an intranet, where it does not have network access to the gravatar site, and thus no gravatars or generated default images.
In that situation I still prefer to serve up an image of some kind. Leaving out the image messes up the layout. I could do this in the code for each place I'm using angular-gravatar. But I would really rather have angular-gravatar do it.

Using a single locally accessible default image would be satisfactory. Is this do-able?

Alternatively, with a bit more work I could see creating a graphic (or a div) that had a colored background and the first letter of the user's name.

Any advice/help?

If no Gravatar Load Initials Image

Hi, I was wondering how to achieve placing an image with the initials of the person if there is no gravatar.

Currently the plugin takes static images through the config is there a workaround this?

Lexer Error

Lexer Error: Unexpected next character at columns 13-13 [@] in expression

Refresh gravatar

Suppose a user changes their gravatar while using your site. Any thoughts on how to force an update / refresh of their image?

Support for my own Mystery man

Hi,

Is there a way to use this plugin to return a 404 if no image is found for the account rather then displaying a mystery man?

Thanks

Gravatar Failed - GravatarServiceProvider

Hi,

I'm using AngularJS V1.6.3

The error I'm getting:
Error: [$injector:modulerr] Failed to instantiate module ui.gravatar due to:
Error: [$injector:unpr] Unknown provider: gravatarServiceProvider

How can I fix that?

Thanks!

gravatar not workin on cordova

it work on ios emulator and in browser but not load image in a cordova app.
any help?

(no error log)

Feature: only apply once

Would it make sense with an option to deregister the watcher after it has applied once? In the style of e.g. https://github.com/tadeuszwojcik/angular-once

I use this directive to render something like 500 gravatars to a page, where the input email is guaranteed not to change.

That said, I can't say for sure what impact this might make. I'm still trying to make sense of Chrome's profiling. And I also completely understand if you feel this is out of scope, of course.

Gravatar profile service

Can we include a factory/service that provides a function to returns a user's Gravatar profile? This is available from Gravatar as JSON, and you already include the md5 library necessary to generate such a request URL.

Example profile: https://en.gravatar.com/205e460b479e2e5b48aec07710c08d50.json

{
    "entry": [{
        "id": "1428",
        "hash": "22bd03ace6f176bfe0c593650bcf45d8",
        "requestHash": "205e460b479e2e5b48aec07710c08d50",
        "profileUrl": "http:\/\/gravatar.com\/beau",
        "preferredUsername": "beau",
        "thumbnailUrl": "https:\/\/secure.gravatar.com\/avatar\/22bd03ace6f176bfe0c593650bcf45d8",
        "photos": [{
            "value": "https:\/\/secure.gravatar.com\/avatar\/22bd03ace6f176bfe0c593650bcf45d8",
            "type": "thumbnail"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/9388ce40336c711920e3493cbd9bff59"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/9564d785bb3d64c03d26b2de426c4312"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/a5d0e4d405a047e5b567e488dbc1eb21"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/fb8f961213a600c323bce0ad3c461a80"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/feb73c66a51313817aad85ebaba82ba3"
        }],
        "profileBackground": {
            "color": "#9c9c9c",
            "url": "https:\/\/secure.gravatar.com\/bg\/1428\/e9db3f026b7ce7748e58169cecb4980f"
        },
        "name": {
            "givenName": "Beau",
            "familyName": "Lebens",
            "formatted": "Beau Lebens"
        },
        "displayName": "Beau Lebens",
        "aboutMe": "Team Lead\/Code Wrangler at Automattic, working on WordPress.com and more. I make the web, and have done for over 15 years.",
        "phoneNumbers": [{
            "type": "mobile",
            "value": "[phone]"
        }],
        "emails": [{
            "primary": "true",
            "value": "[email protected]"
        }],
        "ims": [{
            "type": "aim",
            "value": "beaulebens"
        }, {
            "type": "yahoo",
            "value": "beaulebens"
        }, {
            "type": "icq",
            "value": "798818"
        }, {
            "type": "gtalk",
            "value": "[email protected]"
        }, {
            "type": "skype",
            "value": "borkazoid"
        }],
        "accounts": [{
            "domain": "facebook.com",
            "display": "beaulebens",
            "url": "https:\/\/www.facebook.com\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "facebook"
        }, {
            "domain": "flickr.com",
            "display": "borkazoid",
            "url": "http:\/\/www.flickr.com\/people\/borkazoid\/",
            "username": "borkazoid",
            "verified": "true",
            "shortname": "flickr"
        }, {
            "domain": "foursquare.com",
            "display": "foursquare.com",
            "url": "http:\/\/foursquare.com\/user\/3277",
            "userid": "3277",
            "verified": "true",
            "shortname": "foursquare"
        }, {
            "domain": "profiles.google.com",
            "display": "profiles.google.com",
            "url": "http:\/\/profiles.google.com\/100468367545654198427",
            "userid": "100468367545654198427",
            "verified": "true",
            "shortname": "google"
        }, {
            "domain": "linkedin.com",
            "display": "beaulebens",
            "url": "http:\/\/www.linkedin.com\/in\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "linkedin"
        }, {
            "domain": "tripit.com",
            "display": "beaulebens",
            "url": "http:\/\/tripit.com\/people\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "tripit"
        }, {
            "domain": "twitter.com",
            "display": "@beaulebens",
            "url": "http:\/\/twitter.com\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "twitter"
        }],
        "urls": [{
            "value": "http:\/\/wordpress.com",
            "title": "WordPress.com"
        }, {
            "value": "http:\/\/sidewalkscribbl.es",
            "title": "SidewalkScribbl.es"
        }, {
            "value": "http:\/\/gravatar.com",
            "title": "Gravatar"
        }, {
            "value": "http:\/\/intensedebate.com\/",
            "title": "Intense Debate"
        }, {
            "value": "http:\/\/dentedreality.com.au",
            "title": "Dented Reality"
        }, {
            "value": "http:\/\/automattic.com",
            "title": "Automattic"
        }]
    }]
}

Angular 1.5 support

I've been using this with angular 1.5 with no issues. Can you please bump the bower allowed version to <2.0

Dynamic gravatar source is not working

HI,
I'm wondering why this code is not working:

<img class="member" gravatar-src="'{{user.mail}}'" gravatar-size="100" />

I changed user mail more times but your directive changes src in the first time only

$scope.watch issue

Hi,

I am unable to get my gravatar from the original source; I updated the $scope.watch stuff like in https://gist.github.com/chamerling/6809780#file-angular-gravatar-coffee-L45 and https://gist.github.com/chamerling/6809780#file-angular-gravatar-coffee-L47 to make it work from a single HTML page (while now tests are failing).

I am quite new to angular, but by adding breakpoints to the source, I always get 0 as src value with the original code. Any idea?

Note : Pushed stuff to https://github.com/chamerling/angular-gravatar

Angular 1.3

Hi,

Your module works perfectly with Angular 1.3.1 but it can't be installed through bower because it requires Angular 1.2.x as a dependency.
Do you think you could change your bower.json file to reflect this compatibility?

Thanks in advance

Default image url

I'm setting the options directly on the directive, this way:

<img class="gravatar" ng-show="app.user.email" gravatar-src="app.user.email" gravatar-size="30" gravatar-default="http%3A%2F%2Fwww.gravatar.com%2Favatar%2F205e460b479e2e5b48aec07710c08d50">

and I'm getting this error:

GET http://i2.wp.com/http%3A%2F%2Fwww.gravatar.com%2Favatar%2F205e460b479e2e5b48aec07710c08d50 400 (Bad Request)

I don't know where the "http://i2.wp.com/" came from...

[email protected] requires a peer of [email protected] but none was installed.

Hi @wallin,

I'm using angular-gravatar in my project loopback-angular-admin which I'm migrating to using npm instead of bower. I'm also using gulp instead of grunt.

When installing the npm version I get the warning: [email protected] requires a peer of [email protected] but none was installed..

I was curious if this is really needed?

Regards Bram

What license?

There's (currently) no license specified, so while I'd like to use this in my own project, right now I can't. I assume you intended this to be under an open source license of some kind since you put it on Github, but you'll need to specify the license. MIT? GPL? Something else?

Also, since there have been two contributors to the code before any license statement was added, both @wallin and @thewarpaint will need to explicitly consent to the license, since each of you holds a copyright in your own contributions.

use image as background

Hello. I'd like to use gravatar images as background. Is there any way to do this currently? I've replaced this line (line no 423):

element.attr('src', gravatarService.url(newVal, opts));

with this:

element.css({'background-image': gravatarService.url(newVal, opts)});

I had to move this library out from bower to libs folder for this simple task. But I'm sure I'm missing out something! Any help would be appreciated. Thanks in advance.

md5 Dependency

Hi,

I'm trying to use your package in my project, but I'm unable to access the src directory which holds the md5 service dependency. Could you please move the md5 service dependency from the src directory in to the build directory so it's accessible and I don't have to vendor a copy of your md5.js file?

Application does not run after grunt build

I've had to add a semi-colon to the end of the md5.js file so the application could run properly after grunt build:

It was:
return hex_md5; })

After the fix:
return hex_md5; });

Bower adds the non-minified version to the bower section of the index.html file. Then grunt concats, ngmins and unglifies the file. And without that semi-colon, the resulting script throws a couple of errors.

Need an intercept for user data delivered as a promise

Hi there,
My user data is delivered as a promise and the directive executes before it is delivered. Is there any way to trigger the directive to see the change?

Thanks

James

Gravatar default watch for changes

Hi,

I am trying to add the gravatar-src with gravatar-default in a ui-select dropdown, the problem is that the gravatar directive renders before the $select.selected object is set, so it ends up not rendering the fallback avatar correctly.

Note: the values are displayed correctly in the dropdown itself but not on the selected object that is retrieved using the $select.selected variable, and I've double checked that the data goes to the function correctly, I just believe it goes late after rendering.

This is the fallback function

    $rootScope.getFallbackGravatar = function(name, email) {
      if (name != 'undefined' && name != undefined && name.length > 0) {
        return "http://placehold.it/70/f1f1f1/2c3e50&text=" + name.substring(0,2).toUpperCase();       
      }else if (email != 'undefined' && email != undefined && email.length > 0){
        return "http://placehold.it/70/f1f1f1/2c3e50&text=" + email.substring(0,2).toUpperCase();       
      }else{
        return "http://placehold.it/70/f1f1f1/2c3e50&text=NA";       
      }
    };

And this is the ui-select code

            <ui-select ng-model="defaultAssignee.selected" theme="select2" search-enabled="false" ng-change="assigneeChange()">
              <ui-select-match placeholder="Select Assignee">
                <img gravatar-default="{{getFallbackGravatar($select.selected.name.name, $select.selected.name.email)}}" gravatar-src="$select.selected.name.email" alt="" class="user-thumb">
                <span>{{$select.selected.name.name}}</span>
              </ui-select-match>
              <ui-select-choices repeat="assignee in issue.assignee ">
                <img gravatar-default="{{getFallbackGravatar(assignee.name.name, assignee.name.email)}}" gravatar-src="assignee.name.email" alt="" class="user-thumb">
                <span>{{assignee.name.name}}</span>
              </ui-select-choices>
            </ui-select>  

Get /build/md5.js 404

I use bower and injector adds a scrpt tag to md5.js, but i get 404.

Inject html code from controller

Its impossible to see the gravatar image if I inject the html code directly from the controller. I need to do this because part of the page is built in the controller.

Please, there are any method to see the gravatar image injecting the code?

Thanks.