TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Fix Transparent Background in Gravatar Showing Background Image

Browse Source 
Closes #5882

* If a gravatar image is available, remove the default image behind it
* If gravatar image is not available, keep or replace the default image
This commit is contained in:
David Balderston 2016-03-24 21:03:45 -07:00 committed by Kevin Ansfield
parent c8d0e25923
commit d8ede94ac6
4 changed files with 20 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ghost/admin/app/components/gh-profile-image.js
View File

@ -1,4 +1,5 @@
import Ember from 'ember';
import AjaxService from 'ember-ajax/services/ajax';
const {
Component,
@ -30,6 +31,8 @@ export default Component.extend({
validEmail: '',
hasUploadedImage: false,
fileStorage: true,
ajax: AjaxService.create(),
config: service(),
ghostPaths: service(),
displayGravatar: notEmpty('validEmail'),
@ -61,11 +64,22 @@ export default Component.extend({
imageBackground: computed('validEmail', 'size', function () {
let email = this.get('validEmail');
let size = this.get('size');
let style = '';
if (email) {
let url = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=blank`;
style = `background-image: url(${url})`;
let gravatarUrl = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=404`;
this.get('ajax').request(gravatarUrl)
.catch((data) => {
let defaultImageUrl = `url("${this.get('ghostPaths.subdir')}/ghost/img/user-image.png")`;
if (data.errors !== undefined && Number(data.errors[0].status) === 404) {
this.$('.placeholder-img')[0].style.backgroundImage = Ember.String.htmlSafe(defaultImageUrl);
} else {
this.$('.placeholder-img')[0].style.backgroundImage = 'url()';
}
});
style = `background-image: url(${gravatarUrl})`;
}
return Ember.String.htmlSafe(style);
}),

2
ghost/admin/app/mirage/config.js
View File

@ -357,4 +357,6 @@ export function testConfig() {
user: record
};
});
this.passthrough('http://www.gravatar.com/avatar/**');
}

3
ghost/admin/app/templates/components/gh-profile-image.hbs
View File

@ -1,12 +1,9 @@
<figure class="account-image js-file-upload">
{{#unless hasUploadedImage}}
<div class="placeholder-img" style={{defaultImage}}></div>
{{#if displayGravatar}}
<div id="account-image" class="gravatar-img" style={{imageBackground}}>
<span class="sr-only">User image</span>
</div>
{{/if}}
{{/unless}}
<div class="js-img-preview"></div>

34
ghost/admin/tests/integration/components/gh-profile-image-test.js
View File

@ -56,7 +56,7 @@ describeComponent(
it('immediately renders the gravatar if valid email supplied', function () {
let email = 'test@example.com';
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=blank`;
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
this.set('email', email);
@ -67,37 +67,5 @@ describeComponent(
expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
.to.equal(`background-image: url(${expectedUrl})`);
});
it('throttles gravatar loading as email is changed', function (done) {
let email = 'test@example.com';
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=blank`;
this.set('email', 'test');
this.render(hbs`
{{gh-profile-image email=email size=100 debounce=300}}
`);
expect(this.$('.gravatar-img').length, '.gravatar-img not shown for invalid email')
.to.equal(0);
run(() => {
this.set('email', email);
});
expect(this.$('.gravatar-img').length, '.gravatar-img not immediately changed on email change')
.to.equal(0);
Ember.run.later(this, function () {
expect(this.$('.gravatar-img').length, '.gravatar-img still not shown before throttle timeout')
.to.equal(0);
}, 250);
Ember.run.later(this, function () {
expect(this.$('.gravatar-img').attr('style'), '.gravatar-img style after timeout')
.to.equal(`background-image: url(${expectedUrl})`);
done();
}, 400);
});
}
);