Hello,

It's generally better to use sprite. Here a patch for that. Old files sizes are 196 and 187 bytes. New file size (sprite) is 150 bytes. And sometimes 1 http request is saved.

Files: 
CommentFileSizeAuthor
#27 extlink-963374-27.patch1.22 KBelachlan
PASSED: [[SimpleTest]]: [MySQL] 29 pass(es).
[ View ]
#25 extlink-963374-25.patch1.35 KBelachlan
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-963374-25.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#18 extlink-sprite-d7-963374-18.patch4.91 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite-d7-963374-18.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#17 extlink-sprite-963374-17.patch1.76 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite-963374-17.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#8 extlink-sprite.patch2.46 KBjcisio
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite_0_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#2 extlink-sprite.patch899 bytesjcisio
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#2 extlink.png153 bytesjcisio
extlink-sprite.patch893 bytesjcisio
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
extlink.png150 bytesjcisio

Comments

Status:Active» Needs work

In this situation, I think we'll need to use a horizontal sprite rather than a vertical one. Either that or give it more vertical space. This patch would have a problem with large font sizes.

Status:Needs work» Needs review
StatusFileSize
new153 bytes
new899 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

New patch.

What is the progress on this? It would be great to see it implemented.

Status:Needs review» Reviewed & tested by the community

The patch looks great, I'm just a bit busy and this is a minor issue. I'll commit it next time I'm working on Extlink.

Status:Reviewed & tested by the community» Needs work

Arg, bummer. In my testing this breaks the description text on admin/settings/extlink. We've tried to fix this in a dozen ways to no real avail. See #403786: Show themed icons on settings page.

Now that issue is closed, has this been committed?

It's not closed, it's "needs work". No it hasn't been committed since it breaks the display on admin/settings/extlink.

Status:Needs work» Needs review
StatusFileSize
new2.46 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite_0_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Shameless try on settings page. It even could be better to remove the class and add a background-url, so that there is no problem if someone overrides the default css. However I'm not quite comfortable doing that with vi now.

I'm not trying to resolve #403786: Show themed icons on settings page, that has been just won't fixed.

Tested and works.

Good work jcisio!!

I will leave the status changes to quicksketch

@quicksketch - Does this fix the issue?

I'm not sure these changes are going to work across browsers as-is. I know the "inline-block" CSS is not supported by IE6 (not sure about IE7). Do you think anyone would really care if we just kept all 3 images? That way we could use the sprite image on the front-end and the individual images on the back-end and not worry about this problem at all.

Yes, if it won't put more maintain work on your shoulders ;)

The main reason for the change is performance, if the individual images are used in the backend, it doesn't matter as people don't care about that for normal users.

Good idea, let's just make sure that the images are losslessly compressed as much as possible (I'm marking #1098186: extlink.png can be losslessly compressed as duplicate)

Has this been implemented yet?

Status:Needs review» Needs work

Would you mind re-rolling that patch git-style? Thanks.

Status:Needs work» Needs review
StatusFileSize
new1.76 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite-963374-17.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Here's a D6 patch. Just rerolled as requested in August.

Version:6.x-1.x-dev» 7.x-1.12
StatusFileSize
new4.91 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-sprite-d7-963374-18.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Here's a D7 version too. I've added invisible text in so that it is as accessible as it can be. Sprites vs alt text is still an ongoing debate.

It works fine in Firefox, but not in Chrome for some reason.

Bumping too see its inclusion.

Version:7.x-1.12» 7.x-1.13
Status:Needs review» Needs work
Issue tags:-sprite

Patch to be re-rolled.

  • Administration interface to use normal images
  • Everything else will use the sprite
  • Alt text will be added using "title" attribute

See reference: http://www.w3schools.com/tags/att_global_title.asp

Thanks @elachlan. Hopefully someone gets to re-rolling that patch.

Adding alt text via a title attribute is a bad idea. Many screenreader simply ignore titles, particularly on images.

Now if an organization like WebAIM.org was suggesting titles, that would be another issue, but w3schools does not have expertise in accessibility.

Good call.

Will use what we already have then.

<?php
<div class="element-invisible">' + Drupal.t('External Links icon') + '</div>
?>

Yup. That will work better.

Version:7.x-1.13» 7.x-1.x-dev

Status:Needs work» Needs review
StatusFileSize
new1.35 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch extlink-963374-25.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Re-rolled the patch with changes.

Status:Needs review» Needs work

The last submitted patch, extlink-963374-25.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new1.22 KB
PASSED: [[SimpleTest]]: [MySQL] 29 pass(es).
[ View ]

Removed the sprite image file for now from patch.

Status:Needs review» Patch (to be ported)

Commited to Git. Needs Port to 6.x and 8.x