Mercurial > kallithea
changeset 6923:d2f20f3d2117
gravatar: use background-image style instead of img element for gravatar
When having several 1000 users, chrome will fail to load all the gravatar img
elements on the _admin/users page (ERR_INSUFFICIENT_RESOURCES).
If instead we use a background-image style, chrome will only load the images of
the elements that are actually displayed.
author | domruf <dominikruf@gmail.com> |
---|---|
date | Sun, 13 Aug 2017 15:43:03 +0200 |
parents | f49e1b6cff90 |
children | 0acb46763886 |
files | kallithea/lib/helpers.py kallithea/public/css/contextbar.css kallithea/public/js/base.js |
diffstat | 3 files changed, 7 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/lib/helpers.py Tue Aug 08 22:43:11 2017 +0200 +++ b/kallithea/lib/helpers.py Sun Aug 13 15:43:03 2017 +0200 @@ -878,8 +878,9 @@ if src: # here it makes sense to use style="width: ..." (instead of, say, a # stylesheet) because we using this to generate a high-res (retina) size - html = ('<img alt="" class="{cls}" style="width: {size}px; height: {size}px" src="{src}"/>' - .format(cls=cls, size=size, src=src)) + html = ('<i class="icon-empty {cls}"' + ' style="font-size: {size}px;background-size: {size}px;background-image: url(\'{src}\')"' + '></i>').format(cls=cls, size=size, src=src) else: # if src is empty then there was no gravatar, so we use a font icon
--- a/kallithea/public/css/contextbar.css Tue Aug 08 22:43:11 2017 +0200 +++ b/kallithea/public/css/contextbar.css Sun Aug 13 15:43:03 2017 +0200 @@ -11,6 +11,7 @@ margin: -2px 0 -4px 0; /* background-color: red; /* for debugging */ } +/* Note: class 'icon-empty' can be used to get this styling without an actual glyph */ /* css classes for diff file status ... it'd be nice if css had a way to inherit from another class but alas, we must make sure this content is the
--- a/kallithea/public/js/base.js Tue Aug 08 22:43:11 2017 +0200 +++ b/kallithea/public/js/base.js Sun Aug 13 15:43:03 2017 +0200 @@ -1083,7 +1083,9 @@ if (gravatar_lnk == 'default') { return '<i class="icon-user {1}" style="font-size: {0}px;"></i>'.format(size, cssclass); } - return '<img alt="" class="{2}" style="width: {0}px; height: {0}px" src="{1}"/>'.format(size, gravatar_lnk, cssclass); + return ('<i class="icon-empty {2}"' + + ' style="font-size: {0}px;background-image: url(\'{1}\'); background-size: {0}px"' + + '></i>').format(size, gravatar_lnk, cssclass); } var autocompleteGravatar = function(res, gravatar_lnk, size, group) {