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
Copyright 2005, Ernesto Baschny, <ernst@cron-it.de>
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
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
See also the new defaultW setting!
Default
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
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