Move images to CSS
Michelle - June 20, 2009 - 21:01
| Project: | Advanced Forum |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
To make how AF handles images more consistant with how phpBB does it (to allow reuse of images) and also to make things easier for themers in general, I want to convert the current system to using CSS sprites instead.
Two hurdles come to mind:
1) How to handle translated buttons. If the images are specified in the CSS, it's impossible to use different buttons for different languages.
2) How to handle pointing to a different image directory since CSS image links would be hardcoded.
#1
Possible solution to #1: have translated classes for the button div/span and a language specific style sheet.
Michelle
#2
Better solution from stephthegeek:
[16:10] Michelle, i'd just set the language as a class somewhere in a wrapper
[16:10] .fr .some-button {}
#3
I discussed #2 with steph and I think it's just not going to be possible to keep that option. I think the benefits will outweigh the nusaince of losing that, though.
Michelle
#4
http://mustardseedmedia.com/podcast/episode6
#5
More thoughts... If I make a .css file that just contains the CSS to define the images, then that makes things more portable as images would be relative to that stylesheet. If a theme doesn't have that .css, it defaults back to the one in naked, and therefore the images in naked, which means we get back the behavior we have now. It also would isolate them better for language changes.
Michelle
#6
Made some good progress on this. Forum / topic lists are done. Need to do the topic pages and figure out what to do about Author Pane. Will likely need to branch it.
Michelle
#7
Shows how clueless I am on this... I was getting two things confused. What I'm actually doing here is moving the images to CSS. The "sprites" business seems to be the practice of putting multiple images or multiple versions of the same image in one file. I don't intend to ever put multiple images in one, but will, eventually, have multiple versions of some buttons for "hover effects" like phpbb does. I'll make that a seperate issue, though, as that will require making new buttons.
Hope that makes things clearer for anyone watching this issue that was confused by my confusion. ;)
Michelle
#8
Ok, everything but Author Pane is done for English. Once I'm done with the AP part, I'll put in the code needed to make this work with multi lingual sites.
Michelle
#9
To avoid having more issues filed, by "done" I meant the buttons are converted. There are still other issues such as removing the no longer needed option, fixing the CSS in all the styles, and probably other quirks. This issue is still very much ongoing. I will be getting back to it later this week.
Michelle
#10
I wasn't happy with the fact that critical forum links became invisible with images off, so I switched to using #8 on http://css-tricks.com/nine-techniques-for-css-image-replacement . AFAICT, that's the same technique phpBB uses.
Remaining issues:
There may be more but it's late and that's all I'm seeing. Testers: Please just add to this issue if you find other glitches in the image replacement rather than starting new ones.
Michelle
#11
#1 and #3 taken care of.
Michelle
#12
Got most of #2 taken care of. I added blue lagoon's french button css for testing. Still need to add the rest of the languages to the css and also to naked.
One issue is that other languages have longer words and the buttons aren't covering them. Might want to consider making larger buttons.
Michelle
#13
subscribing
#14
Note: Needs #518214: Add span/class to the Author Pane integration
Michelle
#15
Michelle,
I can understand you may not ever put multiple images in one, but I would suggest making the design flexible enough to allow this to happen. Right now we are in the process of converting most all of our images to a single sprite image. Our site is growing exponentially, and we are looking to improve performance in every possible area. Sprites can provide a significant boost. (Here is some info on how sprites increase performance by reducing HTTP requests: http://css-tricks.com/css-sprites/)
Currently I am modifying
advanced_forum.module(in 5.x-1.1) to support sprites. It would be nice to see some of this become part of the module. First, I changed theadvanced_forum_theme_imagefunction to support classes:function advanced_forum_theme_image($image_file, $alt = NULL, $title = NULL, $class = NULL) {
$image = advanced_forum_path_to_images() . "/$image_file";
if (empty($title)) {
$title = $alt;
}
if (file_exists($image)) {
if(empty($class)) {
return theme('image', $image, $alt, $title);
} else {
return theme('image', $image, $alt, $title, array('class' => $class));
}
}
else {
return false;
}
}
Second, I've been modifying all the calls to
advanced_forum_theme_imageto include class references. For example, for comment_add:$links[$link_key]['title'] = advanced_forum_theme_image(t('reply.png'), t('reply'), NULL, t('reply'));Third, I'm modifying the hardcoded PNG references to point to my sprite image rather than individual files.
What would be even better is if the hardcoded PNG references were replaced with, for example, data pulled from a form on the Advanced Forum administration page, or information that just sits entirely within the CSS file (which is what it sounds like you are leaning toward doing). Either way would allow an admin to overwrite the file names to use a sprite instead if he or she so desired.
Once this information is in place, it would be easy to control sprite placement in CSS, or use multiple images just as it is done today.
Ron
#16
I haven't tried it, but I'm pretty sure it already is. If I'm understanding right how sprites work, you would just need to adjust the positioning of the images. If it's not already possible, someone more experienced with CSS than me will need to explain how it can be made to work. Most of your comment is moot because it applies to 5.x, not 6.x-2.x. 5.x will not be getting any changes beyond bug fixes.
Michelle
#17
There is a disconnect in understanding how this works. You're thinking of it strictly as a "hover on/off" type of feature. In fact, it is possible to combine all images into a single sprite. Take a look at this website for generating a CSS sprite: http://spritegen.website-performance.org/. The idea is load all PNG files into a ZIP, then the generator creates a single PNG file with each of the individual images separated by some preset amount (for example, 50 pixels).
Once the sprite is created, then all that is necessary is some CSS to set the background position around the image. In this situation, all images have been combined into a single file to achieve high performance.
I'm not sure how you can say most of it is moot. In fact, the
advanced_forum_theme_imagefunction is exactly the same in 6.x-2.x, and all PNG file names are hardcoded inadvanced_forum.modulein both versions. All of my comments apply whether we are discussing 5 or 6.#18
Let me correct myself. I was looking at 6.x-1.1, not 6.x-2.x. Seems as though these functions are in place in 1.1, but not in 2+.
#19
Yes, I realized what CSS sprites are in #7. :) AFAIK, those will work just fine with the current CSS method.
Michelle
#20
Ok, sounds good. Look forward to checking it out in more detail once we migrate to D6 and 2.x moves to a supported production version.
#21
More fixes checked in. I think we're nearly there. Need to test more browsers and all the styles. Also need to run thru to see if there's any redundant CSS that doesn't need to be in there. Will only deal in English for now. Translations have been moved to a seperate issue.
Michelle
#22
This is looking pretty good. Calling this fixed.
Michelle
#23
Automatically closed -- issue fixed for 2 weeks with no activity.