The current package image system on links is very manual. Too manual. You have to remember or look up a URL, insert an image, blah blah blah. Not to forget we're currently having to go through a messy database search-replace to change the images. Nasty.

Could we instead just add some javascript to the page that detected the package links and added a CSS class to them. Something as simple as this would work:

$('a[href^="http://apt.ubuntu.com/p/"]').addClass('packageLink');

And then some CSS to display the image:

a.packageLink {
    background:url(...) middle right no-repeat;
    padding-right: 20px
}
h1 a.packageLink, h2 a.packageLink, h3 a.packageLink {
    /* bigger version for headers */
    background:url(...) middle right no-repeat;
    padding-right: 25px
}

I'm guessing on all those padding values, but the idea is solid.

Then somebody only needs link to the package url, and an image pops up.

The current package image system on links is very manual. Too manual. You have to remember or look up a URL, insert an image, blah blah blah. Not to forget we're currently having to go through a messy database search-replace to change the images. Nasty.

Could we instead just add some javascript to the page that detected the package links and added a CSS class to them. Something as simple as this would work:

$('a[href^="http://apt.ubuntu.com/p/"]').addClass('packageLink');

And then some CSS to display the image:

a.packageLink {
    background:url(...) center right no-repeat;
    padding-right: 20px
}
h1 a.packageLink, h2 a.packageLink, h3 a.packageLink {
    /* bigger version for headers */
    background-image:url(...);
    padding-right: 25px
}

I'm guessing on all those padding values, but the idea is solid.

Then somebody only needs link to the package url, and an image pops up.