News-Teaser: Weiterlesen direkt an den Teasertext ran?

**Sebastian Opitz** · 08.02.2012, 20:29

Guten Abend,

ich möchte den Weiterlesen-Link direkt am Ende jedes News-Teaser-Textes haben und nicht durch einen Absatz trennen. Habe deswegen heute versucht, PHP zu lernen, denn weder das Forum noch meine CSS-Kenntnisse brachten mich zum Ziel. Ich benutze das News-Latest-Template in C10.4.

Jemand einen guten Hinweis für mich?

Danke, Sebastian

**pcartist** · 08.02.2012, 22:38

Hallo Sebastian,

am einfachsten erstellst Du ein eigenes Template auf Basis des news_latest.xxx

Ich habe mal kurz das .html5 umgebastelt. So sollte es funktionieren. Ganz unten ist der Absatz mit Ausgabe der Variablen $this->more Dort wird der Link ausgegeben. Versuche einfach mal das hier:

PHP-Code:


<div class="layout_latest block<?php echo $this->class; ?>">

<?php if ($this->hasMetaFields): ?>

<p class="info"><time datetime="<?php echo $this->datetime; ?>"><?php echo $this->date; ?></time> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>

<?php endif; ?>

<?php if ($this->addImage): ?>

<figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

<?php if ($this->href): ?>

<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">

<?php endif; ?>

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>">

<?php if ($this->href): ?>

</a>

<?php endif; ?>

<?php if ($this->caption): ?>

<figcaption class="caption"><?php echo $this->caption; ?></figcaption>

<?php endif; ?>

</figure>

<?php endif; ?>

<h2><?php echo $this->text ? $this->linkHeadline : $this->newsHeadline; ?></h2>

<div class="teaser">

<?php echo $this->teaser; ?> 

<?php if ($this->text): ?>

<?php echo $this->more; ?>

<?php endif; ?>

</div>

</div>

Viel Erfolg!

**bizon** · 08.02.2012, 22:53

Es ist keine Template-Änderung nötig.

Seit Contao 2.10 hat der Teaser ein p-Tag. Der CSS-Selektor heißt also:

Code:

.teaser p {margin-bottom:0;}

**Sebastian Opitz** · 09.02.2012, 06:30

Danke für eure Antworten.

@bizon: Mit dem Margin-Bottom rückt das "Weiterlesen" ganz nah an den Teasertext, allerdings nicht mit hoch auf die letzte Teaserzeile, genau das will ich aber.

@pcartist: Wenn ich das Template nach deinem Vorschlag ändere, gibt er trotzdem folgende HTML-Struktur aus:

Code:

<div class="teaser">
<div id="idTextPanel" class="jqDnR">Teasertext
</div>
<span class="more">
<a title="Den Artikel lesen: text" href="bla.html">Weiterlesen
</a>
</span>
</div>

Da ist also noch ein div-Container, der für diesen Absatz sorgt. Ich finde im Template auch keine Zeile, die diesen Container hervorruft, weiß also gar nicht, woher der kommt. Jemand eine weitere Lösung?

**bizon** · 09.02.2012, 07:48

allerdings nicht mit hoch auf die letzte Teaserzeile, genau das will ich aber

Und warum schreibst du das nicht schon in der Eröffnung deines Threads?

Wie ich oben schon geschrieben habe, hat der Teaser seit Contao 2.10 automatisch ein p-Tag. Das p wird nicht im Template, sondern vom TinyMCE-Editor erzeugt und sorgt natürlich für einen Zeilenumbruch und hat außerdem die entsprechenden p-CSS-Auszeichnungen.

Und wenn man jetzt noch eine Suchmaschine benutzt und folgendes eingibt: contao p im teaser, erhält man unter anderen diesen Link

**pcartist** · 09.02.2012, 07:58

Und warum schreibst du das nicht schon in der Eröffnung deines Threads?

Hat er doch! Dennoch ist Dein Link sehr hilfreich. Ich gehe aber davon aus, dass es nach meiner Template-Anpassung mit CSS zu lösen ist.

Code:

.teaser div {display:inline;}

Irgendwie sowas in der Art

**bizon** · 09.02.2012, 08:02

Zitat von pcartist

dass es nach meiner Template-Anpassung mit CSS zu lösen ist.

Geht nicht, weil du damit nicht in das .teaser p reinkommst.

**Sebastian Opitz** · 09.02.2012, 08:56

Danke für den Link, allerdings hatte mir auch das nichts gebracht, denn auch hier wird immer aus der Variable $this->teaser ein neuer div-Container geparst, sodass p.more nie rankommt. Ich habe das Gefühl, dass auch andere Threads dieser Art nicht gelöst wurden. Aber der Hinweis von pcartist hats jetzt gebracht!

Darum nochmal meine Lösung zusammengefasst, auch für Greenhorns wie mich:

Ziel: Direkt am Ende des Teasertextes ohne Absatz einen Weiterlesen-Link.

Dazu ein neues Template erstellen aus einem beliebigen Nachrichten-Template (z.B. news_latest.html5) und dieses umschreiben:

Statt:

PHP-Code:


<div class="teaser">

<?php echo $this->teaser; ?> 

</div>

<?php if ($this->text): ?>

<p class="more"><?php echo $this->more; ?></p>

<?php endif; ?>

Schreiben:

PHP-Code:


<div class="teaser">

<?php echo $this->teaser; ?> 

<?php if ($this->text): ?>

<?php echo $this->more; ?>

<?php endif; ?>

</div>

