DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

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¶

Extension Key: cron_cssstyledimgtext

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¶

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¶

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¶

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.

Adminstration¶

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¶

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)¶

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)¶

By default the extension will render the images as a <DL> (definition list) with the <DT> filled with the image and the <DD> part with the caption.

<div class="csi-textpic OTHERCLASSES">
  <div class="csi-imagewrap">
    <dl class="csi-image" style="width:XXXpx;">
      <dt><img ...></dt>
      <dd class="csi-caption"><p class="csc-caption">Caption...</p></dd>
      ...
    </dl>
  </div>
  <div class="csi-text">
    Text from the bodytext field...
  </div>
</div>

UL (unordered list)¶

Another way of rendering a list of images is as an unordered list:

<div class="csi-textpic OTHERCLASSES">
  <ul class="csi-imagewrap">
    <li class="csi-image" style="width:XXXpx;">
      <img ...>
      <div class="csi-caption"><p class="csc-caption">Caption...</p></div>
      ...
    </li>
  </ul>
  <div class="csi-text">
    Text from the bodytext field...
  </div>
</div>

DIV (no lists)¶

The most simple way is just a nested set of <DIV>s.

<div class="csi-textpic OTHERCLASSES">
  <div class="csi-imagewrap">
    <div class="csi-image" style="width:XXXpx;">
      <div><img ...></div>
      <div class="csi-caption"><p class="csc-caption">Caption...</p></div>
      ...
    </div>
  </div>
  <div class="csi-text">
    Text from the bodytext field...
  </div>
</div>

Inline Style (width)¶

Sometimes for layouting purposes the use of inline styling (style=”width:xxpx;”) is needed. The <div> 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¶

Sometimes the csi-text class will be added before the csi- imagewrap , sometimes there will be also an <div> 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:

csi-center¶

Class

csi-center

csi-right

csi-left

Description

The position of the imageblock in the content area

csi-above¶

Class

csi-above

csi-below

Description

If the imageblock is to be placed below or above the bodytext.

csi-intext-right¶

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¶

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¶

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¶

Class

csi-equalheight

Description

If the images are to be placed in equal height (equalH is set), this class will be set.

[addClasses]¶

Class

[addClasses]

Description

Any class that is set in the .addClasses property. See later.

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¶

If you want your output to be presented in columns instead of rows (noRows option), each column will be wrapped with a <div> of the class csi-imagecolumn . The single images (<dl>'s, or <ul>'s, ...) are then rendered inside each of this column. The result of such an imageblock might be something like:

Notice that the images are not aligned in rows, but in columns instead.

Separate rows¶

The default setting doesn't separate rows in different <div>'s. The columns effect is achieved simply by giving the surrounding <div> a specific width so that the images will wrap around the columns. This has some problems if for example some captions are longer than others. You can influence if you want separate rows through CONSTANT EDITOR, setting “separateRows”. Here is an example of what might happen without separateRows :

And the same block with separateRows set to true:

Another place where the separateRows setting affects the rendering is when the use chooses “Equal Heights” for the image. The default table based solution also respects the chosen columns. So having separateRows set with 3 columns might render like this:

With separateRows unset , the amount of columns is flexible:

USER render_textpic¶

An USER object with

userFunc = tx_croncssstyledimgtext_pi1->render_textpic

can be used instead of an IMGTEXT object. It will behave almost like the original IMGTEXT, with the difference that it will render the output in a CSS-styled way, not using tables.

That's why the configuration parameters are almost identical to IMGTEXT. So this table will look very familiar to you. The additions done to the original IMGTEXT properties are listed in the separate table further below:

text¶

Property

text

Data type

->CARRAY /stdWrap

Description

Use this to import / generate the content, that should flow around the imageblock.

Default

textPos¶

Property

textPos

Data type

int / stdWrap

Description

Textposition:

bit[0-2]: 000 = centre, 001 = right, 010 = left

bit[3-5]: 000 = over, 001 = under, 010 text

0 - Above: Centre

