Designproblem, FCE ja oder nein?

Hallo TYPO3ler,

Ich hoffe ich bin hier richtig.

TYPO3: v6.1.7
Ext.: bisher keine
Template: per Fluid
Design: responsive per Bootstrap

Folgendes Designdetail soll umgesetzt werden:
Der Maincontent sind sichtbar sechs Kacheln (Tablet-Quer: zwei Zeilen mit je drei Kacheln), diese Bilden Produkte nach. Bild mit Text.
Nun gibt es aber mehr als sechs Produkte, also muss der Content scroll bar/wisch bar sein. Dies realisiere ich mit jQuery.bxslider.

Umsetzung in TYPO3 gestaltet sich Problematisch, zumindest habe ich nach Recherche im Internet nun keine Idee die ich realisieren kann.
Folgendes konnte ich recherchieren:
- Möglich wäre es mit TemplaVoilá FCE's: Da TV nicht mehr aktiv weiterentwickelt wird oder zumindest eine letzte Version zu TYPO3 6.2 LTS kommen soll, will ich TV nicht verwenden.
- ich habe auch die Slides von Tobias Liegl (Der Weg weg von TemplaVoila und FCE ohne TemplaVoila) gefunden. Nur verstehe ich das so, dass ich um FCE's nach zu Bilden dann eine TYPO3 Extension schreiben muss? Davon habe ich so gar keine Ahnung.
- Backend-Layouts habe ich mir auch angesehen und da ich nicht nur sechs Kacheln, sondern mehr befüllen muss scheint mir das keine Alternative zu sein.

Habt Ihr Ideen wie ich das lösen kann, evtl. ein gutes Tutorial zum Programmieren von Extensions.
Am liebsten wäre mir eine Lösung mit Extbase/Fliud ohne Extension. Damit ich eine Zeitlang Zukunftssicher bin.
Ich muss es irgendwie schaffen ein neues Content-Element an zu legen das der Redakteur dann nutzen kann.
Vielleicht hat ja auch jemand eine ganz andere Lösung.

Vielen Dank für eure Mühe und liebe Grüße
Tikky

Backend Layouts solltest du dir noch einmal ansehen - zumindest ist dein Argument gegen den Einsatz wenig schlagkräftig 😉 Du kannst ja so viele Spalten/Zeilen im deinem BE-Layout anlegen, wie du willst. Ich hätte es sehr wahrscheinlich über Backend Layouts umgesetzt - also eine Spalte nur für die Kacheln, die dann per Typoscript ausgelesen wird. Sieht dann in etwa so aus (nicht getestet):

temp.kacheln = CONTENT
temp.kacheln {
  table = tt_content
  select {
    pidInList = this //also immer die aktuelle Seite
    where = colPos = 1337 //Spaltennummer im Backend, wo das CE liegt
    orderBy = sorting
  }
  renderObj = COA
  renderObj {
    wrap = <ul class="bxslider">|</ul>
    10 = FILES
    10 {
      references {
        table = tt_content
        uid.field = uid
        fieldName = image
      }

      renderObj = COA
      renderObj {
        wrap = <li>|</li>
        10 = IMAGE
        10.file.import.data = file:current:publicUrl
        ... //title etc. auch hier mit zuweisen
      }
    }
  }
}

Das muss dann noch einem Marker zugewiesen werden. Irgendwie so sollte es dann auch ohne eigene Extension funktionieren und ist vielleicht etwas zugänglicher, als direkt eine komplette Extension zu schreiben.

Danke für die super schnellen Antworten.

Zu den Backend-Layouts:
Ich war da vielleicht zu undeutlich.

Folgende HTML-Struktur will ich nachbilden:

<div class="container">
  <div class="row">
   <ul class="bxslider">
    <li>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Prudukt_1
       <small>Preis_1</small>
      </h3>
     </div>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Produkt_2
       <small>Preis_2</small>
      </h3>
     </div>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Produkt_3
       <small>Preis_3</small>
      </h3>
     </div>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Produkt_4
       <small>Preis_4</small>
      </h3>
     </div>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Produkt_5
       <small>Preis_5</small>
      </h3>
     </div>
     <div class="col-lg-4 col-sm-6 bg-white border-brown">
      <img class="img-responsive center-block" src="http://placehold.it/300x225">
      <h3>Produkt_6
       <small>Preis_6</small>
      </h3>
     </div>
    </li>
    <li>
     <!-- naechsten 6 Produkte ... -->
    </li>
   </ul>
  </div>
</div>

Bei Backend-Layouts müsste ich meines Wissens nun vorher wissen wieviele Produkte ich maximal benötige und wenn es mehr werden dann das BE-Layout jedesmal anpassen.
Ich weiss nicht ob ich da 6er Gruppen bilden kann (das geht vielleicht über die Definition im TS).

Liebe Grüße
Tikky

Ich habe mich nun auch mit DCE beschäftigt:

unter Template habe ich folgenden Code:

{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="Default" />

<f:section name="main">
	<div class="col-lg-4 col-sm-6 bg-white border-brown">
		<a href="{field.productlink}">
			<img class="img-responsive center-block" src="{field.identifier}" alt="" title="{field.title}">
			<h3>{field.productname}
				<small>{field.productprize}</small>
			</h3>
		</a>
	</div>
</f:section>

nur leider bekomme ich das Bild nicht zu fassen, ich weis dass da ein Array mit den Bilddaten zurückgegeben wird, aber mein Fluidwissen ist noch nicht so gut als dass ich das auswerten kann.
Ich muss den Bildpfad ausgeben, nur wie?

Liebe Grüße
Tikky

<f:image src="/fileadmin{field.NAMEDESBILDFELDES.0.identifier}" height="179c" width="179c" alt="{field.title}" class="img-responsive center-block />

Super vielen Dank Schweriner, nun klappt es mit den Bildern.

Nur zwei sachen sind nicht ganz rund:
- Die Attribute "alt" und "title" des IMG-Tags sind leer. Ich dachte das ein erstellen der beiden Texte in der Dateiliste in den Bildeigenschaften hilft, aber dem ist leider nicht so.
- Der link führt nirgendwo hin, statt "index.php?id=2" steht "2" im Link-SRC. Aber ich schau mal in den ViewHelpern, ob ich da was zum Linkrendering finde.

Ich hoffe ich nerve nicht, bin begeistert von Fluid und möchte das besser verstehen.

Vielen Dank und ein schönes Wochenende
Tikky

Jaaaaa, das Link-Problem hat sich erledigt.

<f:link.page pageUid="{field.productlinkOl}">
...
</f:link.page>