Feature #20438
closedProvide more flexible rendering for "text with image"
0%
Description
Since 4.0 we have an "accessible" rendering for Text with image, which has replaced the "table-based" rendering when css_styled_content is installed. This works pretty well, but there have been some criticisms:
1) the overhead of the "complex" dl/dt/dd structure if you only want a single image with no caption
2) the bug #16097, which is caused by a situation that is not being handled
3) the "unlogical" default rendering of a "dl" list even if the images have no captions (it should be a "ul" in that case).
To cope with those and similar issues that might have appeared for people in those last years, I have created a mechanism to render_textpic which can now via TypoScript configuration define special rendering for those "edge cases".
As a "proof-of-concept" and as a new default for 4.3 I would love to include typoscript to resolve the 3 issues mentioned above for a standard installation. It won't affect installations that use "custom" typoscript. And there is always the "4.2" template that works like it does now.
Here is the TypoScript with the special conditions to change rendering in those special situations:
dl {
# Choose another rendering for special edge cases
fallbackRendering = COA
fallbackRendering {
# Just one image without a caption => don't need the dl-overhead, use the "simple" rendering
10 = TEXT
10 {
if {
isFalse.field = imagecaption
value = 1
equals.data = register:imageCount
}
value = simple
}
- Multiple images and one global caption => "ul"
20 = TEXT
20 {
if {
value = 1
isGreaterThan.data = register:imageCount
isTrue.if.isTrue.data = register:wantsGlobalCaption
isTrue.field = imagecaption
}
value = ul
}
- Multiple images and no caption at all => "ul"
30 = TEXT
30 {
if {
value = 1
isGreaterThan.data = register:imageCount
isFalse.field = imagecaption
}
value = ul
}
}
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"> | </div>
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>
imgTagStdWrap.wrap = <dt> | </dt>
editIconsStdWrap.wrap = <dd> | </dd>
caption {
required = 1
wrap = <dd class="csc-textpic-caption"> | </dd>
}
}
(issue imported from #M11107)
Files