1 - Above: Right

2 - Above: Left

8 - Below: Centre

9 - Below: Right

10 - Below: Left

17 - In Text: Right

18 - In Text: Left

25 - In Text: Right (no wrap)

26 - In Text: Left (no wrap)

Default

textMargin¶

Property

textMargin

Data type

Description

This is specified in CSS.

Default

imgList¶

Property

imgList

Data type

list of imagefiles / stdWrap

Description

list of images from ".imgPath"

Example:

This imports the list of images from tt_content's image-field

"imgList.field = image"

Default

imgPath¶

Property

imgPath

Data type

path /stdWrap

Description

Path to the images

Example:

"uploads/pics/"

Default

imgMax¶

Property

imgMax

Data type

int /stdWrap

Description

max number of images

Default

imgStart¶

Property

imgStart

Data type

int /stdWrap

Description

start with image-number ".imgStart"

Default

imgObjNum¶

Property

imgObjNum

Data type

imgObjNum +optionSplit

Description

Here you define which IMAGE-cObjects from the array "1,2,3,4..." should render which image.

"current" is set to the image-filename.

Example:

"imgObjNum = 1 |*||*| 2":

If your “.imgList” contains 3 images, this would render the first two images with "1. ..." and the last image with "2. ...".

Default

1

1,2,3,4,...¶

Property

1,2,3,4,...

Data type

->IMAGE (cObject)

Description

Rendering of the individual images

The register "IMAGE_NUM" is set with the number of image being rendered for each rendering of a image-object. Starting with zero.

The image-object should not be of type GIFBUILDER!

Important:

"file.import.current = 1" fetches the name of the images!

See below for enhancements to the IMAGE cObject for handling alt and title attributes.

Default

caption¶

Property

caption

Data type

->CARRAY /stdWrap

Description

Caption

Default

captionAlign¶

Property

captionAlign

Data type

align /stdWrap

Description

Caption alignment

Default

left

captionSplit¶

Property

captionSplit

Data type

boolean

Description

If this is set, the caption text is split by the character (or string) from ".token" , and every item is displayed under an image each in the image block.

.token = (string/stdWrap) Character to split the caption elements (default is chr(10))

.cObject = cObject, used to fetch the caption for the split

.stdWrap = stdWrap properties used to render the caption.

Default

border¶

Property

border

Data type

boolean /stdWrap

Description

If true, a border i generated around the images.

Default

borderCol¶

Property

borderCol

Data type

HTML-color /stdWrap

Description

Color of the border, if ".border" is set.

This is used just to create the CSS class that will be added to an image block that needs a border. The border itself will have to be specified in CSS. See CSS section later.

Default

black

borderThick¶

Property

borderThick

Data type

pixels /stdWrap

Description

Width of the border around the pictures

This is used just to create the CSS class that will be added to an image block that needs a border. The border itself will have to be specified in CSS. See CSS section later.

Default

2

cols¶

Property

cols

Data type

int /stdWrap

Description

Columns

Default

rows¶

Property

rows

Data type

int /stdWrap

Description

Rows (higher priority thab "cols")

Default

noRows¶

Property

noRows

Data type

boolean /stdWrap

Description

If set, the rows are not divided by a table-rows. Thus images are more nicely shown if the height differs a lot (normally the width is the same!)

Default

noCols¶

Property

noCols

Data type

boolean /stdWrap

Description

If set, the columns are not made in the table. The images are all put in one row separated by a clear giffile to space them apart.

If noRows is set, noCols will be unset. They cannot be set simultaneously.

Default

colSpace¶

Property

colSpace

Data type

int /stdWrap

Description

Space between columns. Used just for information.

See CSS section later.

Default

spaceBelowAbove¶

Property

spaceBelowAbove

Data type

int /stdWrap

Description

OBSOLETE: use CSS to format this

Default

maxW¶

Property

maxW

Data type

int /stdWrap

Description

max width of the image-table.

This will scale images not in the right size! Takes the number of columns into account!

NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER

