Hallo!
Meine Situation:
Typo3 4.1.2
KJ Image Lightbox v2
Typo3-Kochbuch >Bilder XHTML-valide machen Rezept<
XHTML-trans Website > ZIEL: XHTML-strict
Das Problem:
Wenn man ein Inhaltselement vom Typ
Text mit Bild erstellt und diesem (z.B. 500x500 Pixel große) Bilder zuweist welche man aber in der normalen Ansicht auf maximal 50x50 Pixel begrenzt (Bildqualität: Standard), werden diese nicht auf die angegebenen 50x50 Pixel heruntergerechnet. Sie bleiben unverändert.
Warum?
Ich möchte die Seite so gut wie möglich XHTML-konform erstellen um sie dann auf XHTML-strict umstellen zu können.
Ein Auszug vom Typo3-Kochbuch-Rezept, welches mir das Übel bereitet:
Typoscript-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:
515:
516:
517:
518:
519:
520:
521:
522:
523:
524:
525:
526:
527:
528:
529:
530:
531:
532:
533:
534:
535:
536:
537:
538:
539:
540:
541:
542:
543:
544:
545:
546:
547:
548:
549:
550:
551:
552:
553:
554:
555:
556:
557:
558:
559:
560:
561:
562:
563:
564:
565:
566:
567:
568:
569:
570:
571:
572:
|
temp.singleImage = COA
temp.singleImage {
stdWrap.outerWrap.cObject = COA
stdWrap.outerWrap.cObject {
10 = TEXT
10.value = <div class="image" style="
20 = TEXT
20.dataWrap = float:left;text-align:{field:imagecaption_position};
20.if.isFalse.field = image_noRows
30 = TEXT
30.dataWrap = text-align:{field:imagecaption_position};
30.if.isTrue.field = image_noRows
33 = TEXT
33.value = margin-top:{$styles.content.imgtext.rowSpace}px;
33.if.isTrue.data = register:nextRow
40 = TEXT
40.value = min-height:1px;">|</div>
}
10 = IMAGE
10 {
stdWrap.outerWrap.cObject = TEXT
stdWrap.outerWrap.cObject {
value = <div style="padding:{$styles.content.imgtext.borderThick}px;background:{$styles.content.imgtext.borderColor};">|</div>
if.isTrue.field = imageborder
}
file {
import = uploads/pics/
import.current = 1
}
altText.cObject = COA
altText.cObject {
10 = TEXT
10.field = altText
10.listNum.splitChar = 13
10.listNum.stdWrap.data = register:SPLIT_COUNT
20 = TEXT
20.field = imagecaption
20.listNum.splitChar = 13
20.listNum.stdWrap.data = register:SPLIT_COUNT
20.if.isFalse.field = altText
20.if.isFalse.listNum.splitChar = 13
20.if.isFalse.listNum.stdWrap.data = register:SPLIT_COUNT
}
titleText.cObject < .altText.cObject
titleText.cObject {
stdWrap.override.cObject = TEXT
stdWrap.override.cObject.field = titleText
stdWrap.override.cObject.listNum.splitChar = 13
stdWrap.override.cObject.listNum.stdWrap.data = register:SPLIT_COUNT
}
imageLinkWrap = 1
imageLinkWrap {
bodyTag = <body style="background:#000; margin:0;">
wrap = <a href="javascript:close();"> | </a>
width = 800m
height = 600m
effects =
JSwindow = 1
JSwindow.newWindow = 0
enable.field = image_zoom
enable.ifEmpty.field = image_link
enable.ifEmpty.listNum.stdWrap.data = register : SPLIT_COUNT
typolink {
parameter.field = image_link
parameter.listNum.stdWrap.data = register : SPLIT_COUNT
target = _top
extTarget = _blank
}
}
}
20 = TEXT
20 {
field = imagecaption
listNum.splitChar = 13
listNum.stdWrap.data = register:SPLIT_COUNT
outerWrap.cObject = COA
outerWrap.cObject {
10 = TEXT
10.value = <p class="csc-caption" style="display:block;
20 = TEXT
20.value = margin:0;
30 = TEXT
30.value = ">|</p>
}
if.isTrue.field = imagecaption
if.isTrue.listNum.splitChar = 13
if.isTrue.listNum.stdWrap.data = register:SPLIT_COUNT
}
}
tt_content.image.20 >
tt_content.image.20 = COA
tt_content.image.20 {
5 = LOAD_REGISTER
5 {
imageblockMaxWidth.cObject = COA
imageblockMaxWidth.cObject {
10 = TEXT
10 {
value = {$styles.content.imgtext.maxW}
if.value = image
if.equals.field = CType
}
20 = COA
20 {
10 = TEXT
10 {
value = {$styles.content.imgtext.maxWInText}
if.isTrue = {$styles.content.imgtext.maxWInText}
}
20 = TEXT
20 {
value = {$styles.content.imgtext.maxW}/2
prioriCalc = intval
if.isFalse = {$styles.content.imgtext.maxWInText}
}
if.value = textpic
if.equals.field = CType
}
}
singleimageWidth1.cObject = TEXT
singleimageWidth1.cObject {
dataWrap = {register:imageblockMaxWidth}/{field:imagecols}-{field:imageborder}*{$styles.content.imgtext.borderThick}*2-{$styles.content.imgtext.colSpace}+{$styles.content.imgtext.colSpace}/{field:imagecols}
}
singleimageWidth.cObject = COA
singleimageWidth.cObject {
10 = TEXT
10.data = register:singleimageWidth1
10.prioriCalc = intval
10.if.value.data = register:singleimageWidth1
10.if.value.prioriCalc = intval
10.if.isLessThan.field = imagewidth
10.if.negate = 1
20 = TEXT
20.field = imagewidth
20.if.value.data = register:singleimageWidth1
20.if.value.prioriCalc = intval
20.if.isLessThan.field = imagewidth
}
imageblockWidth.cObject = TEXT
imageblockWidth.cObject {
dataWrap = ({register:singleimageWidth}+{field:imageborder}*{$styles.content.imgtext.borderThick}*2+{$styles.content.imgtext.colSpace})*{field:imagecols}-{$styles.content.imgtext.colSpace}
}
imageblockWidth.prioriCalc = 1
textblockPadding.cObject = TEXT
textblockPadding.cObject {
dataWrap = {register:imageblockWidth}+{$styles.content.imgtext.textMargin}
}
textblockPadding.prioriCalc = intval
}
10 = CASE
10 {
if.isFalse.field = image_noRows
key.field = imagecols
default = TEXT
default {
field = image
split {
token = ,
cObjNum = 2
1 {
10 = LOAD_REGISTER
10 {
imageLoader.cObject = COA
imageLoader.cObject {
5 = TEXT
5.data = register:imageLoader
10 < temp.singleImage
10.stdWrap.outerWrap.cObject.35 = TEXT
10.stdWrap.outerWrap.cObject.35 {
value = margin-right:{$styles.content.imgtext.colSpace}px;
}
10.10.file.width.data = register:singleimageWidth
10.10.file.width.wrap = |m
10.20.outerWrap.cObject.25 = TEXT
10.20.outerWrap.cObject.25 {
dataWrap = width:{register:singleimageWidth}px;
}
}
}
}
2 < .1
2 {
10 {
imageLoader.cObject {
10.stdWrap.outerWrap.cObject.35 >
20 = TEXT
20.value = <div style="clear:both;"></div>
}
}
20 = LOAD_REGISTER
20 {
nextRow = 1
}
}
}
}
1 < .default
2 < .default
2.split.cObjNum = |*|1||2|*|2
3 < .2
3.split.cObjNum = |*|1||1||2|*|2
4 < .2
4.split.cObjNum = |*|1||1||1||2|*|2
5 < .2
5.split.cObjNum = |*|1||1||1||1||2|*|2
6 < .2
6.split.cObjNum = |*|1||1||1||1||1||2|*|2
7 < .2
7.split.cObjNum = |*|1||1||1||1||1||1||2|*|2
8 < .2
8.split.cObjNum = |*|1||1||1||1||1||1||1||2|*|2
}
20 = CASE
20 {
if.isTrue.field = image_noRows
key.field = imagecols
default = TEXT
default {
field = image
split {
token = ,
cObjNum = 1
1 {
10 = LOAD_REGISTER
10 {
imageLoader1.cObject = COA
imageLoader1.cObject {
5 = TEXT
5.data = register:imageLoader1
10 < temp.singleImage
10.10.file.width.data = register:singleimageWidth
10.10.file.width.wrap = |m
10.stdWrap.outerWrap.cObject.35 = TEXT
10.stdWrap.outerWrap.cObject.35 {
value = margin-top:{$styles.content.imgtext.rowSpace}px;
if.isTrue.data = register:nextRow1
}
10.20.outerWrap.cObject.25 = TEXT
10.20.outerWrap.cObject.25 {
dataWrap = width:{register:singleimageWidth}px;
}
}
}
20 = LOAD_REGISTER
20.nextRow1 = 1
}
}
}
1 < .default
2 < .1
2 {
split {
cObjNum = |*|1||2|*|
2 < .1
2 {
10.imageLoader2 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader2.cObject {
5.data = register:imageLoader2
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow2
}
20 = LOAD_REGISTER
20.nextRow2 = 1
}
}
}
3 < .2
3 {
split {
cObjNum = |*|1||2||3|*|
3 < .1
3 {
10.imageLoader3 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader3.cObject {
5.data = register:imageLoader3
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow3
}
20 = LOAD_REGISTER
20.nextRow3 = 1
}
}
}
4 < .3
4 {
split {
cObjNum = |*|1||2||3||4|*|
4 < .1
4 {
10.imageLoader4 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader4.cObject {
5.data = register:imageLoader4
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow4
}
20 = LOAD_REGISTER
20.nextRow4 = 1
}
}
}
5 < .4
5 {
split {
cObjNum = |*|1||2||3||4||5|*|
5 < .1
5 {
10.imageLoader5 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader5.cObject {
5.data = register:imageLoader5
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow5
}
20 = LOAD_REGISTER
20.nextRow5 = 1
}
}
}
6 < .5
6 {
split {
cObjNum = |*|1||2||3||4||5||6|*|
6 < .1
6 {
10.imageLoader6 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader6.cObject {
5.data = register:imageLoader6
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow6
}
20 = LOAD_REGISTER
20.nextRow6 = 1
}
}
}
7 < .6
7 {
split {
cObjNum = |*|1||2||3||4||5||6||7|*|
7 < .1
7 {
10.imageLoader7 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader7.cObject {
5.data = register:imageLoader7
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow7
}
20 = LOAD_REGISTER
20.nextRow7 = 1
}
}
}
8 < .7
8 {
split {
cObjNum = |*|1||2||3||4||5||6||7||8|*|
8 < .1
8 {
10.imageLoader8 < .10.imageLoader1
10.imageLoader1 >
10.imageLoader8.cObject {
5.data = register:imageLoader8
10.stdWrap.outerWrap.cObject.35.if.isTrue.data = register:nextRow8
}
20 = LOAD_REGISTER
20.nextRow8 = 1
}
}
}
}
30 = COA
30 {
if.isTrue.field = image_noRows
10 = LOAD_REGISTER
10 {
imageLoader.cObject = COA
imageLoader.cObject {
if.isTrue.field = image_noRows
10 = TEXT
10.data = register:imageLoader1
10.required = 1
10.wrap = <div class="imageCol" style="float:left;min-height:1px;">|</div>
20 < .10
20.data = register:imageLoader2
20.wrap = <div class="imageCol" style="float:left;min-height:1px; margin-left:{$styles.content.imgtext.colSpace}px;">|</div>
30 < .20
30.data = register:imageLoader3
40 < .20
40.data = register:imageLoader4
50 < .20
50.data = register:imageLoader5
60 < .20
60.data = register:imageLoader6
70 < .20
70.data = register:imageLoader7
80 < .20
80.data = register:imageLoader8
90 = TEXT
90.value = <div style="clear:both;height:{$styles.content.imgtext.textMargin}px;"></div>
}
}
}
40 = TEXT
40.data = register:imageLoader
40.required = 1
40.outerWrap.cObject = COA
40.outerWrap.cObject {
10 = TEXT
10.value = <div class="imageblock" style="
20 = TEXT
20.dataWrap = width:{register:imageblockWidth}px;
30 = TEXT
30.value = min-height:1px;
40 = CASE
40 {
key.field = imageorient
default = TEXT
default.value =
1 < .default
2 < .default
8 = TEXT
8.value = margin-top:{$styles.content.imgtext.textMargin}px;
9 < .8
10 < .8
17 = COA
17 {
10 = TEXT
10.value = margin-left:{$styles.content.imgtext.textMargin}px;
}
18 = COA
18 {
10 = TEXT
10.value = margin-right:{$styles.content.imgtext.textMargin}px;
}
25 < .default
26 < .default
}
70 = TEXT
70.value = ">
80 = TEXT
80.value = |</div>
90 = LOAD_REGISTER
90 {
imageblockWidth1.value =
imageblockWidth.value =
imageblockMaxWidth.value =
singleimageWidth1.value =
singleimageWidth.value =
textblockPadding1.value =
textblockPadding.value =
imageLoader.value =
imageLoader1.value =
imageLoader2.value =
imageLoader3.value =
imageLoader4.value =
imageLoader5.value =
imageLoader6.value =
imageLoader7.value =
imageLoader8.value =
nextRow.value =
nextRow1.value =
nextRow2.value =
nextRow3.value =
nextRow4.value =
nextRow5.value =
nextRow6.value =
nextRow7.value =
nextRow8.value =
}
}
}
tt_content.textpic.20 >
tt_content.textpic.20 = COA
tt_content.textpic.20 {
10 = COA
10 {
if.isInList.field = imageorient
if.value = 0,1,2,17,18,25,26
10 < tt_content.image.20
10.stdWrap.outerWrap.cObject = TEXT
10.stdWrap.outerWrap.cObject {
if.isFalse.field = imageorient
value = <div style="text-align: center">|</div>
}
10.40.outerWrap.cObject {
35 = CASE
35 {
key.field = imageorient
default = TEXT
default.value = margin:0 auto;
1 = TEXT
1.value = float:right;
2 = TEXT
2.value = float:left;
17 = TEXT
17.value = float:right;
18 = TEXT
18.value = float:left;
25 = TEXT
25.value = float:right;
26 = TEXT
26.value = float:left;
}
}
10.50 = TEXT
10.50 {
if.isInList.field = imageorient
if.value = 0,1,2
value = <div style="clear:both;"></div>
}
20 = COA
20 {
stdWrap.outerWrap.cObject = COA
stdWrap.outerWrap.cObject {
if.isInList.field = imageorient
if.value = 25,26
10 = TEXT
10.dataWrap = <div style="padding-right:{register:textblockPadding}px;">
10.if.value = 25
10.if.equals.field = imageorient
20 = TEXT
20.dataWrap = <div style="padding-left:{register:textblockPadding}px;">
20.if.value = 26
20.if.equals.field = imageorient
30 = TEXT
30.value = |</div>
}
10 = COA
10 {
10 < lib.stdheader
if.isInList.field = imageorient
if.value = 25,26
}
20 < tt_content.text.20
30 = TEXT
30.value = <div style="clear: both;"></div>
}
}
20 = COA
20 {
if.isInList.field = imageorient
if.value = 8,9,10
10 = COA
10 {
20 < tt_content.text.20
}
20 < tt_content.image.20
20.stdWrap.outerWrap.cObject = TEXT
20.stdWrap.outerWrap.cObject {
if.isInList.field = imageorient
if.value = 8
value = <div style="text-align:center;">|</div>
}
20.40.outerWrap.cObject {
35 = CASE
35 {
key.field = imageorient
8 = TEXT
8.value = margin:0 auto;
9 = TEXT
9.value = float:right;
10 = TEXT
10.value = float:left;
}
}
20.50 = TEXT
20.50.value = <div style="clear:both;"></div>
}
} |
Habe schon versucht diesen zu modifizieren, jedoch ohne Erfolg - soviel verstehe ich desweiteren auch noch nicht vom Typo3-Konzept selbst udn Aufbau.
Mein Fazit
Wenn ich diese TS-Zuweisung vom Template abkopple (also lösche) dann funktioniert alles wie gewohnt und alle Bilder werden in Elementen
Text mit Bild richtig verkleinert. Im
Nur Bilder Element funktioniert es immer, hier taucht der Fehler also nicht auf.
Meine Frage:
Hat jemand für mich einen Tipp, bzw. kann mir helfen? Mit bestem Dank im Voraus,
jos