[!!!][FEATURE] Streamline Fluid Styled Content and CSS Styled Content
[Packages/TYPO3.CMS.git] / typo3 / sysext / css_styled_content / Configuration / TypoScript / ContentElement / Image.txt
1 # Image:
2 # also used for rendering 'textpic' type
3 #
4 # CType: image
5
6 tt_content.image = COA
7 tt_content.image.10 = < lib.stdheader
8 tt_content.image.20 = USER
9 tt_content.image.20 {
10     userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->render_textpic
11     preRenderRegisters {
12         // To optimize performance we load all image captions into a register
13         // because we need to know if at least one image has a caption at
14         // multiple places to determine the render method.
15         allImageCaptions.cObject = FILES
16         allImageCaptions.cObject {
17             references {
18                 table = tt_content
19                 fieldName = image
20             }
21             renderObj = TEXT
22             renderObj.data = file:current:description
23         }
24     }
25     # Image source
26     imgList.cObject = FILES
27     imgList.cObject {
28         references < tt_content.image.20.preRenderRegisters.allImageCaptions.cObject.references
29         renderObj = TEXT
30         renderObj.data = file:current:uid
31         renderObj.wrap = |,
32     }
33     imgPath = uploads/pics/
34     // This needs to be set because the UID list generated in the imgList
35     // setting contains UIDs of file references (not files).
36     imgListContainsReferenceUids = 1
37     # Single image rendering
38     imgObjNum = 1
39     1 {
40         file.import.data = file:current:uid
41         file.treatIdAsReference = 1
42         file.width.field = imagewidth
43         layoutKey = {$styles.content.imgtext.layoutKey}
44         layout {
45             default {
46                 element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###"###PARAMS######ALTPARAMS######BORDER######SELFCLOSINGTAGSLASH###>
47             }
48             srcset {
49                 element = <img src="###SRC###" srcset="###SOURCECOLLECTION###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
50                 source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
51             }
52             picture {
53                 element = <picture>###SOURCECOLLECTION###<img src="###SRC###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###></picture>
54                 source = <source srcset="###SRC###" media="###MEDIAQUERY###"###SELFCLOSINGTAGSLASH###>
55             }
56             data {
57                 element = <img src="###SRC###"###SOURCECOLLECTION######PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
58                 source = data-###DATAKEY###="###SRC###"
59                 source.noTrimWrap = ; ;;
60                 source.noTrimWrap.splitChar = ;
61             }
62         }
63         # Default sourceCollection as an example
64         # Please write your own sourceCollection (highly recommended)
65         sourceCollection {
66             small {
67                 width = 200
68                 srcsetCandidate = 600w
69                 mediaQuery = (max-device-width: 600px)
70                 dataKey = small
71             }
72             smallRetina {
73                 if {
74                     value = {$styles.content.imgtext.layoutKey}
75                     equals = default
76                     negate = 1
77                 }
78                 width = 200
79                 pixelDensity = 2
80                 srcsetCandidate = 600w 2x
81                 mediaQuery = (max-device-width: 600px) AND (min-resolution: 192dpi)
82                 dataKey = smallRetina
83             }
84         }
85         imageLinkWrap = 1
86         imageLinkWrap {
87             bodyTag = <body style="margin:0; background:#fff;">
88             wrap = <a href="javascript:close();"> | </a>
89             width = {$styles.content.imgtext.linkWrap.width}
90             height = {$styles.content.imgtext.linkWrap.height}
91             effects = {$styles.content.imgtext.linkWrap.effects}
92             crop.data = file:current:crop
93             JSwindow = 1
94             JSwindow.newWindow = {$styles.content.imgtext.linkWrap.newWindow}
95             JSwindow.if.isFalse = {$styles.content.imgtext.linkWrap.lightboxEnabled}
96             directImageLink = {$styles.content.imgtext.linkWrap.lightboxEnabled}
97             enable.field = image_zoom
98             enable.ifEmpty.typolink.parameter.data = file:current:link
99             enable.ifEmpty.typolink.returnLast = url
100             typolink.parameter.data = file:current:link
101             typolink.target < lib.parseTarget
102             typolink.target =
103             typolink.target.override = {$styles.content.links.target}
104             typolink.extTarget < lib.parseTarget
105             typolink.extTarget =
106             typolink.extTarget.override = {$styles.content.links.extTarget}
107             linkParams.ATagParams.dataWrap =  class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
108         }
109         altText = TEXT
110         altText {
111             data = file:current:alternative
112             stripHtml = 1
113         }
114         titleText < .altText
115         titleText.data = file:current:title
116         longdescURL {
117             parameter {
118                 field = longdescURL
119                 split {
120                     token {
121                         char = 10
122                     }
123                     returnKey.data = register : IMAGE_NUM_CURRENT
124                 }
125             }
126         }
127         emptyTitleHandling = {$styles.content.imgtext.emptyTitleHandling}
128         titleInLink = {$styles.content.imgtext.titleInLink}
129         titleInLinkAndImg = {$styles.content.imgtext.titleInLinkAndImg}
130     }
131     textPos.field = imageorient
132     maxW = {$styles.content.imgtext.maxW}
133     maxW.override.data = register:maxImageWidth
134     maxWInText = {$styles.content.imgtext.maxWInText}
135     maxWInText.override.data = register:maxImageWidthInText
136     equalH.field = imageheight
137     cols.field = imagecols
138     border.field = imageborder
139     caption {
140         1 = COA
141         1 {
142             1 = TEXT
143             1 {
144                 data = file:current:description
145                 required = 1
146                 htmlSpecialChars = 1
147                 br = 1
148             }
149         }
150     }
151     // This needs to be set to TRUE because otherwise render_textpic will
152     // render a global caption which we do not have.
153     imageTextSplit = 1
154     borderThick = {$styles.content.imgtext.borderThick}
155     borderClass = {$styles.content.imgtext.borderClass}
156     colSpace = {$styles.content.imgtext.colSpace}
157     textMargin = {$styles.content.imgtext.textMargin}
158     borderSpace = {$styles.content.imgtext.borderSpace}
159     separateRows = {$styles.content.imgtext.separateRows}
160     addClasses =
161     addClassesCol =
162     addClassesCol.ifEmpty = csc-textpic-firstcol csc-textpic-lastcol
163     addClassesCol.override = csc-textpic-firstcol |*| |*| csc-textpic-lastcol
164     addClassesCol.override.if {
165         isGreaterThan.field = imagecols
166         value = 1
167     }
168     addClassesImage = csc-textpic-first |*| |*| csc-textpic-last
169     #
170     imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
171     imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
172
173     layout = CASE
174     layout {
175         key.field = imageorient
176         # above-center
177         default = TEXT
178         default {
179             value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
180             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
181             override {
182                 if {
183                     value = default
184                     equals = {$styles.content.imgtext.layoutKey}
185                     negate = 1
186                 }
187             }
188         }
189         # above-right
190         1 = TEXT
191         1 {
192             value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
193             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
194             override {
195                 if {
196                     value = default
197                     equals = {$styles.content.imgtext.layoutKey}
198                     negate = 1
199                 }
200             }
201         }
202         # above-left
203         2 = TEXT
204         2 {
205             value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
206             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
207             override {
208                 if {
209                     value = default
210                     equals = {$styles.content.imgtext.layoutKey}
211                     negate = 1
212                 }
213             }
214         }
215         # below-center
216         8 = TEXT
217         8 {
218             value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
219             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
220             override {
221                 if {
222                     value = default
223                     equals = {$styles.content.imgtext.layoutKey}
224                     negate = 1
225                 }
226             }
227         }
228         # below-right
229         9 = TEXT
230         9 {
231             value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
232             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
233             override {
234                 if {
235                     value = default
236                     equals = {$styles.content.imgtext.layoutKey}
237                     negate = 1
238                 }
239             }
240         }
241         # below-left
242         10 = TEXT
243         10 {
244             value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
245             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
246             override {
247                 if {
248                     value = default
249                     equals = {$styles.content.imgtext.layoutKey}
250                     negate = 1
251                 }
252             }
253         }
254         # intext-right
255         17 = TEXT
256         17 {
257             value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
258             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
259             override {
260                 if {
261                     value = default
262                     equals = {$styles.content.imgtext.layoutKey}
263                     negate = 1
264                 }
265             }
266         }
267         # intext-left
268         18 = TEXT
269         18 {
270             value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
271             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
272             override {
273                 if {
274                     value = default
275                     equals = {$styles.content.imgtext.layoutKey}
276                     negate = 1
277                 }
278             }
279         }
280         # intext-right-nowrap
281         25 = TEXT
282         25 {
283             value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
284             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
285             override {
286                 if {
287                     value = default
288                     equals = {$styles.content.imgtext.layoutKey}
289                     negate = 1
290                 }
291             }
292         }
293         # intext-left-nowrap
294         26 = TEXT
295         26 {
296             value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
297             override = <div class="csc-textpic csc-textpic-responsive csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
298             override {
299                 if {
300                     value = default
301                     equals = {$styles.content.imgtext.layoutKey}
302                     negate = 1
303                 }
304             }
305         }
306     }
307     rendering {
308         # Single image - No caption
309         singleNoCaption {
310             # Choose another rendering for special edge cases
311             fallbackRendering = COA
312             fallbackRendering {
313                 # Single image - Caption
314                 10 = TEXT
315                 10 {
316                     if {
317                         isTrue.data = file:current:description
318                         value = 1
319                         equals.data = register:imageCount
320                     }
321                     value = singleCaption
322                 }
323                 # Multiple images and split caption
324                 20 = TEXT
325                 20 {
326                     if {
327                         value = 1
328                         isGreaterThan.data = register:imageCount
329                         isTrue.if.isFalse.data = register:renderGlobalCaption
330                         isTrue.data = register:allImageCaptions
331                     }
332                     value = splitCaption
333                 }
334                 # Multiple images and no caption at all
335                 40 = TEXT
336                 40 {
337                     if {
338                         value = 1
339                         isGreaterThan.data = register:imageCount
340                         isFalse.data = register:allImageCaptions
341                     }
342                     value = noCaption
343                 }
344             }
345             allStdWrap {
346                 dataWrap = <div class="csc-textpic-imagewrap"> | </div>
347                 dataWrap {
348                     override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
349                     override {
350                         if {
351                             value = html5
352                             equals.data = TSFE:config|config|doctype
353                         }
354                     }
355                 }
356                 innerWrap.cObject = CASE
357                 innerWrap.cObject {
358                     key.field = imageorient
359                     # above-center
360                     0 = TEXT
361                     0.value = <div class="csc-textpic-center-outer"><div class="csc-textpic-center-inner"> | </div></div>
362                     # below-center
363                     8 < .0
364                 }
365             }
366             singleStdWrap {
367                 wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
368                 wrap {
369                     override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
370                     override {
371                         if {
372                             value = html5
373                             equals.data = TSFE:config|config|doctype
374                         }
375                     }
376                 }
377             }
378             rowStdWrap.wrap = |
379             lastRowStdWrap.wrap = |
380             columnStdWrap.wrap = |
381             imgTagStdWrap.wrap = |
382             editIconsStdWrap.wrap = <div> | </div>
383             caption.wrap = |
384         }
385         noCaption {
386             # Multiple images and no caption at all
387             fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
388             allStdWrap {
389                 dataWrap = <div class="csc-textpic-imagewrap"> | </div>
390                 dataWrap {
391                     override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
392                     override {
393                         if {
394                             value = html5
395                             equals.data = TSFE:config|config|doctype
396                         }
397                     }
398                 }
399             }
400             singleStdWrap {
401                 wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
402                 wrap {
403                     override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
404                 }
405             }
406             rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
407             lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
408             columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
409         }
410         singleCaption {
411             # Just one image with a caption
412             fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
413             singleStdWrap {
414                 wrap = <div class="csc-textpic-image###CLASSES###"><table>###CAPTION###<tbody><tr><td> | </td></tr></tbody></table></div>
415                 wrap {
416                     override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
417                     override {
418                         if {
419                             value = html5
420                             equals.data = TSFE:config|config|doctype
421                         }
422                     }
423                 }
424             }
425             caption {
426                 required = 1
427                 wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
428                 wrap {
429                     override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
430                     override {
431                         if {
432                             value = html5
433                             equals.data = TSFE:config|config|doctype
434                         }
435                     }
436                 }
437             }
438         }
439         splitCaption {
440             fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
441             singleStdWrap {
442                 wrap = <div class="csc-textpic-image###CLASSES###"><table>###CAPTION###<tbody><tr><td> | </td></tr></tbody></table></div>
443                 wrap {
444                     override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
445                     override {
446                         if {
447                             value = html5
448                             equals.data = TSFE:config|config|doctype
449                         }
450                     }
451                 }
452             }
453             rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
454             lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
455             columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
456             caption {
457                 required = 1
458                 wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
459                 wrap {
460                     override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
461                     override {
462                         if {
463                             value = html5
464                             equals.data = TSFE:config|config|doctype
465                         }
466                     }
467                 }
468             }
469         }
470     }
471     renderMethod = singleNoCaption
472     editIcons = tt_content : image [imageorient|imagewidth|imageheight],[imagecols|imageborder],[image_zoom],[image_frames]
473     editIcons.iconTitle.data = LLL:EXT:css_styled_content/Resources/Private/Language/locallang.xlf:eIcon.images
474     stdWrap.prefixComment = 2 | Image block:
475 }