Egyedi Views sablon készítése

Beküldte kalmarr - 2014. április 30. 16.46

Sziasztok,

szeretném a views theme-jét megbabrálni a következő képen.

Egy "Accordion" típusú megjelenést szeretnék a view-ban létrehozni.

Aminek két "fő" része van először van egy csoportba foglalása ami az összes elemre vonatkozik és egy kisebb számozott csoportja, ami az egyes elemekre vonatkozik.

Az alap code így nézne ki (ez rendben működik).

<div id="spaccordion" class="panel-group">
 
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#spaccordion" href="#spcollapse"><span>Item1</span></a></h4>
</div>
<div id="spcollapse" class="panel-collapse collapse in">
<div class="panel-body">ac diam nec purus faucibus vulputate eget nec tortor. Donec diam nisl, mattis vitae orci sit amet, volutpat tristique ipsum. Donec eleifend consectetur porttitor. Duis ac urna vitae tortor ultrices bibendum eget nec lorem. Nam metus urna, tempor eget tristique at, imperdiet nec lorem. Donec euismod purus at metus cursus fringilla nec sed dui. Duis interdum blandit pulvinar. Praesent eu luctus libero. Nunc vitae pellentesque sem, quis interdum nisl. Quisque pharetra tempor erat. Maecenas at purus diam. Morbi vitae urna tellus. Phasellus ac hendrerit quam, nec semper lorem. Fusce vehicula, est quis sollicitudin faucibus, odio quam ornare eros, in volutpat lorem nulla consectetur felis</div>
</div>
</div>
 
 
 
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#spaccordion" href="#spcollapse--2"><span>Item2</span></a></h4>
</div>
<div id="spcollapse--2" class="panel-collapse collapse">
<div class="panel-body">ac diam nec purus faucibus vulputate eget nec tortor. Donec diam nisl, mattis vitae orci sit amet, volutpat tristique ipsum. Donec eleifend consectetur porttitor. Duis ac urna vitae tortor ultrices bibendum eget nec lorem. Nam metus urna, tempor eget tristique at, imperdiet nec lorem. Donec euismod purus at metus cursus fringilla nec sed dui. Duis interdum blandit pulvinar. Praesent eu luctus libero. Nunc vitae pellentesque sem, quis interdum nisl. Quisque pharetra tempor erat. Maecenas at purus diam. Morbi vitae urna tellus. Phasellus ac hendrerit quam, nec semper lorem. Fusce vehicula, est quis sollicitudin faucibus, odio quam ornare eros, in volutpat lorem nulla consectetur felis</div>
</div>
</div>
 
 
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#spaccordion" href="#spcollapse--3"><span>Item3</span></a></h4>
</div>
<div id="spcollapse--3" class="panel-collapse collapse">
<div class="panel-body">ac diam nec purus faucibus vulputate eget nec tortor. Donec diam nisl, mattis vitae orci sit amet, volutpat tristique ipsum. Donec eleifend consectetur porttitor. Duis ac urna vitae tortor ultrices bibendum eget nec lorem. Nam metus urna, tempor eget tristique at, imperdiet nec lorem. Donec euismod purus at metus cursus fringilla nec sed dui. Duis interdum blandit pulvinar. Praesent eu luctus libero. Nunc vitae pellentesque sem, quis interdum nisl. Quisque pharetra tempor erat. Maecenas at purus diam. Morbi vitae urna tellus. Phasellus ac hendrerit quam, nec semper lorem. Fusce vehicula, est quis sollicitudin faucibus, odio quam ornare eros, in volutpat lorem nulla consectetur felis</div>
</div>
</div>
 
</div>

Ha jól gondolom nekem az "node--view--oldal.tpl.php" kellene bűvölnöm, de két hibába futottam:
1. Nem tudok létrehozni egy "fő" csoportot (<div id="spaccordion" class="panel-group">), mivel ha az említett .tpl.php-be teszem, akkor minden elemnél ismétlődik a fő csoport, de nekem az adott néztre kellene csak. Ötletként gondoltam a View-s (Fejléc és láblécnére), de ez valamiért nem működik nem értelmezi az adott nézetben (nem történik semmi, ha oda teszem).
Kérdésem, hogy "node--view--oldal.tpl.php" ebben kell-e megoldani, vagy más .tpl.php lesz a megoldás?

2. Elemek száma

Az Accordion figyeli az elemek számát e szerint történik a megjelenítést:

<h4 class="panel-title"><a data-toggle="collapse" data-parent="#spaccordion" href="#spcollapse--3"><span>Item3</span></a></h4>
</div>
<div id="spcollapse--3" class="panel-collapse collapse">