---
title: "FCE-Slider + Artikel gemeinsam mappen"
url: "https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen"
source: "typo3.net"
tags: ["Archiv","TemplaVoilà","Frage"]
created: "2012-05-05"
last_reply: "2012-06-11"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# FCE-Slider + Artikel gemeinsam mappen

Archiv › TemplaVoilà · 8 Antworten · gestartet 2012-05-05

## Eröffnungsbeitrag

**timmy2007** · 2012-05-05 · [Beitrag #1](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/1)

Wie kann ich am Besten den folgenden HTML Code mappen, sodass ich im Slider die Bilder eingeben kann und auch die "Meta" Angaben neben den Artikel und den Artikel selber komplett als ein einziges FCE nutzen kann?

```html
<!-- project box -->
				<div id="project-box" class="cf">
				
				
					
				
				
					<!-- slider -->
					<div class="project-slider">
				        <div class="flexslider">
						  <ul class="slides">
						    <li>
						      <img src="img/dummies/slides/01.jpg" alt="alt text" />

						    </li>
						    <li>
						      <img src="img/dummies/slides/02.jpg" alt="alt text" />
						    </li>
						    <li>
						      <img src="img/dummies/slides/03.jpg" alt="alt text" />
						    </li>
						  </ul>
						</div>

					</div>
		        	<!-- ENDS slider -->


					<div class="info">
	        			<p><strong>Client </strong> Mr. Tanaka</p>
	        			<p><strong>Date </strong> April 25, 2012</p>

	        			<p><a href="http://www.luiszuno.com" class="launch" >Launch Project</a></p>
	        		</div>
	        		
	        		<!-- entry-content -->
	        		<div class="entry-content">
	        		
	        			<h2 class="heading">Project Name</h2>
	        			
	        			<div class="multicolumn">
	        			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>

	        			
	        			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
	        			
	        			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
	        			
	        			</div>
	        		</div>
	        		<!-- ENDS entry content -->
	        		
	        	</div>
		    	<!-- ENDS project box -->
```

Original sieht man bei: <http://luiszuno.com/themes/folder/project.html>

## Antworten

### [#2](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/2) · timmy2007 · 2012-05-06

Ich habe mich gestern anscheinnd zu kurz dazu geäußert, dafür erst einmal Entschuldigung.

Das ganze Mapping ist für ein FCE mit einem Slider im oberen Bereich, einen Infobereich links und einem Artikel rechts. Man sieht das ja bei dem Beispiellink des Originals!

Mein Problem ist folgendes:

Wenn ich anfange zu mappen, dann klappt die Zuweisung von Root natürlich prima. Dies habe ich "inner" gemappt.

Nun möchte ich mit dem Flexslider beginnen, wo ich einerseits die Struktur des Sliders mappen und dem Redakteur die Möglichkeit bieten möchte, soviele Bilder wie möglich im Slider zu verankern.

Beim Mapping des Sliders tritt schon das erste Problem auf, wenn ich den Flexslider als Element und INNER mappe wird zwar noch kein Fehler angezeigt. ABER wenn ich den li-Punkt mappen möchte (der mit einem span umgeben ist) dann kann TemplaVoila nicht damit umgehen und sagt mir folgenden Fehler: div#project-box div.project-slider[1] div.flexslider[1] ul.slides[1] span[1]

Ich weiss einfach nicht, wie ich dieses komplexe FCE mappen kann und würde mich über Hilfe sehr freuen. Vielleicht habe ich auch nur einen Denkfehler und mache es mir zu schwer?

Hier nochmals der komplette FCE-Quelltext:

```html
 <html>
        <title>Subtemplates: Eine Spalte Inhaltselement für FOLDER-Template</title>
        <body>

                                 <!-- project box -->
                                <div id="project-box" class="cf">





                                        <!-- slider -->
                                        <div class="project-slider">
                                        <div class="flexslider">
                                                  <ul class="slides">
                                                  <span>
                                                    <li>
                                                      <span><img src="img/dummies/slides/01.jpg" alt="alt text" /></span>
                                                    </li>
                                                    </span>
                                                    </ul>
                                                </div>
                                        </div>
                                <!-- ENDS slider -->


                                        <div class="info">
                                        <p><strong>Client </strong> Mr. Tanaka</p>
                                        <p><strong>Date </strong> April 25, 2012</p>
                                        <p><a href="http://www.luiszuno.com" class="launch" >Launch Project</a></p>
                                </div>

                                <!-- entry-content -->
                                <div class="entry-content">

                                        <h2 class="heading">Project Name</h2>

                                        <div class="multicolumn">
                                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>

                                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>

                                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>

                                        </div>
                                </div>
                                <!-- ENDS entry content -->

                        </div>
                            <!-- ENDS project box -->

                                </body>
                                </html>
```

### [#3](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/3) · timmy2007 · 2012-05-12

Hat niemand eine idee?

### [#4](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/4) · timmy2007 · 2012-05-28

Ich bin nun ein kleines Stück weiter gekommen. Ich habe im FCE den Flexslider erst einmal entfernt, um zu sehen, wie sich die anderen div-Container mappen lassen.

Mein Root Container ist wie oben beschrieben geblieben.

Die Klasse "info" habe ich, ebenso wie die Klasse "entry-content" und der h2-Tag, im Modus "Inner" gemappt. Ohne Probleme.

Jetzt würde ich gerne den Flexslider wieder hinzufügen und mappen. Hat jemand einen Tipp für mich?

### [#5](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/5) · rayphi · 2012-06-06

so würd ichs machen wenn man mich dazu zwingen würde das in ein FCE zu packen...

```html
<html>
  <title>Subtemplates: Eine Spalte Inhaltselement für FOLDER-Template</title>
  <body>
    <!-- project box -->
    <div id="project-box" class="cf"> <!-- root -->

      <!-- slider -->
      <div class="project-slider">
        <div class="flexslider">
          <ul class="slides">   <!-- section inner -->
            <span> <!-- span an dieser stelle invalide -->
              <li> <!-- container outer -->
                <span><img src="img/dummies/slides/01.jpg" alt="alt text" /><!-- ein element image oder 2 attr --></span>
              </li>
            </span>
          </ul>
        </div>
      </div>
      <!-- ENDS slider -->
      <div class="info">    <!-- element inner RTE -->
        <p><strong>Client </strong> Mr. Tanaka</p> 
        <p><strong>Date </strong> April 25, 2012</p>
        <p><a href="http://www.luiszuno.com" class="launch" >Launch Project</a></p>
      </div>

      <!-- entry-content --> 
      <!-- wenn es immer nur einen 'entry-content' gibt dann weiter wie beschrieben 
      ansonsten musst du hier noch eine section (bsp. div section inner) drum machen 
      und den 'entry-content' als container outer -->
      <div class="entry-content">
        
        <h2 class="heading">Project Name</h2> <!-- element inner -->
        
        <div class="multicolumn">
          <p>text</p>
          <!-- ^^element inner -->
          <p>text</p>
          <!-- ^^element inner -->
          <p>text</p>
          <!-- ^^element inner -->
        </div>
      </div>
      <!-- ENDS entry content -->
    </div>
    <!-- ENDS project box -->

</body>
</html>
```

Mit bestem Gruß
Rayphi

### [#6](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/6) · timmy2007 · 2012-06-06

> **rayphi schrieb:**
>
> so würd ichs machen wenn man mich dazu zwingen würde das in ein FCE zu packen...
>
> ```html
> <html>
>   <title>Subtemplates: Eine Spalte Inhaltselement für FOLDER-Template</title>
>   <body>
>     <!-- project box -->
>     <div id="project-box" class="cf"> <!-- root -->
>
>       <!-- slider -->
>       <div class="project-slider">
>         <div class="flexslider">
>           <ul class="slides">   <!-- section inner -->
>             <span> <!-- span an dieser stelle invalide -->
>               <li> <!-- container outer -->
>                 <span><img src="img/dummies/slides/01.jpg" alt="alt text" /><!-- ein element image oder 2 attr --></span>
>               </li>
>             </span>
>           </ul>
>         </div>
>       </div>
>       <!-- ENDS slider -->
>       <div class="info">    <!-- element inner RTE -->
>         <p><strong>Client </strong> Mr. Tanaka</p> 
>         <p><strong>Date </strong> April 25, 2012</p>
>         <p><a href="http://www.luiszuno.com" class="launch" >Launch Project</a></p>
>       </div>
>
>       <!-- entry-content --> 
>       <!-- wenn es immer nur einen 'entry-content' gibt dann weiter wie beschrieben 
>       ansonsten musst du hier noch eine section (bsp. div section inner) drum machen 
>       und den 'entry-content' als container outer -->
>       <div class="entry-content">
>         
>         <h2 class="heading">Project Name</h2> <!-- element inner -->
>         
>         <div class="multicolumn">
>           <p>text</p>
>           <!-- ^^element inner -->
>           <p>text</p>
>           <!-- ^^element inner -->
>           <p>text</p>
>           <!-- ^^element inner -->
>         </div>
>       </div>
>       <!-- ENDS entry content -->
>     </div>
>     <!-- ENDS project box -->
>
> </body>
> </html>
> ```
>
> Mit bestem Gruß
> Rayphi

Hi,

danke für Deine Idee, die ich in den nächsten Tagen testen werde.

Soll ich diesen invaliden span, den Du angegeben hast, entfernen? Geht das auch ogne den invaliden Span-tag zu mappen?

### [#7](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/7) · rayphi · 2012-06-06

am besten einfach rausschmeißen ;)

