Tango Sprites for RavenNuke

Posted: Thu Jul 29, 2010 1:15 pm

Thought I would throw this out there to gauge what kind of interest there might be in Tango Sprites for RavenNuke. For those not familiar with what sprites are:

Project Fondue wrote:

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used

The majority of time spent waiting for pages to load is usually not bandwidth restrictions but waiting for all those HTTP requests! That is, unless you are still using dialup Shocked

The Tango Desktop Project provides a set of icons released to the Public Domain: http://tango.freedesktop.org/Tango_Desktop_Project
I have adapted this resource for use with RN...
http://sourceforge.net/projects/tangoiconsprite/

I created a simple module to give you an idea of what sprites are included. To see the html required to use the sprites simply click on any of the sprites Smile

Once installed you could set to admin view only which would give admins an easy way to copy/paste the code into stories, content pages, blocks, modules, and so on.

http://www.rtsforce.com/modules.php?name=Tango_Sprites

The downside of sprites:

Still have a little more to do with this before I share it, but what do you think so far??

Posted: Thu Jul 29, 2010 3:10 pm

There is no doubt that using CSS Sprites is really helpful. I just modified a web page for a guy in Slovakia to demonstrate this technique. The original page had over 50 images, including 15 icons and the difference in page load time in the browser was amazing.

My only problem with using sprites though is that there never seems to be a an image consisting of enough actual sprites that are useful without having a huge image. I find I mostly have to create my own image of sprites.
One area where they are really useful though is administration area's where you need edit/add/delete type icons and I'm pretty sure phpBB would get a nice boost by using sprites as there are a lot of area's where images are used for icons and buttons.

registered · Posted: Sat Aug 07, 2010 8:11 am

I am in agreement with Guardian, especially if they are not specifically used for content. I think they are great for all the other page images (the small, heavily used ones, such as what has been discussed here already).

Posted: Sat Aug 07, 2010 1:03 pm

I agree it would be hard for any one site to use a set this large efficiently. My original intent was to create a small set for use in the copyright modals. While not necessary performance wise, it could be an easy way to give a consistent look and feel to the copyrights..

Posted: Sat Aug 07, 2010 8:58 pm

Somehow I missed this before. I agree with the above.

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

I'm looking for some pre-made sprite images for content slider navigation (prev, next, play, pause). Any suggestions?

Posted: Tue Aug 09, 2011 11:14 pm

i have a set you can use, but they are pretty small as they were intended for use in side blocks... as used in my autoscroll demo
http://www.rtsforce.com/Demo2.html

Posted: Wed Aug 10, 2011 3:25 am

spasticdonkey, IE 9.0 do not show the icons. What is happening with Microsoft? Every time they release a new browser is more worst than the first one. Any suggestion guys?

Posted: Wed Aug 10, 2011 5:03 am

IE 9 shows them fine.

Posted: Wed Aug 10, 2011 5:50 am

Thanks, spasticdonkey. Nice demo!

Posted: Wed Aug 10, 2011 1:31 pm

originally posted this a year ago.. the css that went with the tango demo that started this thread, has been removed from my testing site.. that is why no icons.

boethius, sprites certainly have their place, and the tango icons were more of an experiment than anything... you won't see any more huge sprite sets coming from me Smile

the second demo i referenced to kguske is a more realistic application of sprites.. where all the images are related, there is no reason to serve multiple images (files) to the client.

most of the page load time these days is spent requesting files from the server, as many people have high speed connections... it's often not a question of bandwidth. For instance, on a small scale, the second demo uses 3 images with sprites, but would require 11 without (mouseover effects). Now imagine it's on your site and you are getting 3000 hits a day... saving your server (and visitors) 24,000 requests.

sprites also add mouseover effects and the ability to restyle dynamically, without using javascript.... and for me personally, it's easier to customize 1 sprite image, than a whole set of independent icons..

kguske, i have a psd file and a larger version of the icons if needed.

Posted: Wed Aug 10, 2011 2:49 pm

Thanks again, spasticdonkey! Larger version in PSD would be excellent.

