.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======================= EXT: CSS styled IMGTEXT ======================= :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Ernesto Baschny :Changed: 2005-10-13T14:36:15 :Author: Ernesto Baschny :Email: ernst@cron-it.de :Info 3: :Info 4: .. _EXT-CSS-styled-IMGTEXT: EXT: CSS styled IMGTEXT ======================= Extension Key: **cron\_cssstyledimgtext** Copyright 2005, Ernesto Baschny, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: CSS styled IMGTEXT 1** **Introduction 1** What does it do? 1 Screenshots 1 **Adminstration 3** Installing 3 **Configuration 3** CONSTANT EDITOR 3 Styling (CSS) 3 USER render\_textpic 6 Adding other rendering methods 11 IMAGE 11 **Known problems 12** **To-Do list 12** **Changelog 12** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension aims to provide a complete substitution of the "old" table-based rendering of the content types “Text with images” and “Images”. The goal is to be able to construct a page with images without making use of any table for layouting purposes, while maintaining true XHTML compatibility. This is one pre-requisite for developing **accessible web pages** . The rendering of the images will be done using definition lists, unordered lists or nested divs: For those we have already included working CSS that does the positioning. Or you create your new rendering mechanism, for which you have to design the CSS yourself. Another addition of this extension is more accessible use of the alt and title tag for IMAGEs. Three settings can affect how you want to apply the title tag (with the image, move it to the surrounding link or on both) and how the title is affected by the alt setting, if the title is empty (use alt, keep the title empty, or remove the title attribute). This allows us to be backwards compatible, while allowing variants that are fully accessible or “half-accessible” and half Internet Explorer oriented. The objectives here are the same as we have in css\_styled\_content, which is also why in future this extention will be fully integrated into css\_styled\_content. .. _Screenshots: Screenshots ^^^^^^^^^^^ Some screenshots to see the thing “in action”. For more examples, you might want to check out `http://www.typo3-anbieter.de/de/csi/ `_ or test the possibilities yourself. |img-1| |img-2| |img-3| .. _Adminstration: Adminstration ------------- .. _Installing: Installing ^^^^^^^^^^ To make use of this extention: Install it using the extension manager. While doing that you have the choice if you want to “ **Add PageTS** ” or not. If you choose to do so (default), it will affect the whole installation, which is probably ok. The PageTS currentlydisables the image positions that make no sense on CType=image (it leaves just "above left", "center" and "right"). Add the static template “CSS Styled IMGTEXT” to your TypoScript template Configure basic stuff in the CONSTANT EDITOR in the “CONTENT” category .. _Configuration: Configuration ------------- .. _CONSTANT-EDITOR: CONSTANT EDITOR ^^^^^^^^^^^^^^^ Some basic settings can be done using the CONSTANT EDITOR. These influence the TypoScript properties that are later described in more detail in the **USER render\_textpic** section. The settings in the CONSTANT EDITOR are (should be) self-explanatory. .. _Styling-CSS: Styling (CSS) ^^^^^^^^^^^^^ The XHTML output will always have the same structure, no matter what rendering method you choose. This allows us to use a single CSS to style any of the following methods. See the default CSS that comes with this extension to see how its done. .. _DL-definition-list: DL (definition list) """""""""""""""""""" By default the extension will render the images as a
(definition list) with the
filled with the image and the
part with the caption. ::

Caption...

...
Text from the bodytext field...
.. _UL-unordered-list: UL (unordered list) """"""""""""""""""" Another way of rendering a list of images is as an unordered list: ::

  • Caption...

    ...
Text from the bodytext field...
.. _DIV-no-lists: DIV (no lists) """""""""""""" The most simple way is just a nested set of
s. ::

Caption...

...
Text from the bodytext field...
.. _Inline-Style-width: Inline Style (width) """""""""""""""""""" Sometimes for layouting purposes the use of inline styling (style=”width:xxpx;”) is needed. The
of class **csi-imagewrap** will get such a style if the image block has more than one row of images or if the image-block has to be centered. The **csi-image** element will always have a width specified so that the caption will word-wrap at the same position as the images end (otherwise the caption wouldn't wrap at all). The **csi-imagecolumn** will always get a width so that the column can be floated correctly to left or right. If you don't like it and don't need that “features”, you might want to turn it off with the “ **noWidth** ” setting for the USER object and changing the rendering wraps removing the style attributes. .. _Classes: Classes """"""" Sometimes the **csi-text** class will be added before the **csi- imagewrap** , sometimes there will be also an
of class **csi- clear** after the csi-textpic, depending on the “position” setting, so that the following content follow after all images. The **OTHERCLASSES** part will be filled with properties that the user specified in the content object: .. ### BEGIN~OF~TABLE ### .. _csi-center: csi-center ~~~~~~~~~~ .. container:: table-row Class csi-center csi-right csi-left Description The position of the imageblock in the content area .. _csi-above: csi-above ~~~~~~~~~ .. container:: table-row Class csi-above csi-below Description If the imageblock is to be placed below or above the bodytext. .. _csi-intext-right: csi-intext-right ~~~~~~~~~~~~~~~~ .. container:: table-row Class csi-intext-right csi-intext-left Description Positioning of the imageblock will be in the text, and the bodytext will wrap around the images. .. _csi-intext-right-nowrap: csi-intext-right-nowrap ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Class csi-intext-right-nowrap csi-intext-left-nowrap Description The images will be placed on the right/left to the bodytext, but the bodytext will not wrap around the images. The header of the content object will also be placed to the left/right of the imageblock. .. _csi-border: csi-border ~~~~~~~~~~ .. container:: table-row Class csi-border Description If the user wants the images to have borders, this class will also be set. The thickness and color come from TypoScript and can be set in the CONSTANT EDITOR. Default is “2” and “black”. .. _csi-equalheight: csi-equalheight ~~~~~~~~~~~~~~~ .. container:: table-row Class csi-equalheight Description If the images are to be placed in equal height (equalH is set), this class will be set. .. _addClasses: [addClasses] ~~~~~~~~~~~~ .. container:: table-row Class [addClasses] Description Any class that is set in the .addClasses property. See later. .. ###### END~OF~TABLE ###### .. _CSS-and-TypoScript: CSS and TypoScript """""""""""""""""" This extension comes with a working CSS, which will be auto-generated and added to the rendered pages. This auto-generated CSS can also be externalized if you set **config.inlineStyle2TempFile = 1** (see `TSref `_ ). This provides the most “out-of-the-box” experience, because you can now influence the appearance through some settings in the CONSTANT EDITOR (e.g. border, spacing, etc). But you can also avoid this auto-generated CSS and choose to include the CSS responsible for this plugin in your own .css files. To do so, include this in your TypoScript Template: :: plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE > But if you do so, be aware that some settings in the external CSS influence the rendering that needs to be done in the plugin. Thus some settings that are done in CSS have to be specified in TypoScript too, so that our plugin knows how to handle them. Basically those are settings that influence spacing and borders and they can be set in the CONSTANT EDITOR. So you adapt your CSS to your wishes and then go to the CONSTANT EDITOR and reflect these settings in these constants: - **colSpace** : The space between columns of images (in pixels) - **textMargin** : The space from the imageblock to the text (in case of in-text rendering) (in pixels) - **borderSpace** : The space that the borders around images take (in pixels) **borderThick** : The thickness of borders (in pixels) .. _noRows: noRows """""" If you want your output to be presented in columns instead of rows (noRows option), each column will be wrapped with a
of the class **csi-imagecolumn** . The single images (
's, or