Accordion-Element als Format für die View-Ausgabe / -Items
Eingetragen von trwawi (50)am 12.06.2015 - 17:22 Uhr in
Hallo,
ich versuche gerade, eine Galerie-Seite zu erstellen, deren Inhalt aus einem View kommt. Der View holt Inhalte eines bestimmten Inhaltstyps. Es geht um Screenshot-Slideshows zu verschiedenen Bereichen unserer Software. Die Ausgabe des Views erfolgt in Form von Feldern. Alle Felder bis auf eins sind von der Anzeige ausgeschlossen. Das eine, das nicht ausgeschlossen ist, wird mit diesem Code überschrieben:
<?php
<div class="panel-group secundary" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse2[nid]">[title]</a></h4>
</div>
<div class="accordion-body collapse" id="collapse2[nid]">
<div class="panel-body">
[field_screenshot_slideshow]
</div>
<p>[body]</p>
</div>
</div>
</div>
?>Habe PHP-Code-Formatierung nur wegen der bessere Übersicht verwendet, die < code >-Funktion macht irgendwie alles linksbündig ohne Einrückung.
Unser Theme bietet u.a. ein Accordion-Element und das wollte ich nutzen, damit man nicht gleich von allen Screenshots / Slideshows erschlagen wird. Grundsätzlich klappt das mit dem Überschreiben, aber auf diese Art und Weise entstehen natürlich mehrere Panelgruppen <div class="panel-group secundary" id="accordion">, nämlich je eine pro View-Zeile mit je einem Panel darin. Normalerweise müsste es nur eine Panelgruppe geben mit mehreren Panels darin.
Das hat dann zu Folge, dass die Funktionalität, dass nur ein Element offen ist, so nicht möglich ist. Außerdem kann man so nicht dafür sorgen, dass nur das erste Panel nach dem Laden der Seite offen ist. Wenn ich die Klasse "in", also "collapse in" nutze, die dafür gedacht ist, sind logischerweise alle Panels aufgeklappt.
Ich denke das kann man nur über die Template-Dateien lösen (korrigiert mich bitte, wenn es auch anders geht).
Also habe ich ein wenig recherchiert und in Anlehnung an einige Templates, die beim Theme dabei waren, diese Dateien erstellt
"views-view--colorbox-gallery.tpl.php" und "views-view-unformatted--colorbox-gallery.tpl.php" (mein View heißt "colorbox-gallery").
In der ersten habe ich die Panelgruppe untergebracht:
<?php if ($header): ?>
<?php print $header; ?>
<?php endif; ?>
<div class="row">
<div class="panel-group secundary" id="accordion">
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<?php print $title; ?>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($exposed): ?>
<div class="view-filters">
<?php print $exposed; ?>
</div>
<?php endif; ?>
<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
<?php if ($rows): ?>
<?php print $rows; ?>
<?php elseif ($empty): ?>
<div class="view-empty">
<?php print $empty; ?>
</div>
<?php endif; ?>
<?php if ($pager): ?>
<?php print $pager; ?>
<?php endif; ?>
<?php if ($attachment_after): ?>
<div class="attachment attachment-after">
<?php print $attachment_after; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<?php print $more; ?>
<?php endif; ?>
<?php if ($footer): ?>
<div class="view-footer">
<?php print $footer; ?>
</div>
<?php endif; ?>
<?php if ($feed_icon): ?>
<div class="feed-icon">
<?php print $feed_icon; ?>
</div>
<?php endif; ?>
</div>
</div> In der zweiten habe ich versucht, den Rest unterzubringen:
<?php <?php $count = '0'; foreach ($rows as $id => $row): ?>
<div class="panel panel-default">
<?php
/*print $row;*/
print '<div class="panel-heading">';
print '<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse2[nid]">';
print $row['field_title']; <--------------------------------------------
print'</a></h4>';
print '</div>';
$count++;
?>
</div>
<?php endforeach; ?> Nur leider schitere ich gleich beim Panel-Header (Stelle mit dem Pfeil), weil ich nicht weiß, wie ich auf die einzelnen Felder zugreifen kann. Es klappt weder mit "title" noch mit "field_title". Es gibt zig Varianten, die im Netz vorgeschlagen werden, doch leider hat keine einzige funktioniert bei mir. Viellleicht sind die Einträge inzwischen veraltet, ich weiß es nicht. Schien auch bei einigen anderen so zu sein.
Grundsätzlich scheint die zweite Datei nicht nötig zu sein, allerdings gab es nur da eine Schleife für die anzuzeigenden Views-Rows, so dass ich dachte, man müsste sich auch da einklinken.
Die erste Frage ist: ist der Ansatz so korrekt? Sprich diese beiden Dateien zu erstellen.
Wenn ja, dann ist die zweite Frage, wie greife ich auf die einzelnen Felder zu, um diese ähnlich wie im ersten Code-Beispiel an den betroffenen Stellen zu verwenden mit dem jeweiligen HTML-Code drum herum?
Habe bei der Suche auch was vom Modul "Views Accordion" gelesen, aber das scheint etwas anders zu funktionieren und vor allem würde es nicht zum Theme passen, daher würde ich am liebsten ohne extra Module zur Lösung kommen, wenn möglich und hoffe Ihr könnt mir helfen.
- Anmelden oder Registrieren um Kommentare zu schreiben
Zitat: Unser Theme bietet
am 14.06.2015 - 11:22 Uhr
Unser Theme bietet u.a. ein Accordion-Element und das wollte ich nutzen, damit man nicht gleich von allen Screenshots / Slideshows erschlagen wird
Du könntest hier beim Bootstrap abgucken wie die verschiedenen collapse eingesetzt werden können: http://getbootstrap.com/javascript/#collapse
Ansonsten funktioniert das ViewsAccordion genau so wie du es möchtest, eines ist geöffnet und schließt automatisch wenn das nächste ausgewählt wird.
Die Felder die du in das Accordion ziehst kannst du ja völlig frei bestimmen, würde das dein Problem nicht schon lösen?
Grüße Jenna
Danke Jenna, kenne mich mit
am 15.06.2015 - 10:20 Uhr
Danke Jenna,
kenne mich mit JavaScript & Co leider nicht so aus. Wenn ich es richtig verstehe, könnte man auch manuell dafür sorgen, dass eine bestimmte Gruppe auf- / zugeklappt wird, allerdings müsste es vermutlich über einen eindeutigen Bezeichner gehen (könnte man vielleicht noch herausbekommen) und außerdem ist mir nicht klar, wo der Befehl dazu eingebaut werden muss.
Habe inzwischen eine "quick&dirty"-Lösung dafür gefunden zur Not, aber das mit nur einer aufgeklappten Gruppe bleibt problematisch.
Habe gerade ViewsAccordion ausprobiert. Von der Funktionalität her macht es das, was ich möchte (so gut wie), aber wie vermutet sieht das Ergebnis optisch ganz anders aus als der Rest vom Theme / von der Seite und ich sehe auf den ersten Blick nichts bzgl. einer Anpassungsmöglichkeit.
Hat man keine Möglichkeit, an die Felder in den tpl-Dateien zu kommen?
Wenn Views-Accordion das
am 15.06.2015 - 10:29 Uhr
Wenn Views-Accordion das leistet, was Du möchtest, kann Du das Aussehen problemlos über CSS anpassen. Du trägst eine eigene CSS-Datei in den .info-File Deines Themes ein und da hinein kommen alle Deine Änderungen am CSS, um das Aussehen Deinen Wünschen entsprechend anzupassen. Du wirst aber nicht umhin kommen, Dich dazu ausführlich mit CSS und den vorhandenen HTML-Strukturen von Drupal zu befassen. Ohne das geht aber bei Änderungen am Aussehen nichts.
Danke auch Dir, wla, in
am 15.06.2015 - 15:26 Uhr
Danke auch Dir, wla,
in Verbindung mit dem Modul "jQuery UI theme" kann man das ganze scheinbar themen und es gibt einige vorgefertigte Themes (http://jqueryui.com/themeroller/) habe eins angepasst und als Costom-Theme heruntergeladen, allerding schlägt das Einbinden bisher fehl. Es gibt einen Fehler im Module (habe den korrigiert) und dann scheint die Datei "all.css" zu fehlen. Muss ich mir bei Gelegenheit genauer anschauen - im Moment leider zu zeitintensiv, fürchte ich.
Aber interesshalber nochmal die Frage: wie kommt man denn nun an die Felder dran in den tpl-Dateien? :)
Also willst Du lieber in PHP
am 15.06.2015 - 15:39 Uhr
Also willst Du lieber in PHP herumbasteln, als Dich mit CSS zu befassen? Bei den tpl-Dateien stellt sich für mich erst einmal die Frage, um welche Template-Datei es sich denn handeln soll, die für Nodeausgabe, eine für die Viewsausgabe und wenn ja, für welchen Teil der Views-Ausgabe?
Außerdem darst Du nie an den Originaldateien ändern sondern mußt die in Dein Theme kopieren und dort ändern. Dann mußt Du auch die Drupal-typischen Namenskonventionen beachten, damit Deine Änderung nur auf genau die richtige Ausgabe wirkt. Wie weit kennst Du Dich damit aus?
Naja, "wollen" ist so eine
am 15.06.2015 - 16:19 Uhr
Naja, "wollen" ist so eine Sache. PHP-Templates erscheinen mir im Moment am einleuchtendsten und das Einzige was fehlt, ist eben der Zugriff auf die Felder. Selbst wenn ich diese Variante verwerfe, würde ich es dennoch gerne wissen, falls es irgendwann doch nötig sein sollte. Zumal das Modul "jQuery UI theme", dessen Verwendung in "Views Accordion" empfohlen wird, etwas buggy ist und sich da nicht (mehr) viel tut.
Wie im ersten Beitrag erwähnt
Also habe ich ein wenig recherchiert und in Anlehnung an einige Templates, die beim Theme dabei waren, diese Dateien erstellt
"views-view--colorbox-gallery.tpl.php" und "views-view-unformatted--colorbox-gallery.tpl.php" (mein View heißt "colorbox-gallery").
Habe es auch mit "xyz.-block.tpl.php" probiert. Unter "Theme: Information" im View wurde angezeigt, dass meine Dateien verwendet werden und auch so merkte ich es, weil der Fehler kam, dass der Zugriff auf das Feld fehschlug.
Ausgehend von der zweiten Datei, in der es eine Schleife für die Ergebnisse gibt, wollte ich über $rows oder $row an die Felder rankommen oder eben anders, falls da noch mehr zur Verfügung steht.
Hast Du Dir denn die Struktur
am 15.06.2015 - 20:29 Uhr
Hast Du Dir denn die Struktur von $rows einmal angesehen, bzw. Dir dieses Array einmal anzeigen lassen? Dazu nimmt man das [do:devel] Modul und läßt sich im Template-File das Array mit dsm($rows); ausgeben. Wenn Du jetzt den View aufrufst, erhältst Du eine aufklappbare Sicht auf dieses Array. Die genaue Struktur Deiner View kenne ich nicht. Ich gehe auch über solche Kontrollausgaben, wenn ich auf einzelne Werte dediziert zugreifen will. Wenn Du dann die Struktur für den Feldzugriff richtig hast, löschst Du den dsm() Aufruf wieder.
Ja, ich hatte das mit dem
am 16.06.2015 - 13:31 Uhr
Ja, ich hatte das mit dem devel-Modul im Laufe der Suche mitbekommen und ausprobiert - im ersten Anlaufe erfolglos, weil $rows in der erwähnten Datei einfach nur den HTML-Code enthält, sprich all die DIV's usw.
Hatte zwischendurch auch mal views-view-fields--colorbox-gallery.tpl.php ausprobiert, kam da aber auch nicht weiter. Hatte u.a. nach Feldbezeichnungen gesucht, um Felder per Name anszupsrechen, aber ein Modul von einer anderen Baustelle der Webseite brachte mich auf den Gedanken, dass es gar nicht nötig ist, weil die Felder in der Reihenfolge durchlaufen werden, wie sie im view definiert sind.
Ich habe es nun hinbekommen und die Datei "views-view-fields--colorbox-gallery.tpl.php" ist auch notwendig, wobei sie zumindest in meinem Fall nicht dynamisch ist, sondern von den 3 Feldern ausgeht, die ich im View ausgebe: Titel, Screenshot Slideshow, Body.
views-view--colorbox-gallery.tpl.php
<div class="row"><div class="panel-group secundary" id="accordion">
...
...
</div>
</div>
views-view-unformatted--colorbox-gallery.tpl.php
<?php foreach ($rows as $id => $row): ?><div class="panel panel-default">
<?php
print $row;
?>
</div>
<?php endforeach; ?>
views-view-fields--colorbox-gallery.tpl.php
<?php $count = '0'; foreach ($fields as $id => $field): ?><?php
if ($count == 0) {
print '<div class="panel-heading">';
print str_replace('[nid]', $row->nid, '<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseTo[nid]">');
print $field->content;
print'</a></h4>';
print '</div>';
}
if ($count == 1) {
if ($row->taxonomy_term_data_node_weight == 1) {
print str_replace('[nid]', $row->nid, '<div class="accordion-body collapse in" id="collapseTo[nid]">');
} else {
print str_replace('[nid]', $row->nid, '<div class="accordion-body collapse" id="collapseTo[nid]">');
}
print '<div class="panel-body">';
print $field->content;
print '</div>';
}
if ($count == 2) {
print '<p>';
print $field->content;
print '</p>';
print '</div>';
}
$count++;
?>
<?php endforeach; ?>
Das Ergebnis passt soweit.
Jetzt sehe ich gerade, dass im zweiten Block HTML-Code ohne "print '...' " verwendet wird. Scheint sowohl mit als auch ohne zu klappen. Was wäre "richtiger"?
Frei stehender HTML-Code ist
am 16.06.2015 - 19:48 Uhr
Frei stehender HTML-Code ist in Template-Dateien normal. Wenn Dein Template jetzt so funktioniert ok. Ich mag nur nicht 3 aufeinander folgende if-Abfragen , die jede für genau einen Zustand treffen. Da verwende ich dann immer ein switch-Statement, da ich das als besser lesbar empfinde (http://www.w3schools.com/php/php_switch.asp). Ist aber auch persönlicher Geschmack.
Ok, danke für den Hinweis.
am 17.06.2015 - 08:42 Uhr
Ok, danke für den Hinweis. Hatte dann nicht weiter geschaut, ob / wie man es durch case-Abfragen o.ä. optimieren kann, war erst einmal froh dass es funktioniert hat :)