Your points on the appropriate use of sprites are definitely on target. Another example (one you've used quite well before) is social icons. We need to replace the icons in nukeSEO Social Bookmarking with sprites. One disadvantage in that example: adding new sites. For example, currently, it's easy to add a new site (e.g. Google +). Upload the image and change the code / database to allow the new site. With sprites, the image needs to be uploaded and the code / database updated to tell it the position of the image in the sprite.

Fortunately, there are tools that simplify that process (e.g. http://www.spritebox.net/ ).

Posted: Wed Aug 10, 2011 5:06 pm

included here are the icons in original 44 and 46 px, in square, round, and transparent; converted to sprite format.. included 3 psd's and a simple demo with toggle functionality for play/pause, example of starting in a play or pause state, and of course an example of the css needed.

http://www.rtsforce.com/files/player-sprites.zip

btw kquske, is this the same autoscroll you mentioned on nuken's site??

Posted: Wed Aug 10, 2011 5:25 pm

Not sure if it's the one he mentioned, but I'm focused on content sliders...the one I like is carouFredSel (carousel with Fred in the middle).

Posted: Wed Aug 10, 2011 5:30 pm

The one you used is Only registered users can see links on this board! Get registered or login!. Nuken used Only registered users can see links on this board! Get registered or login!

Thanks for the sprite files!

Posted: Wed Aug 10, 2011 5:37 pm

kguske wrote:

Nice. I'm looking more for content sliding than a marquee replacement, but Autoscroller is a great scoller / ticker.

i agree that content slider is very nice Smile

Posted: Wed Aug 10, 2011 7:27 pm

Wow... no wanting for feedback/input. Excellent! I agree as well that single images do have their place, but mostly where the images are closely related and would have a high likelihood of removing many individual requests as has been stated. I think kguske's example of social media icons is a perfect example. I also think a self-contained unit like copyright icons is another great example where pretty much all the icons embedded within the single image are used.

Great stuff!

Posted: Fri Aug 19, 2011 10:26 am

Definitely agree on the social icons needing to be sprites, though as kguske mentioned, it could get messy adding additional icons, especially if your a site owner with little experience with sprites and/or image manipulation in general. I guess the key is to release a good set of initial icons (in sprite form) and then rely on RN updates / the community for any additions.

I would certainly use sprites for copyright notices - even though most are still of the 'pop-up' variety, there are still gains to be made by using them.

Posted: Sat Aug 20, 2011 8:04 am

I'm going slightly OffTopic

not to derail the thread but only to plant a "seed"... (if more discussion on the below is desired, I'll start a separate thread.)

Guardian2003 wrote:

even though most are still of the 'pop-up' variety

Yeah, wish that could be configurable or a new standard would be put in place. It would be an added benefit I think for module developers to get "link juice" to their sites by developing good modules the community values. The more a module is "valued" by folks using it, it would be nice for the copyright page to provide that link back. I have never liked the pop-ups for that very reason and is why in HTML Newsletter, long back, I took a different approach.

Posted: Sat Aug 20, 2011 11:01 am

Why not make the copyright link go straight back to the authors site to disply the copyright notice ?
Would probably need to couch the link to ensure the remote page is available (in case of outages or dead sites) and use a local (where the module is installed) as a fall-back?
Hmm...

Involved Joined: Jul 03, 2006 Posts: 273

Why not a copywrite module (so to speak) that holds all copyrights similar to the news module. When you install a module (block , addon whatever) it install's it's copywrite info to a db table (or xml file or what have you) that is read from the copyrights module. You can link with your html newsletter module to the Copyright article page of the copyright module which in turn leads directly back in link juice to author site. Copyright module pages can aways be indexed and as well if someone surfed to the copyright index all copyrights for the whole system including addons would be listed there. Clicking more info on any one leads you to a dedicated article type page for that copyright info. Solves the link juice dilema with no more popups also doesn't crowd pages of the site with ugly copyrights but is fair to developers in terms of link juice.

Now before you say but what if they don't activate the module?
It doesn't have to behave like a normal module (can be like a backend.php type file even) therefor only those going in to actively change code or something can disable the module and that same type of user would do it no matter what you do so it's a mute arguement at that point.