[gelöst] Wie Titel, Teaser und mehr auf Startseite klickbar machen?
Eingetragen von Raging Rookie (3)am 16.03.2013 - 12:16 Uhr in
Hallo zusammen,
ich möchte für Drupal 7 eine responsive Seite mit nur 5 Unterseiten erstellen.
Mein Problem: Wenn ich die Unterseiten mit Titel, Anrisstext / Teaser und mehr-Link auf der Startseite anzeigen lasse, sind standardmäßig nur Titel und "mehr" als Link aktiv. Ich möchte aber den gesamten Artikel, also Titel, Teaser und mehr-Link, wie einen Button klickbar machen.
Anstelle des mehr-Links hätte ich auch gerne eine Grafik.
Mir ist überhaupt nicht klar, wo ich das href-Tag platzieren muss, damit ich so einen "Button" bekomme. Und wie ich den mehr-Textlink durch eine Grafik ersetzen kann.
Ziel der Übung:
Da die Struktur der Seite nicht gerade komplex ist, möchte ich auf eine Navigation verzichten.
Die User sollen über den Content der Startseite navigieren: Von der Startseite springt ein User in eine Unterseite und über ein Home-Taste wieder auf die Startseite. Ziemlich ähnlich wie in einer App.
Als responsives Theme verwende ich ZEN, zu dem ich ein eigenes Sub-Theme angelegt habe.
Mit Drupal arbeite ich schon länger, jetzt das erste Mal als Themer mit rudimentären HTML- und CSS-Kenntnissen.
Danke schon mal für Eure Tipps!
- Anmelden oder Registrieren um Kommentare zu schreiben
Raging Rookie schriebAls
am 17.03.2013 - 12:41 Uhr
Als responsives Theme verwende ich ZEN, zu dem ich ein eigenes Sub-Theme angelegt habe.....das erste Mal als Themer mit rudimentären HTML- und CSS-Kenntnissen.
Das ist eine ungünstige Konstellation ;). Aber egal, fangen wir an. Um die Teaser individuell zu gestalten, erstellt man am besten eine node--teaser.tpl.php Datei, um die Standards zu überschreiben. Dafür braucht es 2 Schritte:
Schritt 1: Die Datei node--teaser.tpl.php
Im Verzeichnis deines subthemes kann ein Ordner templates vorhanden sein. Wenn kein Ordner templates vorhanden ist, erstellst du diesen. Im templates Ordner erstellst du eine Datei mit dem Dateinamen node--teaser.tpl.php ( mit zwei Minuszeichen!) mit folgendem Inhalt:
<div class="teaser-container <?php print $classes; ?>"<?php print $attributes; ?>>
<div class="teaser-content">
<h2 class="teaser-title">
<?php print l($title, 'node/'.$nid, array('html'=>TRUE)); ?>
<?php if($sticky): ?>
<span class="teaser-sticky"><?php print t($sticky_text); ?></span>
<?php endif; ?>
</h2>
<?php if ($display_submitted): ?>
<div class="teaser-created">
<div class="teaser-created-month">
<?php print t(date('M',$node->created)); ?>
</div>
<div class="teaser-created-day">
<?php print date('d',$node->created); ?>
</div>
</div>
<?php endif; ?>
<div class="teaser-text">
<?php
print render ($content['comments']); //kannst du in hide umwandeln, wenn du die nicht brauchst
hide ($content['links']); // werden nicht angezeigt, weil weiter unten spezifiert
print render ($content['field_tags']); // kann in hide umgewandelt werden
?>
<!--Das ist die Verlinkung des Teasertexts-->
<div class="teasertextlink"><a href="<?php print $node_url; ?>"><?php print render ($content); ?></a></div>
</div>
</div>
<div class="teaser-infos">
<?php if ($display_submitted): ?>
<strong class="teaser-author"><?php print t('Posted By'); ?></strong> <?php print $name; ?>
<?php endif; ?>
<!--über die Klasse .teaser-readmore kannst du den "weiter lesen" Link easy mit CSS nach belieben stylen-->
<span class="teaser-readmore"><?php print l(t('read more'), 'node/' . $nid, array('attributes' => array('class' => t('node-readmore-link'))));?> </span>
</div>
</div>
Meine Kommentare im Code kannst du natürlich rausnehmen und die Klassen beliebig anpassen.
Schritt 2: Die Preprocess Funktion:
Damit die node--teaser.tpl.php eingebunden wird, brauchen wir eine Preprocess- Funktion:
function name_deines_subthemes_preprocess_node(&$vars){
// $vars['sticky_text'] = theme_get_setting('sticky_text');
$type = $vars['type'];
if ($vars['teaser']) { // custom teaser templates
$vars['theme_hook_suggestions'][] = 'node__teaser';
}
if ($vars['teaser'] && $vars['type']) {
$vars['theme_hook_suggestions'][] = 'node__' . $type . '__teaser';
}
}
Diese Funktion fügst du in die template.php deines Subthemes in deinsubtheme/template.php ein. Wenn die Datei nicht vorhanden ist, musst du diese im Hauptverzeichnis des Subthemes anlegen. In der ersten Zeile muss name_deines_subthemes durch den Namen deines Subthemes ersetzt werden!
Danach den Cache leeren! Wenn du jetzt die z.Bsp. die Startseite aufrufst, ist der Teasertext mit dem jeweiligen Node verlinkt. Den Read More- Button baust du dir mit CSS.
Gutes gelingen!
oder ein frontview erstellen
am 17.03.2013 - 13:52 Uhr
oder ein frontview erstellen und dort die ausgabe übersteuern. (so werden andere teaser nicht überschrieben)
Da er die Seite für
am 17.03.2013 - 17:41 Uhr
Da er die Seite für Smartphones optimieren will, würde ich möglichst auf zusätzliche Views verzichten. Das Handynetz ist halt vieler Orts immer noch sehr langsam. Davon abgesehen wird es bei bei 'ner 6- seitigen Page wohl kaum weitere Teaser geben.
Stimmt, die Ausgangslage ist
am 18.03.2013 - 20:18 Uhr
Stimmt, die Ausgangslage ist nicht optimal, aber man wächst ja mit seinen Aufgaben :-)
Dank deiner Anleitung bin ich schon ein gutes Stück weiter! Herzlichen Dank dafür!!
Der Teaser-Text ist jetzt zusätzlich zum Teaser-Titel und mehr-Text verlinkt.
Das Bessere ist wie immer der Feind des Guten: Ich möchte dahin kommen, dass der Teaser noch button-artiger wird.
Bin ich total auf dem Holzweg, wenn ich annehme, dass ich was Button-artiges bekomme, wenn ich in der node--teaser.tpl.php mit dem href-Tag gewissermaßen den gesamten Teaser, also inkl. teasertitel, teasertext und read more, umschließe?
So ähnlich:
<body><a href="http://www.yahoo.de">
<div style="background:silver; padding:20px">
<h1>Überschrift</h1>
<p>Absatz</p>
</div>
</a>
</body>
Kann das funktionieren?
Das geht auch
am 18.03.2013 - 21:42 Uhr
das Template muss dann noch angepasst werden, damit du die Links nicht verschachtelst. Mach's mal so:
<div class="teaser-container <?php print $classes; ?>"<?php print $attributes; ?>>
<div class="teaser-content">
<a href="<?php print $node_url; ?>">
<h2 class="teaser-title">
<?php print $title?>
<?php if($sticky): ?>
<span class="teaser-sticky"><?php print t($sticky_text); ?></span>
<?php endif; ?>
</h2>
<?php if ($display_submitted): ?>
<div class="teaser-created">
<div class="teaser-created-month">
<?php print t(date('M',$node->created)); ?>
</div>
<div class="teaser-created-day">
<?php print date('d',$node->created); ?>
</div>
</div>
<?php endif; ?>
<div class="teaser-text">
<?php
hide ($content['comments']);
hide ($content['links']);
hide ($content['field_tags']);
?>
<!--print render($content);-->
<div class="teasertext"><?php print render ($content); ?></div>
</div>
</div>
<span class="teaser-readmore"><?php print 'read more'; ?></span></a>
<div class="teaser-infos">
<?php if ($display_submitted): ?>
<strong class="teaser-author"><?php print t('Posted By'); ?></strong> <?php print $name; ?>
<?php endif; ?>
</div>
</div>
und dann per CSS:
.teaser-container .teaser-content { background: silver; padding:......;}Klasse, deine Lösung war
am 19.03.2013 - 17:59 Uhr
Klasse, deine Lösung war genau das, wonach ich gesucht habe! Ganz besonders herzlichen Dank dafür!
Ich habe das href-Tag noch vor
<div class="teaser-content">gestellt und habe damit meine klickbaren Buttons.glycid, danke fürs Wachsen-helfen :-)
Der jetzt weniger raging Rookie
Raging Rookie schrieb Ich
am 20.03.2013 - 10:11 Uhr
Ich habe das href-Tag noch vor
<div class="teaser-content">gestellt und habe damit meine klickbaren Buttons.Oder so. Naja, nun ist ja alles in Butter. Bidde schön ;)
gleiches Problem
am 23.11.2014 - 22:07 Uhr
hi, ich greif den Threat mal auf,
da ich im Prinzip das gleiche vorhabe, benutze das Bartik-Theme als Vorlage und habe gestern schon mit der node--[inhaltstyp].tpl.php rumgespielt
logisches Problem beim benutzen von
<a href="<?php print $node_url; ?>">sowohl im Teaser als auch auf der Inhaltstyp Seite wurde der Text als Link dargestellt.Das mit der node--teaser.tpl.php ist natürlich super und habe es auch gleich mal versucht anzuwenden, klappt aber leider nicht wie gehofft.
Der Teasertext wird nicht als Link dargestellt. Hab das jetzt nochmal mit der node--[inhaltstyp].tpl.php versucht und kurioser klappt die verlinkung mit dem Teasertext auch nicht mehr... aber bei dem Inhaltstyp wird der Text verlinkt ??
mit Firebug sieht es ungefähr so aus
<a href="/drupal/test"> </a><div class="teasertext">
<a href="/drupal/test"> </a>
<div class="teasertext">
<a href="/drupal/test"> </a>
der inhaltstyp wird super verlinkt
<a href="/drupal/test">
<div class="beispiel">
</div>
</a>