maxWInText¶

Property

maxWInText

Data type

int /stdWrap

Description

max width of the image-table, if the text is wrapped around the image- table (on the left or right side).

This will scale images not in the right size! Takes the number of columns into account!

NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER

See also the new defaultWInText setting!

Default

50% of maxW

equalH¶

Property

equalH

Data type

int /stdWrap

Description

If this value is greater than zero, it will secure that images in a row has the same height. The width will be calculated.

If the total width of the images raise above the "maxW"-value of the table the height for each image will be scaled down equally so that the images still have the same height but is within the limits of the totalWidth.

Please note that this value will override the properties "width", "maxH", "maxW", "minW", "minH" of the IMAGE-objects generating the images. Furthermore it will override the "noRows"-property and generate a table with no columns instead!

Default

colRelations¶

Property

colRelations

Data type

string /stdWrap

Description

This value defines the width-relations of the images in the columns of IMGTEXT. The syntax is "[int] : [int] : [int] : ..." for each column. If there are more imagecolumns than figures in this value, it's ignored. If the relation between two of these figures exceeds 10, this function is ignore.

It works only fully if all images are downscaled by their maxW- definition.

Example:

If 6 images are placed in three columns and their width's are high enough to be forcibly scaled, this value will scale the images in the to be eg. 100, 200 and 300 pixels from left to right

1 : 2 : 3

Default

image_compression¶

Property

image_compression

Data type

int /stdWrap

Description

Image Compression:

0= Default

1= Dont change! (removes all parameters for the image_object!!)

(adds gif-extension and color-reduction command)

10= GIF/256

11= GIF/128

12= GIF/64

13= GIF/32

14= GIF/16

15= GIF/8

(adds jpg-extension and quality command)

20= IM: -quality 100

21= IM: -quality 90 <=> Photoshop 60 (JPG/Very High)

22= IM: -quality 80 (JPG/High)

23= IM: -quality 70

24= IM: -quality 60 <=> Photoshop 30 (JPG/Medium)

25= IM: -quality 50

26= IM: -quality 40 (JPG/Low)

27= IM: -quality 30 <=> Photoshop 10

28= IM: -quality 20 (JPG/Very Low)

The default ImageMagick quality seems to be 75. This equals Photoshop quality 45. Images compressed with ImageMagick with the same visual quality as a Photoshop-compressed image seems to be largely 50% greater in size!!

NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER

Default

image_effects¶

Property

image_effects

Data type

int /stdWrap

Description

Adds these commands to the parameteres for the scaling. This function has no effect if "image_compression" above is set to 1!!

1 => "-rotate 90",

2 => "-rotate 270",

3 => "-rotate 180",

10 => "-colorspace GRAY",

11 => "-sharpen 70",

20 => "-normalize",

23 => "-contrast",

25 => "-gamma 1.3",

26 => "-gamma 0.8"

NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER

Default

image_frames¶

Property

image_frames

Data type

Array

+ .key /stdWrap

Description

Frames:

.key points to the frame used.

".image_frames.x" is imgResource-mask (".m")properties which will override to the [imgResource].m properties of the imageObjects. This is used to mask the images into a frame. See how it's done in the default configuration and IMGTEXT in the static_template-table.

Example:

1 {
  mask = media/uploads/darkroom1_mask.jpg
  bgImg = GIFBUILDER
  bgImg {
    XY = 100,100
    backColor = {$bgCol}
  }
  bottomImg = GIFBUILDER
  bottomImg {
    XY = 100,100
    backColor = black
  }
  bottomImg_mask = media/uploads/darkroom1_bottom.jpg
}

NOTE: This cancels the jpg-quality settings sent as ordinary ".params" to the imgResource. In addition the output of this operation will always be jpg or gif!

NOTE: Works ONLY if IMAGE-obj is NOT GIFBUILDER

Default

netprintApplicationLink¶

Property

netprintApplicationLink

Data type

boolean /+properties

Description

Set true, if you would like to enable the netprint feature.

