Use CSS for icons instead of <img> tags
davegan - September 17, 2008 - 16:07
| Project: | Service links |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
Pretty simple request.. instead of using image tags in the css, it would be better to include a style sheet with the module.
That way, if you want to change the images, you can just overrule the css settings, not have to replace the images in the module itself.
#1
I'm trying to optimize my Drupal site as much as possible using Yslow. This was a standard optimization that I was going to submit anyway, but found this issue... so i'll upload here.
I used the free online CSS sprite generator service http://spritegen.website-performance.org to create the sprites. **
The instructions for implementing (out of the box):
Customized sprites:
If you have implemented any of your own additional links and images, you need to:
.share_service_links a {background-image: url(csg-495ea35a8db92.gif); /** change this sprite url **/
** Sorry but the zip includes an extra sprite for MySpace that is technically not covered by the regular 5.x version, you can find another patch around here to get the myspace link added to your set of service_links.
*** NOTE the patch assumes you've installed the module in sites/all/modules/service_links
#2
Might be a good thing to think about with #380322: Refactoring Service Links, but I don't think CSS Sprites is the way to do it, as adding additional images would require editing the CSS sprites image itself.
#3
If the question is "change the images without overwrite the originals" we can think to manage various subfolders under images/
#4
I personally think this is a good idea for the core service links. Additional images/services can just be called by its own file.
#5
CSS sprite model added in refactoring plain!
Anyway the sprites will be generated automatically without any external website help.
#6
I think generating the png image with all of sprites would be fantastic, and obviously the ideal situation - but I also think it will be a lot more work to code.
I just fear that this excellent feature will go down the same path as CSS Sprites which never made it out of DEV, 18 months ago. In fact, this kind of functionality I think belongs in it's own module, as it's functionality is applicable to many other modules.
Why not look for an easier solution to use in the meantime: like allowing for a "CSS Sprite" option to be selected, where you can then give the path to your image with all of the sprites (which you generate yourself). Then have fields for each of the service link icons to be manually assign it it's
background-positionand sprite dimensions? I think this solution will be a lot easier to code and will more likely make it into the module.I'm really interested in this feature, as being able to save 10 HTTP requests on each page load would be very user friendly..
UPDATE: I have 2 places where I show the Service Links on some pages, at the top and at the bottom. Because the module is using
<img>markup for the images, the browser attempts to fetch each image twice. I can't wait for the CSS improvements to be done because my front-end load time is being slowed down by about 2 seconds for some users.#7
Here's an interesting link regarding automating CSS Sprites, probably the best attempt I have found yet. It's open source (under the Apache 2.0 license) and is in active development.
http://code.google.com/p/spriteme/
It generates the CSS image, does all of the positioning calculations and then gives you a live preview on the page you are currently viewing!
Go through the slideshow for more details: http://spriteme.org/demo.php