Platinum sponsors
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.
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:
Class | Description: |
|---|---|
csi-center csi-right csi-left | The position of the imageblock in the content area |
csi-above csi-below | If the imageblock is to be placed below or above the bodytext. |
csi-intext-right csi-intext-left | Positioning of the imageblock will be in the text, and the bodytext will wrap around the images. |
csi-intext-right-nowrap csi-intext-left-nowrap | 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 | 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 | If the images are to be placed in equal height (equalH is set), this class will be set. |
[addClasses] | 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:
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:
Property: | Data type: | Description: | Default: |
|---|---|---|---|
text | ->CARRAY /stdWrap | Use this to import / generate the content, that should flow around the imageblock. | |
textPos | int / stdWrap | 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) | |
textMargin | This is specified in CSS. | ||
imgList | list of imagefiles / stdWrap | list of images from ".imgPath" Example: This imports the list of images from tt_content's image-field "imgList.field = image" | |
imgPath | path /stdWrap | Path to the images Example: "/uploads/pics/" | |
imgMax | int /stdWrap | max number of images | |
imgStart | int /stdWrap | start with image-number ".imgStart" | |
imgObjNum | imgObjNum +optionSplit | 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. ...". | 1 |
1,2,3,4,... | ->IMAGE (cObject) | 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. | |
caption | ->CARRAY /stdWrap | Caption | |
captionAlign | align /stdWrap | Caption alignment | left |
captionSplit | boolean | 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. | |
border | boolean /stdWrap | If true, a border i generated around the images. | |
borderCol | HTML-color /stdWrap | 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. | black |
borderThick | pixels /stdWrap | 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. | 2 |
cols | int /stdWrap | Columns | |
rows | int /stdWrap | Rows (higher priority thab "cols") | |
noRows | boolean /stdWrap | 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!) | |
noCols | boolean /stdWrap | 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. | |
colSpace | int /stdWrap | Space between columns. Used just for information. See CSS section later. | |
spaceBelowAbove | int /stdWrap | OBSOLETE: use CSS to format this | |
maxW | int /stdWrap | 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! | |
maxWInText | int /stdWrap | 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! | 50% of maxW |
equalH | int /stdWrap | 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! | |
colRelations | string /stdWrap | 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 | |
image_compression | int /stdWrap | 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 | |
image_effects | int /stdWrap | 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 | |
image_frames | Array + .key /stdWrap | 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 | |
netprintApplicationLink | boolean /+properties | 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 | |
editIcons | string | (See stdWrap.editIcons) | |
noStretchAndMarginCells | boolean | OBSOLETE: use CSS to format this | |
stdWrap | ->stdWrap |
[tsref:(cObject).IMGTEXT]
New properties that were added by this extention and do not exist in standard IMGTEXT:
Property: | Data type: | Description: | Default: |
|---|---|---|---|
defaultW | int /stdWrap | 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:
| maxW |
defaultWInText | int /stdWrap | Same as above, but for imageblocks that are to be embedded in text. | 50% of defaultW |
renderMethod | string /stdWrap | The rendering method to use for this content object. The name of the method must be one of the entries in the rendering setting. | |
defaultRenderMethod | string /stdWrap | If no renderMethod is specified, this is the default that will be used. | dl |
rendering | Array of IMGTEXT properties | 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 } | |
addClasses | string /stdWrap | 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). | |
separateRows | boolean /stdWrap | 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. | 0 |
See below for more information on the following wrappings: | |||
imgTagStdWrap | string /stdWrap | Wrapping around the <img> tag. | |
editIconsStdWrap | string /stdWrap | Wrapping around the frontend editing icons | |
captionStdWrap | string /stdWrap | Wrapping around the caption part | |
oneImageStdWrap | string /stdWrap | Wrapping around one “image” in the block (with image and caption) | |
imageRowStdWrap | string /stdWrap | Wrapping around one row of images | |
noRowsStdWrap | string /stdWrap | Wrapping around all images if there are no separate rows (either by seprarateRows setting, of if we just have one row). |
[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>
}
}
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.
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:
Property: | Data type: | Description: | Default: |
|---|---|---|---|
altText titleText | cObject / stdWrap / +properties | 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 = | |
emptyTitleHandling | string | 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 | useAlt |
titleInLink | boolean | 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 | 0 |
titleInLinkAndImg | boolean | 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 | 0 |
[tsref:(cObject).IMAGE] additions
