Views - Grid Tabellenzelle komplett anklickbar/verlinkt
Eingetragen von Michel (14)am 02.07.2015 - 12:03 Uhr in
Hallo Forum,
ich habe ein View vom Format Grid (3 Spalten) und der Anzeige Fields.
Nun möchte ich erreichen, das eine komplette Tabellenzelle anklickbar ist und nicht nur die Felder innerhalb der Zelle.
Wie stelle ich das an?
Michel
- Anmelden oder Registrieren um Kommentare zu schreiben
Am einfachsten, imdem du die
am 02.07.2015 - 12:21 Uhr
Am einfachsten, imdem du die in den Zellen befindlichen Link-Elemente per CSS auf display:block; height:100%; width:100%; setzt.
Die Idee habe ich verstanden,
am 03.07.2015 - 09:10 Uhr
Die Idee habe ich verstanden, jedoch an der Umsetzung hapert es noch:
Die Zellen sehen ungefähr so aus:
<td class="a"><div class="b 1"><span class="c"><a></a></span></div>
<div class="b 2"><span class="c"><a><img></img></a></span></div>
<div class="b 3"><span class="c"><p></p></span></div>
</td>
http://www.schiraumtechnik.com/de/Produkte
Anklickbar soll die ganze Zelle sein (wie ein großer Button).
Michael
PS: Gibt's beim Antworten keine Vorschau?
.view-produkte .field-content
am 03.07.2015 - 10:10 Uhr
.view-produkte .field-content a {
display: block;
}
.view-produkte .views-field-field-image {
float:left;
}
Habe ich so in die local.css
am 03.07.2015 - 11:25 Uhr
Habe ich so in die local.css eingepflegt. Tut aber nicht.
Michael
Du hast unter Leistung -->
am 03.07.2015 - 13:29 Uhr
Du hast unter Leistung --> Bandbreitenoptimierung: CSS Dateien aggregieren und komprimieren angeklickt. Entweder schaltest du das mal vorübergehend ab oder du musst jedes Mal den Cache löschen, um die Änderungen zu sehen.
Stimmt.Jetzt ist die
am 03.07.2015 - 17:31 Uhr
Stimmt.
Jetzt ist die anklickbare Fläche schon wesentlich größer - aber noch nicht die gesamte Zelle.
Lässt sich da in Views noch was herausholen, in der Art von
<td><a>...</a></td>Oder ist Javascript das Mittel der Wahl?
Hier gesehen
am 03.07.2015 - 17:39 Uhr
Hier gesehen (http://www.tiptom.ch/homepage/faq.html?q=zellelink)
...mit Javascript:
<td onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='http://www.example.com/';">würde schon helfen, nur wie bzw. wo muss ich das eintragen und wie ersetze ich www.example.com mit meinem Ziel?
Gibts dafür vieleicht ein Modul?
Den Link als Box auszuzeichnen wird wohl nicht genügen, da ja mehrere Elemente in einer Zelle sind... oder?
Kannst Du mal einen Link
am 04.07.2015 - 11:17 Uhr
Kannst Du mal einen Link zeigen?
Das muß mit CSS gehen.
Michel schrieb Den Link als
am 04.07.2015 - 11:40 Uhr
Den Link als Box auszuzeichnen wird wohl nicht genügen, da ja mehrere Elemente in einer Zelle sind... oder?
Wenn alle Elemente in der View als Link ausgegeben werden, funktioniert das. Wenn reiner Text dazwischen ist, nicht.
Die Alternative wäre, das Markup im View Template anzupassen. Guck mal in der View unter Erweitert --> Theming. Da findest du einige Standard- Templates. Das Row Style Output Template kannst du dann entsprechend anpassen, in dem du eine neue Template Datei im Template Verzeichnis deines Themes erstellst, und sämtliche Felder in einen Link einschließt. Hier mal ein älteres Beispiel von mir:
<?php foreach ($fields as $id => $field): ?><?php if (!empty($field->separator)): ?>
<?php print $field->separator; ?>
<?php endif; ?>
<a style="display:block" href="/node/<?php print $fields['view_node']->raw; ?>">
<?php print $field->wrapper_prefix; ?>
<?php print $field->label_html; ?>
<?php print $field->content; ?>
<?php print $field->wrapper_suffix; ?>
</a>
<?php endforeach; ?>
$fields['view_node']->rawliefert in meinem Fall die jeweilige Node IDDamit ist der gesamte Output als ein Link klickbar.
montviso schrieb Kannst Du
am 04.07.2015 - 11:40 Uhr
Kannst Du mal einen Link zeigen?
Hat der doch oben: http://www.schiraumtechnik.com/de/Produkte
Hat der doch Danke für die
am 04.07.2015 - 11:58 Uhr
Hat der dochDanke für die Sehhilfe...;-)
Entweder so wie Michel
am 04.07.2015 - 12:09 Uhr
Entweder so wie Michel schreibt im eigenen Template.
Oder ein zusätzliches Feld anlegen und dort die Platzhalter der vorherigen Felder in einen Link bauen.
Also so:
<a href='node/[nid]'>[field1] [field2] [field 3]</a>Wenn es nicht gefällt, daß div- in a-Tags geschachtelt ist, kann man die DIV-Container in den einzelnen Feldern der View wegwünschen und im zusammengesetzten Feld so aufbauen, wie man das will.
Probleme mit verschachtelten Links kann es geben, wenn man ein Body Feld einbindet in dem schon ein Link ist.
Aber das sieht ja nicht danach aus.