“Netprint” is a Typo3 application which is still in development. 'Netprint' allows film development stores to offer online submission of Photos to a Typo3 / Netprint server in-house from which the store offer enlargements of digital photos on eg Kodak Royal paper.

The application will be released under GNU/GPL sometime in 2002.

'Netprint' offers a feature to fetch images from peoples online fotoalbums. This property enables links from your site images to a Netprint server.

Properties:

.url = Url of the Netprint site page, eg. http://netprint.photo.com/?id=999&type=2

.thisUrl = Url of this site, eg. http://mysite.com/typo3site/ (default is calculated from HTTP_HOST)

.cObject = (cObject) The link content

.ATagParams = <A>-tag parameters

.outerStdWrap = (->stdWrap) stdWrap of the total linked cObject.

.before = (boolean) If the link code should be inserted before the image (default is after)

.linkOnlyPixelsAbove = (int) If set, only images with a total number of pixels greater than this number will be linked. This secures that small images will not be linked. Eg. if images above 640x480 is supposed to be linked, the limit should be approx. 300000

Default

editIcons¶

Property

editIcons

Data type

string

Description

(See stdWrap.editIcons)

Default

noStretchAndMarginCells¶

Property

noStretchAndMarginCells

Data type

boolean

Description

OBSOLETE: use CSS to format this

Default

stdWrap¶

Property

stdWrap

Data type

->stdWrap

Description

Default

[tsref:(cObject).IMGTEXT]

New properties that were added by this extention and do not exist in standard IMGTEXT:

defaultW¶

Property

defaultW

Data type

int /stdWrap

Description

This allows you to set a default width of your image block, if the user hasn't specified anything in “width” field in the content object. The logic behind this and maxW setting is the following:

If user hasn't specified an width: use defaultW
If user has specified an width: check if its smaller than maxW. If yes, use it, if no, use maxW.

Default

maxW

defaultWInText¶

Property

defaultWInText

Data type

int /stdWrap

Description

Same as above, but for imageblocks that are to be embedded in text.

Default

50% of defaultW

renderMethod¶

Property

renderMethod

Data type

string /stdWrap

Description

The rendering method to use for this content object. The name of the method must be one of the entries in the rendering setting.

Default

defaultRenderMethod¶

Property

defaultRenderMethod

Data type

string /stdWrap

Description

If no renderMethod is specified, this is the default that will be used.

Default

dl

rendering¶

Property

rendering

Data type

Array of

IMGTEXT properties

Description

In this array, a list of renderers can be created from which the user chooses which one will render each “Text with image” content object. The settings in each entry can override settings from this table, and there are also a set of stdWrap's that allows you to create the XHTML structure of your choosing for rendering the imageblock.

In the standard installation the rendering will be loaded from the lib.imgtextrendering TypoScript object, so you might want to change/add stuff here.

Example:

tt_content.textpic.20.rendering {
  dl {
      imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"> | </div>
      imageRowStdWrap.insertData = 1
      noRowsStdWrap.wrap =
      oneImageStdWrap.wrap = <dl class="csi-image" style="width:{register:imagewidth}px;"> | </dl>
      oneImageStdWrap.insertData = 1
      imgTagStdWrap.wrap = <dt> | </dt>
      editIconsStdWrap.wrap = <dd> | </dd>
      captionStdWrap.wrap = <dd class="csi-caption"> | </dd>
  }
  # Now we add another rendering method:
  dl-nospace < .dl
  dl-nospace.addClasses = csi-textpic-dl-nospace
}

Default

addClasses¶

Property

addClasses

Data type

string /stdWrap

Description

Add the specified classes to the csi-textpic <div> (the outer surrounding block). This is useful to override in a specific “rendering” engine, allowing you for example to have different margin styles (one with margin around images, the other without).

Default

separateRows¶

Property

separateRows

Data type

boolean /stdWrap

Description

Separate the rows of images in different <div>s, so that they can be styled in some other way. See CSS-section for more details.

Default