Und ergänzend als CSS anlegen:

Code:

.teaser div,
.teaser p
{
display:inline;
}

Vielen Dank an euch beide. Sollte jemand von den Profis eine kürzere Variante kennen, ist sie hier sicher willkommen. Meinerseits ist das Problem gelöst.

**bizon** · 09.02.2012, 09:02

Gut gelöst!

@pcartist: Respekt

**qba** · 05.04.2012, 10:07

Danke Sebastian. Deine Lösung hat mir gerade weitergeholfen :-)

**zoomzoom** · 23.05.2012, 21:48

Auch mir hat Deine Lösung gerade weitergeholfen. Ich bin blutiger Laie, habe es aber dennoch geschafft, die Änderungen durchzuführen und schwupps war der Link am Ende des Teasertextes. Ohne Absatz.

Aber könnte man auch eine Lösung finden, damit der komplette Link (ich habe noch "weiterlesen...") auf jeden Fall in einer Zeile bleibt? Momentan gehen z.b. die Punkte in eine neue Zeile, wenn der Teasertext zu lang ist. Vielleicht durch Begrenzung der Anzahl Zeichen im Teasertext?

Vielleicht gibt es ja eine Lösung und jemand könnte Sie mir genauso gut erklären wie Sebastian seine Lösung.

Dirk

**pcartist** · 24.05.2012, 08:53

Hallo Dirk,

damit der Linktext und die Punkte in einer Zeile bleiben, kannst Du dem Link die CSS-Anweisung

Code:

white-space: nowrap;

verpassen. Damit sollte das Problem beseitigt sein. Damit Du den Teasertext in der Länge begrenzen kannst, musst Du meines Wissens das Template nochmal bearbeiten.
Das könnte mit

PHP-Code:


<?php echo substr($this->teaser, 0, 999);?>

klappen. Diese Lösung ist aber gerade aus der Hüfte geschossen und ungeprüft

Übrigens ist natürlich die "999" mit der gewünschten Länge der Zeichen zu ersetzen.

Viele Grüße aus Treporti

**zoomzoom** · 24.05.2012, 11:18

Hallo pc artist,

vielen Dank für Deine Tips. Wenn ich die CSS Anweisung anwende, bleibt vom Teaser nur noch eine Zeile stehen, der Link geht in die nächste Zeile. Vielleicht sollte ich für den reinen Link einfach die Schriftart und -größe ändern. Bisher gelingt es mir aber nicht. Überall wo ich bislang ausprobiert habe, wird entweder auch die h2 vom Teaser mit abgeändert oder es passiert garnichts.

Kannst Du vielleicht einen Tip geben?

Die Begrenzung des Teasertextes werde ich später versuchen, wenn Font-Family und size abgeändert sind.

Dirk

**pcartist** · 25.05.2012, 11:15

Hallo Dirk,

als erstes muss ich Dir dringend zur Nutzung des FireBug im FireFox raten, denn damit wirst Du bei solchen Problemen ans Ziel kommen. Ich denke, Du wedest die CSS-Anweisungen auf den gesamten Teasertext an.

Je nach verwendetem Modul (short / latest) sollte Deine Anweisung so ähnlich aussehen:

Code:

.layout_latest p.info {
  white-space: nowrap;
  font-size: 10px;
}

oder bei befolgen der Änderungen oben

Code:

.layout_latest p.more {
  white-space: nowrap;
  font-size: 10px;
}

Wenn das nicht funktioniert, kannst Du auch mit !important alle anderen Anweisungen, die auf dieses Objekt angewendet werden außer Kraft setzen. Würde ich aber nur im Notfall bzw. zum testen nehmen.

**Swiper** · 16.08.2012, 23:31

Jetzt hänge ich nach meinem Update von 2.9 auf 2.11 beim gleichen Problem. Sicherlich wird der ier gezeigte Fix funktionieren. ABER warum geht man nicht das Problem an sich an? Ich habe aus dem Teaserfeld (tinyMCE) ein Teaserfeld(Textarea) gemacht. Nur um den Redakteuren die Möglichkeit zu nehmen ausversehen HTML-Text mit rein zu kopieren. Jetzt dachte ich das ich damit auch das <p> Problem mit lösen konnte. War aber nicht so.

Ich muss zugeben, dass ich micht jetzt nur kurz mit diesem Probelm beschäftigt habe weil ich erst einmal wichtigeres machen wollte und mich damit erst zum Schluss beschäftgen wollte. Aber woher komm denn jetzt das <p> wenn es bei einer Textarea auch vorhanden ist?

Ich habs jetzt nicht getestet. Aber ich glaube mit einem strip_tags gehts am schnellsten. Funzt natürlich nur solange man eh keine HTML-Tags im Teaser nutzt. Sonst muss man sich was anderes einfallen lassen.

Cu Swiper

**Andreas** · 17.08.2012, 01:49

Zitat von Swiper

...ABER warum geht man nicht das Problem an sich an?...
...Aber woher komm denn jetzt das <p> wenn es bei einer Textarea auch vorhanden ist?...

Welches Problem?

Kommt das P nicht aus dem Template? field type=textarea dürfte ohne RTE eigentlich kein P in der DB speichern.

ps Strings kürzen ohne im Wort abzubrechen kann man mit den Methoden substr() und substrHtml() aus der Klasse String. Anwendung $this->String->substr(string, length, delimiter). Evtl. String vorher importieren. $this->import('String'). strip_tags() und einiges mehr wird damit schon ausgeführt. Parameter kann man in String.php nachsehen.