Skip to main content
On/on2/off/redirect icons as sprited background images. Started by Antechinus · · Read 10873 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

On/on2/off/redirect icons as sprited background images.

Ok, this is a good one. Has been talked about before, back in the previous dungeon. Bloc and I kicked it around a bit but it hasn't been implemented yet. I think it's time it was done.

Advantages are fewer http requests, and the icons can be changed in either the images folder (by overwriting in the usual way) or in the CSS. The latter opens up the option of having custom board icons without any back end hacking. All you need to do is write a litte bit of CSS and it'll work.

Example code for the basic conditonal would be like this:

Code: [Select]
			foreach ($category['boards'] as $board)
{
echo '
<li class="board_row ', (!empty($board['children'])) ? 'parent_board':'', '" id="board_', $board['id'], '">
<div class="board_info">
<a';

// If the board or children is new, show an indicator.
if ($board['new'] || $board['children_new'])
echo '
class="icon_anchor board_new_posts" title="', $txt['new_posts'], '"';
// Is it a redirection board?
elseif ($board['is_redirect'])
echo '
class="icon_anchor board_redirect" title="', $txt['redirect'], '"';
// No new posts at all! The agony!!
else
echo '
class="icon_anchor board_no_posts" title="', $txt['old_posts'], '" />';

echo '
href="', ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl . '?action=unread;board=' . $board['id'] . '.0;children'), '"></a>

CSS would just use a basic sprite, with either x or y positioning according to .icon_anchor.board_new_posts, etc.

To call custom board icons for each board, you'd just do something like this:

Code: [Select]
#board_3  .icon_anchor.board_new_posts {stuff here}

Obviosuly, being CSS stuffz, these would also work without any images at all. You could use icon fonts, or utf8 entities, or whatever.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: On/on2/off/redirect icons as sprited background images.

Reply #1

That seems like a good use for a sprite ... saves a couple of calls from time to time and is an easy to create sprite

Re: On/on2/off/redirect icons as sprited background images.

Reply #2

Quick test. Put all the board icons together with the images required for collapse/expand icons, and the quick edit, with enough space to have some to spare. Comes in at a bit under 11kb.

The images it replaces add up to a bit over 17kb, and require 9 http requests instead of one. :)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: On/on2/off/redirect icons as sprited background images.

Reply #3

And slightly smaller


Re: On/on2/off/redirect icons as sprited background images.

Reply #5

 emanuele wonders why this is not yet in...

 emanuele runs!
Bugs creator.
Features destroyer.
Template killer.

Re: On/on2/off/redirect icons as sprited background images.

Reply #6

I was just thinking about this too .... I'll give it a shot if no one else wants to

Re: On/on2/off/redirect icons as sprited background images.

Reply #7

Oh, this. Yeah was good idea. Shouldn't be that hard to do.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: On/on2/off/redirect icons as sprited background images.

Reply #8

Just made the PR ... the html/css may need some cleanup (I needed a couple of things so I could target them with JS) but at least things seem to be working :)

Re: On/on2/off/redirect icons as sprited background images.

Reply #9

Hey you didn't sprite the childboards!
Or are you waiting for me to break things? :P

 emanuele has still an outstanding branch that may or may not be merged at some point. O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: On/on2/off/redirect icons as sprited background images.

Reply #10

I completely forgot about them ! ...if you have a branch you can fix that in please do.  The only branch I outstanding is some JS re-arrangement

@emanuele I updated this in a branch so its taken care of :)
Last Edit: November 17, 2013, 06:20:25 pm by Spuds

Re: On/on2/off/redirect icons as sprited background images.

Reply #11

I say no sprites, or images really except for the logo. I think a font would work best.

Re: On/on2/off/redirect icons as sprited background images.

Reply #12

People will want to change them to suit their own taste, so images are good for that.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: On/on2/off/redirect icons as sprited background images.

Reply #13

Quote from: Xarcell – I say no sprites, or images really except for the logo. I think a font would work best.
It works well if you can manage it yourself but it simply won't work for the majority of users.
Thorsten "TE" Eurich
------------------------