Replace all occurences of img src attributes with css backgrounds

[bheesink]

Cleanup admin pages and remove unnecessary occurrences of img src attributes. This should be cleaned up so improving or redesigning the admin in the future is more easy.

The img src attributes occur in the following files:

django/contrib/admin/templates/admin/change_list_result.html (line 19)
django/contrib/admin/templates/admin/search_form.html (line 6)
django/contrib/admin/templatetags/admin_list.py (line 161)
django/contrib/admin/widgets.py (line 139, 245)
django/template/defaulttags.py (line 1296)
tests/regressiontests/admin_util/tests.py (line 136)

tests/regressiontests/admin_widgets/tests.py (line 258, 273, 290, 309, 414)
tests/regressiontests/defaultfilters/tests.py (line 272, 275)

[Luke Plant]

It's not at all obvious to me that this is correct. When images are purely decorative then it is fine to replace them with CSS. However, in some cases they are definitely not e.g. django/contrib/admin/templatetags/admin_list.py (line 161) - this icon carries information. In other cases it might be appropriate. But even things like the search icon carry clues as to purpose. If you convert to CSS, this information is lost if the user is, for instance, blind.

BTW, src is a required attribute of img, so we can't just remove that attribute.

[bheesink]

Replying to lukeplant:

It's not at all obvious to me that this is correct. When images are purely decorative then it is fine to replace them with CSS. However, in some cases they are definitely not e.g. django/contrib/admin/templatetags/admin_list.py (line 161) - this icon carries information. In other cases it might be appropriate. But even things like the search icon carry clues as to purpose. If you convert to CSS, this information is lost if the user is, for instance, blind.

BTW, src is a required attribute of img, so we can't just remove that attribute.

You are right... i meant that i want to remove the img tags and replace them for divs.
The icons that carry information can be replaced for example by the following elements:

<img src="some_icon.gif" alt="configuration" />

should be:

<div class="icon-configuration">configuration</div>

or:

<a href="#" class="icon-configuration">configuration</a>

styling:

/* example icons styling */

.icon-configuration {
display: block;
width: 10px;
height: 10px;
text-indent: -9000px;
background: transparent url(/path/to/icon.png);
}

Usability wise I think this is the proper solution. It's also better if the icons getting merged into a sprite in the future.

[Horst Gutmann <zerok@…>]

Personally I'm very much in favor of moving all the graphical icons from the markup and into CSS to improve customizability. IMO the question might be, though, if this should be done now or if this might be combined with some other improvements regarding the JavaScript integration in the admin and/or a refactoring of the admin altogether.

[Stephen Burrows]

I'd second making this part of a general admin refactor.

[Horst Gutmann]

So should this ticket perhaps be postponed in favor of the admin-rewrite or would it be worth doing this within the current admin app?

[Florian Apolloner]

Now is fine, the wanted admin rewrite should block changes in the current app.

[Horst Gutmann]

​https://github.com/django/django/pull/950

[Tim Graham]

I guess this may be superseded by #20597 (using an icon font for the admin images).

[Aymeric Augustin]

Yes, I think so.