Using CSS sprites is a great way to speed up your web pages and web applications. The concept is simple: bundle up all your icons into one image and use the background-position property to display the correct icon. By doing this you avoid having to download multiple image files and minimize your HTTP requests. Using sprites is especially useful for rollovers since it avoids having to preload images altogether. An example of a CSS sprite is shown below.

The sprite above has all the icons laid out in a grid with the icons 20px apart. If I wanted to show the Linux penguin in a div I would use to following style:

.penguin {
background-image: url(sprites.png);
background-position:  -80px 0px;
}

This style rule places a background-image at a position that’s -80 pixels from the left and 0 pixels from the top. It’s simple enough with a small graphic like the one above, but when you begin using more complex sprites you need to begin doing some math, and being a designer true to my creed, I hate math. Fortunately, using LESS makes things much easier. All you have to do is setup the width and height of your grid cells like this.

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height

Then all you need to know is the column and the row for your icon and set the background position like this:

background-position: @xwidth*-5 @ywidth*0; //remember the first column or row is 0

The image below illustrates the rows and columns of a sprite. the background-position property always uses a negative number when positioning a sprite.

An alternative method is to set your icons in the beginning of the document like this:

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height
@penguin: @xwidth*-5 @ywidth *0;

and then just call the css as follows:

background-position: @penguin;

Either way the result is the same, and as our good symfony friends from France would say, Voila! CSS sprites made simple.

Special thanks to Mark James for his FamFamFam icons.

The symfony admin generator is a BIG time saver. It’s almost like magic, it generates an administration interface based on your database models. If you spend countless hours creating lists and forms to manage data in tables, you are crazy not to use it.

When you have HTML content in a table, the ideal is to show a WYSIWYG editor instead of the TEXTAREA where the HTML will be displayed. In older versions of symfony, TinyMCE was integrated. With the release of symfony 1.2 the approach was to decouple some of the functionality so you could use different libraries. This is a good thing, but the admin generator suffered a bit. Some things that were very easy to accomplish, became a bit too hard, one of these things is the ability to display a WYSIWYG editor.

CKEditor is the successor of FCKeditor, probably because some people to name it a “bit” differently (you figure it out) due to some difficulties when using it. What’s important is that CKEditor is an amazing piece of software. A very powerful and feature rich HTML editor that runs inside a browser.

In order to use CKEditor in a symfony 1.2 generator admin interface, follow these steps:

a) download CKEditor, and place the files in your web directory.

b) add CKEditor javascript to your apps/[yourapp]/config/view.yml

javascripts:    [/js/ckeditor/ckeditor.js]

c) edit apps/[yourapp]/modules/[yourmodule]/config/generator.yml and add the class ‘ckeditor’ to the field that will be your editor. Make sure the field is displayed as a TEXTAREA in your form (TEXT and LONGVARCHAR database types work)

config:
actions: ~
fields:  ~
list:    ~
filter:  ~
form:
  fields:
    content:      { attributes: { class: ckeditor }}
edit:      ~
new:     ~

# make sure you keep the proper indentation in your yaml code.

content is the field that contains HTML code in our example.

And that’s it! Since you are loading the javascript for CKEditor in your view configuration, it will look for any TEXTAREA with a class “ckeditor” and will replace it with a CKEditor instance.