0

imgTagStdWrap¶

Property

imgTagStdWrap

Data type

string /stdWrap

Description

Wrapping around the <img> tag.

Default

editIconsStdWrap¶

Property

editIconsStdWrap

Data type

string /stdWrap

Description

Wrapping around the frontend editing icons

Default

captionStdWrap¶

Property

captionStdWrap

Data type

string /stdWrap

Description

Wrapping around the caption part

Default

oneImageStdWrap¶

Property

oneImageStdWrap

Data type

string /stdWrap

Description

Wrapping around one “image” in the block (with image and caption)

Default

imageRowStdWrap¶

Property

imageRowStdWrap

Data type

string /stdWrap

Description

Wrapping around one row of images

Default

noRowsStdWrap¶

Property

noRowsStdWrap

Data type

string /stdWrap

Description

Wrapping around all images if there are no separate rows (either by seprarateRows setting, of if we just have one row).

Default

[tsref:(cObject).IMGTEXT] additions by cron_cssstyledimgtext

The wrapping in the image block can be summarized like that:

<imageRowStdWrap>
  <oneImageStdWrap>
    <imgTagStdWrap>IMG</imgTagStdWrap>
    <editIconsStdWrap>Edit Icons</editIconsStdWrap>
    <captionStdWrap>Caption</captionStdWrap>
  </oneImageStdWrap>
  ...
</imageRowStdWrap>

The register will be loaded with the values:

columnwidth : the width of the current column
rowwidth : the width of the current row (and thus of all rows, as all rows are equal)
imagewidth : the width of the current image
imageheight : the height of the current image

So our <DL> rendering is specified like that:

lib.imgtextrendering {
  dl {
    imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"> | </div>
    imageRowStdWrap.insertData = 1
    noRowsStdWrap.wrap =
    oneImageStdWrap.wrap = <dl class="csi-image" style="width:{register:imagewidth}px;"> | </dl>
    oneImageStdWrap.insertData = 1
    imgTagStdWrap.wrap = <dt> | </dt>
    editIconsStdWrap.wrap = <dd> | </dd>
    captionStdWrap.wrap = <dd class="csi-caption"> | </dd>
  }
}

Adding other rendering methods¶

To add other rendering methods:

add them to the lib.imgtextrendering array

add then to the tx_croncssstyledimgtext_renderMethod field in tt_content

Example¶

You might want to use one of the shipped rendering methods as a basis and just change some settings.

lib.imgtextrendering.dl-nomargin < .dl
lib.imgtextrendering.dl-nomargin.addClasses = csi-textpic-dl-nomargin

Then in PageTS, add:

TCEFORM.tt_content.tx_croncssstyledimgtext_renderMethod.addItems.dl-nospace = Definition list (no margin)

Then in your CSS you just have to style the textpic without margins, if the class csi-textpic-dl-nomargin is set.

IMAGE¶

To be able to render alt and title attributes in your IMAGE renderer (“1,2,3,4...”) correctly, some properties were added to the IMAGE TypoScript object, where you can control their behaviour:

altText¶

Property

altText

titleText

Data type

cObject / stdWrap /

+properties

Description

If no titltext is specified, see emptyTitleHandling below.If no alttext is specified, it will use an empty alttext.

Properties:

