Merge all module toolbar buttons into same file

[Alexander Obuhovich]

I propose we merge all 135 "tool_*.gif" files of Core module into singe file. We could do the same for all other modules as well, so we end up with 1 file per module, that will contain all toolbar images.

This approach allows to save page load time. Also we will add css classes, that will contain position of each toolbar button in the file.
Toolbar buttons will be located in file like this:

[Add Button Enabled] [Add Button Hover] [Add Button Disabled]
[Modify Button Enabled] [Modify Button Hover] [Modify Button Disabled]

Same approach is used in mediawiki and youtube.

--
Best Regards,

http://www.in-portal.com
http://www.alex-time.com

[asd]

And in invite script also :)

[Alexander Obuhovich]

Seriously, this will speed up administrative console load time. In global scale we can merge all graphics, used in administrative console into one file and use it like this:

HTML:
<img src="img/spacer.gif" width="50" height="30" alt="" class="sprite logo-image"/>

CSS:
.sprite {
    background-url: url(img/sprite.png);
}

.logo-image {
    background-position: 10 15;
}

This way we swap 135 images to 135 css selectors and I think, that this exchange is for good. Each module will have personal sprite css file, so we don't bother about that.

--
To unsubscribe, reply using "remove me" as the subject.

[Dmitry Andrejev]

Agreed - will create a task and schedule for 5.1.0 since NOT that problematic to implement.

DA.

[Dmitry A.]

Alright, new task has been filed for this.

I think it would go into Features release (In-Portal 5.1.0 which is
5.1.x branch). IF anyone thinks it should be Bug fixes release please
comment here.

698: Refactor all module Toolbar Buttons by Merge into one PNG file

http://tracker.in-portal.org/view.php?id=698

DA.

On Apr 15, 9:33 am, Dmitry Andrejev <dandre...@gmail.com> wrote:
> Agreed - will create a task and schedule for 5.1.0 since NOT that
> problematic to implement.
>
> DA.
>

> On Thu, Apr 15, 2010 at 8:14 AM, Alexander Obuhovich <aik.b...@gmail.com>wrote:
>
>
>
> > I propose we merge all 135 "tool_*.gif" files of Core module into singe
> > file. We could do the same for all other modules as well, so we end up with
> > 1 file per module, that will contain all toolbar images.
>
> > This approach allows to save page load time. Also we will add css classes,
> > that will contain position of each toolbar button in the file.
> > Toolbar buttons will be located in file like this:
>
> > [Add Button Enabled] [Add Button Hover] [Add Button Disabled]
> > [Modify Button Enabled] [Modify Button Hover] [Modify Button Disabled]
>
> > Same approach is used in mediawiki and youtube.
>
> > --
> > Best Regards,
>
> >http://www.in-portal.com
> >http://www.alex-time.com

--
Subscription settings: http://groups.google.com/group/in-portal-dev/subscribe?hl=en

[Alexander Obuhovich]

I'm not too familiar with Photoshop, so please post any step by step instruction on how to merge all images together without loosing any gradients and image quality of existing toolbar images.

Maybe there are some video with exact places to click into in Photoshop or video about that. Any related information would be really helpful.

[Dmitry Andrejev]

No worries Alex! I'll help you out and take this part with Photoshop and CSS myself.

I might need some help from you in terms of JS / template changes to complete this task when the time comes.

Other contributors are welcome to participate or drop some tips here if have worked with this before (one big image with all sort of icons and css changes to use them).

DA.

[Phil -- wbtc.fr --]

the only solution I know is to use a smaller div bloc than PNG image, set the PNG as background and specify the background position.

To answer Alex question, using this technique we keep the full advantage of PNG format, as the full image is a PNG, and is never modified, transparency and gradient are fixed in the file for life :-)

p.

2010/4/17 Dmitry Andrejev <dand...@gmail.com>

[Alexander Obuhovich]

You answered to other question Phil. How to do it using CSS I already know. What I don't know is how to merge all images together without loosing quality.

[Phil -- wbtc.fr --]

the image quality is set on file export step in photoshop, when you select the parameters: png8, png24, gradient, transparency and so on. You can perfectly add all images in one file, and if you use the best quality used by the better image inside, it'll fit all other ones with lower quality.

