In Typo3 mehrere Bilder von Seiteneigenschaft Resources per „levelmedia“ mit TypoScript nutzen

Problem: Wir möchten in Typo3 mehrere Bilder aus dem Tab Resourcen->File der Seiteneigenschaften ausgeben. Und deren Bildgrösse speziell einstellen – bzw. eine eigene Breite / Höhe unabhängig von den Inhaltsbildern.

Lösung: Die Bilder sind in der DB im Feld ‚media‘ gespeichert. Im typoscript sind sie über „levelmedia“ verfügbar. Mehr zu levelmedia:
http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/2/2/

Die häufigsten Verwendungen von levelmedia bei Typo3 sind headerbilder, hintergrundbilder oder slideshows. ob ein bild nun um header, im hintergrund oder als slideshow gebraucht wird, spielt für das typoscript keine rolle. levelmedia wird meistens so gebraucht:

//nimm meine eigenen bilder, wenn ich keine habe, nimm die der elternseite, usw.. 
data = levelmedia:-1, slide

//nimm meine eigenen, wenn ich keine habe, lass alles leer 
data = levelmedia:-1
required = 1

//nimm meine eigenen bilder, wenn ich keine habe, nimm die der elternseite, usw..

data = levelmedia:-1, slide

//nimm meine eigenen, wenn ich keine habe, lass alles leer

data = levelmedia:-1

required = 1

Hier ein Typoscript Snippet das mehrere Bilder aus dem media Feld ausgeben kann:

temp.slideshow = COA
temp.slideshow {
	1 = COA
	1 {
		stdWrap.required=1
		stdWrap.outerWrap.cObject = TEXT
		stdWrap.outerWrap.cObject.value = < img src=" | " width="470" height="180" /> 
		2 = IMG_RESOURCE
		2 {
			file { 
				import.data = levelmedia:-1
				import = uploads/media/
				import.listNum = 0

				//Bildgrösse festlegen (c = cut: auf diese breite/höhe zuschneiden)
				width = 470c
				height = 180c
			}
		}           
	}
	2 < .1
	2.2.file.import.listNum = 1
	3 < .1
	3.2.file.import.listNum = 2
	4 < .1
	4.2.file.import.listNum = 3
	5 < .1
	5.2.file.import.listNum = 4
	6 < .1
	6.2.file.import.listNum = 5
	7 < .1
	7.2.file.import.listNum = 6
	8 < .1
	8.2.file.import.listNum = 7
	9 < .1
	9.2.file.import.listNum = 8
	10 < .1
	10.2.file.import.listNum = 9
}

temp.slideshow = COA