### [#8](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/8) · timmy2007 · 2012-06-11

> **rayphi schrieb:**
>
> am besten einfach rausschmeißen ;)

Der Mapping-Vorgang hat geklappt. Allerdings kann ich kein Bild für den Slider auswählen. Im Anhang habe ich mal ein Bild des fertigen Mapping-Vorganges angehängt, vielleicht sieht man ja einen Fehler.

Zusätzlich poste ich mal das XML des FCE:

```html
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
	</meta>
	<ROOT type="array">
		<tx_templavoila type="array">
			<title>ROOT</title>
			<description>Wählen Sie das HTML-Element der Seite, das Sie als übergeordnetes Container-Element der Vorlage möchten.</description>
		</tx_templavoila>
		<type>array</type>
		<el type="array">
			<field_ulliste type="array">
				<type>array</type>
				<tx_templavoila type="array">
					<title>UL Listenabschnitt</title>
					<eType>input</eType>
					<preview></preview>
				</tx_templavoila>
				<el type="array">
					<field_463b1b type="array">
						<type>array</type>
						<tx_templavoila type="array">
							<title>Li Liste</title>
							<eType>input</eType>
							<TypoScript></TypoScript>
							<proc type="array">
								<int>0</int>
								<HSC>0</HSC>
								<stdWrap></stdWrap>
							</proc>
							<preview></preview>
						</tx_templavoila>
						<TCEforms type="array">
							<label></label>
							<config type="array">
							</config>
						</TCEforms>
						<el type="array">
							<field_image type="array">
								<tx_templavoila type="array">
									<title>Bild</title>
									<sample_data type="array">
										<numIndex index="0"></numIndex>
									</sample_data>
									<eType>imagefixed</eType>
									<TypoScript>10 = IMAGE
10.file.XY = 200,150
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 200
10.file.minW = 200
10.file.maxH = 150
10.file.minH = 150</TypoScript>
									<proc type="array">
										<int>0</int>
										<HSC>0</HSC>
										<stdWrap></stdWrap>
									</proc>
									<preview></preview>
								</tx_templavoila>
								<TCEforms type="array">
									<label>Bild</label>
									<config type="array">
										<type>group</type>
										<internal_type>file</internal_type>
										<allowed>gif,png,jpg,jpeg</allowed>
										<max_size>1000</max_size>
										<uploadfolder>uploads/tx_templavoila</uploadfolder>
										<show_thumbs>1</show_thumbs>
										<size>1</size>
										<maxitems>1</maxitems>
										<minitems>0</minitems>
									</config>
								</TCEforms>
							</field_image>
						</el>
					</field_463b1b>
				</el>
				<section>1</section>
			</field_ulliste>
			<field_info type="array">
				<tx_templavoila type="array">
					<title>Infotext</title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>ce</eType>
					<TypoScript>
10= RECORDS
10.source.current=1
10.tables = tt_content</TypoScript>
					<preview></preview>
					<enableDragDrop type="integer">1</enableDragDrop>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Infotext</label>
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
				</TCEforms>
			</field_info>
			<field_inhalt_titel type="array">
				<tx_templavoila type="array">
					<title>Inhalt-Titel</title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>input</eType>
					<proc type="array">
						<HSC type="integer">1</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Inhalt-Titel</label>
					<config type="array">
						<type>input</type>
						<size>48</size>
						<eval>trim</eval>
					</config>
				</TCEforms>
			</field_inhalt_titel>
			<field_inhalt type="array">
				<tx_templavoila type="array">
					<title>Inhalt</title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>ce</eType>
					<TypoScript>
10= RECORDS
10.source.current=1
10.tables = tt_content</TypoScript>
					<preview></preview>
					<enableDragDrop type="integer">1</enableDragDrop>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Inhalt</label>
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
				</TCEforms>
			</field_inhalt>
		</el>
	</ROOT>
</T3DataStructure>
```

Vielleicht hat jemand eine Idee!

[Bild: \[upl-image-preview uuid=dedf09f5-bab7-5839-ad93-c0c150613087 url=https://www.typo3.net/assets/files/typo3net/832-screen_2.jpg alt=screen_2.jpg thumbnail_url=https://www.typo3.net/assets/files/typo3net/832-screen_2.jpg\]](https://www.typo3.net/assets/files/typo3net/832-screen_2.jpg)

### [#9](https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen/9) · timmy2007 · 2012-06-11

Ich kann doch ein Bild auswählen und muß im FCE auf li hinzufügen klicken und dann wird mir ein Bild-Link angezeigt.

Allerdings hat das FCE nicht den gewünschten weißen Hintergrund und die Formatierung ist auch noch nicht so, wie es im Original zu sehen ist.

---

Quelle: „FCE-Slider + Artikel gemeinsam mappen“, typo3.net, https://www.typo3.net/d/110459-fce-slider-artikel-gemeinsam-mappen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.