PNG-24 is the best for gradient transparency, and for this output setting you can only select "transparency" and "interleave", then you can't be wrong :)

Last but not least, merging images can be very long, you can use photoshop scripts to do it automatically (while sometime adjusting a script could be as long as doing all work manually ^-^).


2010/4/17 Alexander Obuhovich <aik....@gmail.com>

[Alexander Obuhovich]

Lot of job actually to manually drag 135 small images into one large, so I wrote a sprite generator in php, that processes all toolbar images in given directory and creates:

• sprite png image
• css to use that image
• html file that uses them both

I've attached a sample to this post. Extract archive to "/system" directory of your In-Portal installation and visit HTML file in browser or by directly clicking on it from windows explorer. Hover over icon to see css selector used for it.

As you can see there are several problems:

• we same images, but available under different names (duplicate icons) - where row is longer, then 3 icons
• most of the icons don't use transparent background, but they really should use it
• "view" icon has 38x32 size instead of 32x32 as needed and there for is clipped as the result (in 4.x+ versions of In-Portal it is somehow resized by browser and we even didn't know it).
  

I of course can generate sprites with given images, but I expect, that in future someone will remove that gray background.

I also propose to keep that sprite generator script, since all custom modules can actually have their own icon set and it's a lot of work to create all that auto-generated files by hand.

[Dmitry Andrejev]

Wow, this is really amazing work you've done here!

Now about problems:

1. I say we get rid of duplicate ones, but there was one issue I remember related to this - when I register a button in a toolbar I can't do it 2+ times. In other words, in some cases you might want to reuse the same Icon with different Name and you can't.

2. We have ALL PNG sources and as a matter of fact at a few large files with all icons there.

3. Same here - we should adjust it.

At this point - I'll get the files and check on what to do and then it might be a good idea to use your script so it properly lays out PNG together and created CSS for us.

Please comment.

DA.

[Alexander Obuhovich]

2. Yes, because of button name is the key, and it's name is also used to get proper icon, then you can't use same button twice.

Also when "Use Toolbar Labels" option is not used, then only toolbar button icons are displayed, without text under them. In this case when you have duplicate buttons, then how you quickly distinguish them?

In css approach there is no problem to create new virtual button images based on css selectors from other button images.

[Phil -- wbtc.fr --]

Really good and fast job Alex!

I have few questions:
   - what is the use of "src="../core/admin_templates/img/spacer.gif" ", as my FF and Chrome are display the broken image icon over our icons ?

   - I've tried to duplicate the same icon's line of code twice, and it works, is there something I've missed? (ok it shouldn't, but it display correctly 2 times the same ID, tested on FF and GC)

Phil.

2010/4/18 Alexander Obuhovich <aik....@gmail.com>

[Dmitry Andrejev]

Phil,

1. All files (once decompressed) should be places under In-Portal system/ folder otherwise that spacer.fig image will not be found (as you have now).

Alex, do we really should use Image element for this?

2. Phil about duplicates - there is limitation in terms of adding a toolbar icon to the list with the same name when done via Templates.

Thanks.

DA. 

[Phil -- wbtc.fr --]

Dmitry,

1, I've tried to remove this "space" image, and there's no difference, tested in FF and GC. Also, if this is a button, it's a better practice to use a directly <a> tag instead of <img>, which mean we need to include this "img" inside an "a". We could lighten the code, and it's cleaner too ^-^ what do you think?

2, as a new button is just a new css ID now, why not creating another css line with new ID, related to  the label needed, and display another time the same icon? It's good to be able to change icons for different actions.

p.

2010/4/18 Dmitry Andrejev <dand...@gmail.com>

[Alexander Obuhovich]

1. That's sprite approach: use 1 transparent pixel image and set background to proper image ans position.

I don't think, that specifying height and width of a "a" tag would be more understandable. See youtube about that (their css).

2. Yes, that what I've said in my previous post to people, who need to have same icon to appear multiple times in same toolbar.

[Phil -- wbtc.fr --]

1, may it's more cross-compatible to use this transparent image, I agree...

2010/4/18 Alexander Obuhovich <aik....@gmail.com>

[Alexander Obuhovich]

Back on this.

Would be 1-1.5h to implement. Let's do this in 5.2.0-B3 release.