.split = boolean, if you want to use splitted alt/title instead (the original cObject will be ignored then.

.split.cObject = a cObj where should we get the text from to be splitted.

.split.token = split the text at which token, defaults to new-line (chr(10)).

Example:

altText = TEXT
altText.split = 1
altText.split.cObject = TEXT
altText.split.cObject.field = tx_croncssstyledimgtext_altText
altText.split.token =

Default

emptyTitleHandling¶

Property

emptyTitleHandling

Data type

string

Description

This specifies what to do if no title was specified for an img-tag:

Choices:

useAlt = behaviour as in TYPO3 core: if the title is not specified, the value of the alt-attribute is used instead (if set).

keepEmpty = keep an empty title-attribute in the tag (e.g. title=”” ).

removeAttr = remove the title-attribute alltogether.

Recommendation:

For accessibility: removeAttr .

For correct tooltips on IE: keepEmpty .

For previous TYPO3 behaviour: useAlt

Default

useAlt

titleInLink¶

Property

titleInLink

Data type

boolean

Description

If an image is linked (e.g. click-enlarge or pointing to another page), we can move the title attribute from the <img>-tag to the <a>-tag. This is specified with this setting.

Recommendation:

For accessibility: 1

Default

0

titleInLinkAndImg¶

Property

titleInLinkAndImg

Data type

boolean

Description

If you have the title in the <a>-tag (titleInLink=true), you don't get the 'title' in the <img>-tag. Internet Explorer will not show a tooltip on mouse-over anymore. So to get the 'title' in <img> too (to keep IE happy), set this to true too.

Recommendation:

For accessibility: 0

For correct tooltips on IE: 1

Default

0

[tsref:(cObject).IMAGE] additions

Known problems¶

Some complex rendering might look somehow different than the table- based version. This is a limitation of rendering “table-like” stuff with pure CSS. Some things cannot be done in such a generic way, some things might be done and aren't being done yet: for those I would like your contribution. Send me examples of what cannot be done and how it can be solved in CSS so we can see how we can integrate it in future versions.

Conflicting XCLASS¶

This extension extends the class cObj to be able to influence the rendering of the 'alt' and 'title' attributes in images. This is done by XCLASSing the 'tslib/class.tslib_content.php' file. Many other extensions also XCLASS this same class. As TYPO3 only supports one XCLASS per Class, this will lead to conflicts: Just one extention “wins”, others won't work. So if you get empty or no 'alt' or 'title' attributes in your images, check if you are not using any other extension that has something like this in its ext_localconf.php:

$TYPO3_CONF_VARS['FE']['XCLASS']['tslib/class.tslib_content.php'] = ...

Solutions:¶

Remove all but one of the conflicting extensions

Comment out this line in all but one of the conflicting extensions: but be aware that those probably won't work anymore

For advanced users: See if you can merge the extended classes. Comment out this line in all but one of the conflicting extensions and merge the functions from the class.ux_tslib_content.php file in just one.

To-Do list¶

Continue working on it.
Future: Integrate with css-styled-content

Changelog¶

v0.4.1:

fixed typo in the defaultRenderMethod constant (value “a”, should be “dl”) in 0.4.0 release . Ups!

v0.4.0 :

documentation improved
optionally adds some pageTSto disable the image positions that make no sense on CType=image (it leaves just "above left", "center" and "right").
border and spacing can now be specified in the CONSTANT EDITOR and will affect the auto-generated CSS. This way you can configure border color, padding and margins around images using just the CONSTANT EDITOR without having to change anything in the CSS.
reorganized the constants for the CONSTANT EDITOR.
CSS-change: be aware that the CSS-selector for borders, which used to be composed from thickness and color (e.g. DIV.csi-border-2-black was changed simply to DIV.csi-border in this version. If you don't use the auto-generated CSS, please adapt your external .css acordingly. Note that this selector is now configurable through the CONSTANT EDITOR, so instead of changing your CSS you can also change the constant styles.content.imgtext.borderSelector to reflect this.

v0.3.0 : after some feedback, some bug fixed and some new features added:

alt and title handling revised and new options added (emptyTitleHandling, titleInLink and titleInLinkAndImg).
rendering methods can now be added and changed through TypoScript. Any setting from IMGTEXT can now be changed in each rendering method.
All rendering is now done using stdWrap so the possibilities are endless.
Some other options added (addClasses)
Some bugs fixed in CSS and rendering.
Added option to separate image lists by rows (separateRows) (suggestion by Wolfgang Klinger)
Complete documentation, finally

v0.2.0 : based on original “css_styled_imgtext” most rendering options that can be set by the user were respected. First public alpha version (proof-of-concept)

EXT: CSS styled IMGTEXT - 13