Bug #22033

SPRITE ICON API

Added by Thomas Allmer over 5 years ago. Updated over 4 years ago.

Status:Closed Start date:2010-01-31
Priority:Should have Due date:
Assigned To:Benjamin Mack % Done:

0%

Category:- Spent time: -
Target version:-
TYPO3 Version: Is Regression:
PHP Version:5.2 Sprint Focus:
Complexity:

Description

SPRITE ICON API

The sprite icons are a completely different approach than using single file images. In order to get a
icon you don't need to know anything about a file or whatever. The only thing you need to know are the
css classes used. This api even helps you with that by only needing a single string name for an icon.
You should always look up this "iconName" in the Skinning Manual.

Example: display an icon for creating a new document/page content element
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new');
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new "> </span>

Common Options

If you want to change additional options you can provide them as an config array. Some options are
- 'title' (string: defaults to '') define an title for the icon [if the icon is wrapped by a link for functionality the link should get the title]
- 'class' (string: defaults to '') additional css classes to add
- 'row' (array: no default) data row; not added as attribute
- [...] more Options are in the Advanced Section

Example: new Record icon with a title tag
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', 'Create new Record');
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('titel' => 'Create new Record') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new" title="Create new Record"> </span>
Note: The title is a special case and can also be provided as string for the second parameter

Example: new Record icon with an additional css class
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('class' => 'center') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new center"> </span>

Example: new Record icon with an additional css class and title tag
Usage: t3lib_iconWorks::getSpriteIcon('actions-document-new', array('class' => 'center', 'titel' => 'Create new Record') );
Result: <span class="t3-icon t3-icon-actions-document t3-icon-document-new center" title="Create new Record"> </span>

for further documentation please see the source code

patching instructions
This patch consists of multiple files:
spriteIconAPI.patch - contains the logic that should be submitted

spriteReplace.patch - replaces most of the skinImg calls in the core; this is for showing how it the API will work and that you see it working; there will be separate RFC for replacing all skinImg calls once the API has been included.

sprites_css_t3skin.zip - contains the sprites and css used. This needs the patch #21900 to be applied. Extract it directly in your typo3_src folder; This file will replace "typo3/sysext/t3skin/ext_tables.php"; add sprite images to "typo3/sysext/t3skin/images/sprites/"; add sprite css to "typo3/sysext/t3skin/stylesheets/sprites/". Where the sprites css and sprite images are placed and how they are generated is not part of this RFC.

Note: In this example there are a few missing icons, mainly for the different file extension. The code is still working, but the css and sprites have to be added. Also the Skinning manual will have to adopt these.

Note: this code is also on github so you can explore it and get a full version with all patches applied if you want to.
http://github.com/daKmoR/typo3v4core/tree/spriteExample

This is part of the work done by Team3/Team4 @ T3UXW09 and will be continued by some further patches, to e.g. replacing all skinImg calls
(issue imported from #M13379)

spriteIconAPI.patch Magnifier (27.5 kB) Administrator Admin, 2010-01-31 16:43

spriteReplace.patch Magnifier (236.3 kB) Administrator Admin, 2010-01-31 16:43

sprites_css_t3skin.zip (75.5 kB) Administrator Admin, 2010-01-31 16:43

spriteIconDocu.txt Magnifier (9.1 kB) Administrator Admin, 2010-01-31 16:50

13379_v3.diff Magnifier (18.3 kB) Administrator Admin, 2010-02-23 01:01

sprite_api_use_in_be.patch Magnifier (233.7 kB) Administrator Admin, 2010-05-01 07:36

sprite_api_v5.patch Magnifier (22 kB) Administrator Admin, 2010-05-01 07:42

sprite_api_v7b.patch Magnifier (27.2 kB) Administrator Admin, 2010-05-01 21:44

sprite_api_documentation.txt Magnifier (6.2 kB) Administrator Admin, 2010-05-02 21:31


Related issues

related to Core - Bug #19376: Loading the backend takes more than 70 HTTP requests Resolved 2008-09-25
related to Core - Feature #22600: Add spriteGeneratorAPI to support the new sprite-icon-api Resolved 2010-05-06
related to Core - Bug #22704: Make use of the new Sprite API throughout the TYPO3 Core ... Resolved 2010-05-24
related to Core - Bug #22705: SpriteIconApi getSpriteIconForRecord does not find defaul... Closed 2010-05-24
related to Core - Bug #22706: t3lib_iconWorks::getIconImage is not needed anymore Resolved 2010-05-24
related to Core - Bug #22806: Frontend Editing gives PHP Warning: in_array(): Wrong dat... Resolved 2010-06-03
related to Core - Bug #23043: Not all getIconImage calls in Core are replaced by getSpr... Closed 2010-06-29

History

#1 Updated by Thomas Allmer over 5 years ago

added docu as separate file

#2 Updated by Benjamin Mack over 5 years ago

Attached are two new patches. One for the Sprite API (mostly t3lib_iconWorks) and one for all the uses in the backend, which seems to work for me on first testing.

#3 Updated by Benjamin Mack over 5 years ago

This feature is now included in the core (rev. 7511), also the documentation was updated and set to be included in 4.4. The only thing missing are the changes of the backend to make use of the skinning API, but this should be a separate RFC.

#4 Updated by Susanne Moog over 4 years ago

  • Target version deleted (4.4.0)

Also available in: Atom PDF