temp.slideshow {

1 = COA

1 {

stdWrap.required=1

stdWrap.outerWrap.cObject = TEXT

stdWrap.outerWrap.cObject.value = < img src=" | " width="470" height="180" />

2 = IMG_RESOURCE

2 {

file {

import.data = levelmedia:-1

import = uploads/media/

import.listNum = 0

//Bildgrösse festlegen (c = cut: auf diese breite/höhe zuschneiden)

width = 470c

height = 180c

}

2 < .1

2.2.file.import.listNum = 1

3 < .1

3.2.file.import.listNum = 2

4 < .1

4.2.file.import.listNum = 3

5 < .1

5.2.file.import.listNum = 4

6 < .1

6.2.file.import.listNum = 5

7 < .1

7.2.file.import.listNum = 6

8 < .1

8.2.file.import.listNum = 7

9 < .1

9.2.file.import.listNum = 8

10 < .1

10.2.file.import.listNum = 9

}

Das typo3 setup im Backend:
Damit man mehr als 5 Bilder in das resources->files Feld abspeichern kann, muss die max 5 Limite aufgehoben werden. das macht man über die typo3conf/extTables.php mit folgenden zeilen:

// Mehr als 5 Mediendateien (Ressourcen) in den Seiteneigenschaften erlauben
$TCA['pages']['columns']['media']['config']['maxitems'] = 20;  //anzahl dateien
$TCA['pages']['columns']['media']['config']['size'] = 11;  //grösse des auswahlfeldes "files" im typo3 backend

// Mehr als 5 Mediendateien (Ressourcen) in den Seiteneigenschaften erlauben

$TCA['pages']['columns']['media']['config']['maxitems'] = 20; //anzahl dateien

$TCA['pages']['columns']['media']['config']['size'] = 11; //grösse des auswahlfeldes "files" im typo3 backend

und nicht vergessen: damit bei typo3 die typo3conf/extTables.php berücksichtigt, muss im typo3conf/localconf.php stehen:

$typo_db_extTableDef_script = 'extTables.php';

1	$typo_db_extTableDef_script = 'extTables.php';

Super Tip!

Den Ansatz hatte ich zwar auch schon, allerdings fehlte mir das „stdWrap.required“, damit keine leeren Tags entstehen 😉

Eine Lösung, automatisch ALLE Bilder aus dem Media Feld auszulesen gibt es via Typoscript nicht, oder?

Kommentar by nd — 19. April 2010 @ 20:57

leider kenne ich keine möglichkeit automatisch alle bilder einzeln als file zu bekommen.
als string kann man das CSV in der datenbank schon herauslesen.
zum beispiel für ein javascript:

temp.allmedia = TEXT temp.allmedia.data = levelmedia:-1, slide temp.allmedia.wrap = <script> var tstr='|'; var mediaArray = tstr.split(',') </script>

1
2
3

temp.allmedia = TEXT
temp.allmedia.data = levelmedia:-1, slide
temp.allmedia.wrap = <script> var tstr='|'; var mediaArray = tstr.split(',') </script>

Kommentar by Roman Abt — 21. April 2010 @ 17:24

Weltklasse! Hat mir sehr sehr weitergeholfen! Danke!

Kommentar by Felix — 10. September 2010 @ 08:11

wieso in die ferne schweifen, wenn die Lösung im eigenem Firmenblog liegt 😉
Danke Roman….

Kommentar by yves — 7. April 2011 @ 18:52

Blöde Frage: Wieso einfach, wenn es kompliziert auch geht?

temp.allMedia = COA temp.allMedia { 10 = TEXT 10.data = levelmedia:-1,slide 10.wrap = wrap|wrap 10.split { token = , cObjNum = 1 1 { 10 = IMG_RESOURCE 10.file { import.current = 1 import = uploads/media/ // beispiel breite höhe maxW = 1000 maxH = 580 } 10.stdWrap.wrap = } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

temp.allMedia = COA
temp.allMedia {
        10 = TEXT
        10.data = levelmedia:-1,slide
        10.wrap = wrap|wrap
        10.split {
          token = ,
          cObjNum = 1
          1 {
            10 = IMG_RESOURCE
            10.file {
              import.current = 1
              import = uploads/media/
              // beispiel breite höhe
              maxW = 1000
              maxH = 580
            }
            10.stdWrap.wrap =
          }
        }

damit spart man sich das komische rumkopiere von listnum x-y.
und man muss auch nicht anfangen in javascript unnötige string-operationen durchzuführen.

Kommentar by BastianBalthasarBux — 17. Januar 2012 @ 12:53

split schon im TS… sehr schön. danke.

Kommentar by Roman Abt — 17. Januar 2012 @ 13:44

Hallo Leute!

Vielen herzlichen Dank für das Skript. Genau das suchte ich. Eingebaut und Pfeifft.

Mfg,
Andreas

Kommentar by Andreas — 27. Januar 2012 @ 08:22

Sehr schöne und elegante Lösung mit dem Split. Super … vielen Dank!

Kommentar by Ben — 21. März 2012 @ 06:36

Hallihallo,
habe das Script oben eingebunden, aber bei mir wird beim jeweiligen Bild aus dem ursprünglichen Dateinamen z. B. pralinen.jpg -> pralinen_e270dd1cac.jpg. Wie kann das sein? Kann ich außerdem bei diesem Script z. b. rgsmoothgallery oder eine andere Bildergallerie einbauen???
Danke schon mal im Voraus.

Schöne Grüße

Kommentar by Bettina — 11. April 2012 @ 09:58

hallo bettina

was steht denn in der datenbank für ein bildname? wenn typo3 die bilder zuschneidet vergibt es dabei einen neuen namen. …und klar kannst du eine JS-gallery einsetzen – einfach die wraps so anpassen wie es das galleryscript erwartet.

lg
roman

Kommentar by Roman Abt — 12. April 2012 @ 10:31

vielen dank für den super tipp!
bin nur seit längerer zeit beim rätseln wie oder besser gesagt wo ich hier einen alttext einfügen könnte..
vielleicht kannst du mir kurz auf die sprünge helfen
danke und lg

Kommentar by edith — 13. Juli 2012 @ 13:31

hallo edith

auf die schnelle habe ich dafür auch keine lösung…

die eine frage ist: wo soll der alt-text eingegeben werden? es gibt kein eigenes feld in der pages-tabelle dafür. man könnte das abstract oder description feld zweckentfremden.
dabei ist jedoch nicht garantiert, dass sich das auf derselben seite wie die resourcen befindet.

zugreiffen würde man auf das feld so:
20.data = levelfield:-1, description, slide

dafür muss in der localconf.php noch folgendes ergänzt werden:
$TYPO3_CONF_VARS[‚FE‘][‚addRootLineFields‘] = ‚abstract,description‘;

bei BastianBalthasarBux variante weisst du jedoch nicht, bei welchem bild dass du in der schleife bist. da macht mein rumkopieren mit listnum wieder sinn.

lg
rat

Kommentar by Roman Abt — 17. Juli 2012 @ 14:16

Yes! Danke BastianBalthasarBux

Bei mir so

temp.galerie = CONTENT temp.galerie { table = tt_content select.languageField = sys_language_uid select.where = colPos = 0 select.selectFields = image_link,imagecaption,image stdWrap.wrap = | renderObj=COA renderObj{ wrap = | // https://www.netzkompetenz.ch/typo3/typoscript/typo3-mehrere-bilder-resources-levelmedia/ 5 = COA 5 { 10 = TEXT 10.field = image 10.wrap = >|< 10.split { token = , cObjNum = 1 1 { 10 = IMAGE 10.file { import.current = 1 import = uploads/pics/ width = 150c height = 100c } 10.stdWrap.wrap = } } } } }

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

temp.galerie = CONTENT
temp.galerie {
table = tt_content
select.languageField = sys_language_uid
select.where = colPos = 0
select.selectFields = image_link,imagecaption,image
stdWrap.wrap = |

renderObj=COA
renderObj{
    wrap = |

     // https://www.netzkompetenz.ch/typo3/typoscript/typo3-mehrere-bilder-resources-levelmedia/

     5 = COA
     5 {
        10 = TEXT
        10.field = image
        10.wrap = >|<
        10.split {
          token = ,
          cObjNum = 1
          1 {
            10 = IMAGE
            10.file {
              import.current = 1
              import = uploads/pics/
              width = 150c
          height = 100c
            }
            10.stdWrap.wrap =
          }
          }
     }

       }
}

Kommentar by Urs Bräm — 20. August 2012 @ 12:32

Hat das pre tag nicht gefressen, sorry

hab‘ den pre tag ergänzt.

Kommentar by Roman Abt — 20. August 2012 @ 12:36

Hier noch eine erweiterte Version, dank http://stackoverflow.com/questions/9669237/typoscript-splitting-media-and-imagecaption-simultaneously

In meinem Fall will ich nicht nur die Bilder splitten, sondern auch das Feld mit den Captions und evt noch mehr.
Das geht, indem man auf den Zähler zurückgreift, den TYPO3 anlegt, während es den split hochzählt: REGISTER:SPLIT_COUNT

5 = COA 5 { 10 = TEXT 10.field = image 10.wrap = | 10.split { token = , cObjNum = 1 1 { 10 = IMAGE 10.file { import.current = 1 import = uploads/pics/ width = 100c height = 100c } 10.stdWrap.wrap = //http://stackoverflow.com/questions/9669237/typoscript-splitting-media-and-imagecaption-simultaneously # for each image, add the imagecaption 20 = TEXT 20 { field = imagecaption # split saves the index in REGISTER:SPLIT_COUNT listNum.stdWrap.data = REGISTER:SPLIT_COUNT listNum.splitChar = 10 } } } }

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

5 = COA
5 {
   10 = TEXT
   10.field = image
   10.wrap = |
   10.split {
     token = ,
     cObjNum = 1
     1 {
       10 = IMAGE
       10.file {
         import.current = 1
         import = uploads/pics/
         width = 100c
         height = 100c
       }
       10.stdWrap.wrap =

       //http://stackoverflow.com/questions/9669237/typoscript-splitting-media-and-imagecaption-simultaneously
       # for each image, add the imagecaption
       20 = TEXT
       20 {
          field = imagecaption
          # split saves the index in REGISTER:SPLIT_COUNT
          listNum.stdWrap.data = REGISTER:SPLIT_COUNT
          listNum.splitChar = 10
       }

     }
     }
}

PS: falls pre jetzt wieder nicht greift, entschuldige bitte – weiss nicht wie man das bei WP macht

Kommentar by Urs Bräm — 21. August 2012 @ 13:33

Hallo,

wie sieht diese Lösung denn aus, wenn man tx_dam_pages->get_media_file verwenden will? Ist das auch möglich? Mit import = uploads/pics bekomme ich andere Bilder ausgegeben.

danke und lg
Thorsten

Kommentar by Thorsten — 21. September 2012 @ 12:06

Update für diesen Artikel für typo3 Verison 6 und 6.1.

Pingback by levelmedia für Seiteneigenschaft “Resource” bei typo3 V6 und höher — 14. Mai 2013 @ 12:00

Danke für das Beispiel!

Allerdings ist dazu zu sagen, dass ab Typo3 6.0 beim „Sliden“ der Bilder, die Sortierung nicht funktioniert 🙁
Scheint ein Bug zu sein, der immer noch nicht gelöst ist.

Kommentar by Cirillo — 24. Oktober 2013 @ 09:23

Hallo zusammen

Ich habe mir Eure Kommentare und Lösungen angeschaut, doch als TypoScript-Laie finde ich die richtige Lösung nicht.

Im Header der „Startseite“ von „www.grafyachting.ch“ möchte ich gerne laufende Bilder, in Art einer Flashanimation. Im Editiermodus der Seite werden im Reiter „Ressourcen“ leider keine SWF-Files (Multimedia) unterstützt, sondern nur Bilder.

Vermutlich müsste ich es, wie in Euren Lösungen beschrieben, mit einem TypoScript realisieren, doch davon habe ich keine Ahnung.

Für Eure Hilfe wäre ich Euch sehr dankbar.

Vielen Dank im Voraus
Ami

Kommentar by Ami — 20. September 2016 @ 15:50

in der situation kann ich folgende tipp’s geben:

– kein swf verwenden:
1. weil immer weniger endgeräte ein flash-plugin haben und 2. weil der kunde selber kein swf erstellen kann um die bilder einzupflegen sowie
3. das swf immernoch per typoscript aus den seiteneigenschaften ausgelesen werden muss

– bilder-slideshow nicht neu erfinden:
um mehrere bilder als slideshow zu animieren gibt’s bereits tonnenweise js librarys oder jquery plugins. wir haben mt dem http://bxslider.com/ gute erfahrungen gemacht.

– zum typoscript:
da die betroffene seite eine v6 installation ist, müsstes du folgendes TS im setup verwenden:
https://www.netzkompetenz.ch/allgemein/levelmedia-fur-seiteneigenschaft-resource-bei-typo3-v6-und-hoher/

beste grüsse
roman

Kommentar by Roman Abt — 15. Oktober 2016 @ 07:29

Netzkompetenz