Pool von Überschriften - Wie setze ich Anker zu den Überschriften der Artikel?

Hallo, liebe Contao-Gemeinde,

nun habe ich mich schon durch die Suchfunktion, das Contao-Wiki und 2 Contao-Bücher gewühlt, aber irgendwie bin ich nicht fündig geworden. Folgende Herausforderung habe ich: Ich habe auf der Webseite oben ca. 6 Überschriften und möchte diese jeweils mit einem Sprungbefehl versehen, so dass ich von dem Überschriften-Pool zu der jeweiligen Überschrift des Artikels springen kann.

Jetzt ist aber die Überschrift im TinyMCE gar nicht im Quelltext zu sehen und ich habe dort im Eingabefeld m. E. auch gar nicht die Möglichkeit, irgendwas zur Verankerung zu schreiben. Wie ich das in einer mit einem Editor gestalteten Webseite mache, ist mir klar, nur bei Contao scheint das anders zu laufen. Ich bekomme ja nicht mal diesen Überschriften-Pool dazu, zu einem Link zu werden. Und die Überschriften der Artikel auch nicht.

Irgendwie stehe ich da auf der Leitung und habe keine Idee, wie ich das realisieren kann. Hat jemand von Euch eine Idee - bin für jeden Tipp dankbar.

Liebe, sonnige Grüße,
Sunnygarden

Wo wird denn dein Pool an Überschriften generiert? Über den tinyMCE oder über ein anderes Inhaltselement oder über ein Modul?

Ich hab das so gemacht, dass ich die Überschriften im TinyMCE generiert habe, und zwar da, wo der Text normalerweise reinkommt. Oder wäre es besser, die Überschriften als einzelne Elementtypen zu generieren? Aber wie kann ich denn dann daraus einen Anker machen?

Gruß,
Sunnygarden

Wenn du für deine 6 Überschriften ein Inhaltselement vom Typ Hyperlink nimmst kannst du im Link Feld den Anker setzen.
Z.B zur ID des Jeweiligen Artikels: #meineArtikelId

Wenn es die Überschrift im Artikel sein soll braucht diese eine eindeutige ID. Das geht mit Überschrift als Inhaltselement.
Dann einfach den Anker auf diese ID setzen.

Grüße,
Tim

ps. wenn es mit dem reinen Anker Befehl nicht geht, dann auf jeden Fall in Kombination mit einem InsertTag für den href der aktuellen Seite.
So etwa:
{{link_url::SeitenID}}#meineArtikelID

oder

{{env::request}}#meineArtikelID


pps. Die Methode geht natürlich überall wo mit anchors arbeitest. Muss dann nr in den href rein.





Sent from my iPhone using Tapatalk

Hallo Tim G,

nun habe ich das ausgiebig probiert, Deine Tipps umzusetzen, aber irgendwie fehlen mir noch ein paar "Brückensätze". Also, was hab ich gemacht? Ich habe für jede Überschrift vom Artikelmenü aus einen eigenen Elementtyp "Hyperlink" angelegt. Dann habe ich bei "Linkadresse" beispielsweise {{env::request}}#594 (= die Adresse der Überschrift über dem anzuspringenden Artikel) reingesetzt und bei Link-Text den Namen des Links.

Dann habe ich von dem anzuspringenden Artikel die Überschrift gelöscht und ein neues Inhaltselement "Überschrift" über dem Artikel eingefügt, damit die Überschrift eine eindeutige ID hat (in diesem Falle 594). Es passiert: gar nichts. Kein Sprung.

Ich habe es mit {{link_url::SeitenID}}#594 im Hyperlink probiert, wobei ich bei SeitenID nur die Zahl der entsprechenden Seite eingegeben habe. Passiert auch kein Sprung.

Und wenn ich beim Hyperlink nur #594 eingebe, rfolgt ein Sprung, aber der erfolgt auf die Startseite und nicht auf die, auf der sich der Hyperlink befindet.

Was hab ich falsch gemacht? Und könntest Du mir das, was Du mit "muss dann nur in den href rein" meinst, bitte noch erklären?

Danke schon mal im Voraus und liebe Grüße,
Sunnygarden

Du musst als anker die id des jeweiligen elements aus dem quellcode nutzen.

dann klappts.

Ich kann dir nachher ein Beispiel erstellen.

Mit dem inserttag {{link_url}}#anker kannst du seitenübergreifende Anker erstellen. Das meinte ich mit dem href.


Sent from my iPhone using Tapatalk

Hier steht eigentlich alles drin:
http://de.selfhtml.org/html/verweise/projektintern.htm

unter "Anker definieren und Verweise zu Ankern" ist alles genau erklärt. Contao macht da keine Ausnahme.

Hallo Tim G,

danke für die Tipps. Jetzt funktionieren die Sprungbefehle. Mit {{env::request}}#MeineID beim Hyperlink aus meinem Überschriftenpool und dem Anker vor dem Text im TinyMCE hat es geklappt. Das sieht allerdings etwas doof aus, denn ich hätte es lieber, wenn die Überschrift des Artikels angesprungen wird. Nur: Wenn ich über "Artikel" ein Element vom Typ Überschrift generiere, kann ich ja nicht wie im TinyMCE einen Anker setzen, sondern habe dort nur die Möglichkeit, eine CSS-Klasse und einen Abstand zu vergeben. Wie könnte ich denn da den Anker setzen?

Außerdem möchte ich gern einen "Nach oben"-Sprungbefehl am Ende der Seite machen. Das ist kein Problem, den einzufügen, aber auch hier sehe ich nur die Möglichkeit, den Anker im TinyMCE zu setzen, d. h. beim Beginn des ersten Artikels. Gibt es denn eine Möglichkeit, einen Anker so zu setzen, dass die Webseite so angesprungen wird, dass oben der Header zu sehen ist? Wie müsste ich denn das machen?

Danke schon mal im Voraus für eine oder mehrere Antworten.

Gruß,
Sunnygarden

Hi,
erstmal gut, dass das Grundprinzip klappt. Aber der Grundgedanke ist noch nicht richtig verstanden. Du benötigst eigentlich nur den href="meineURL"#meineAnkerID.
Das {{env::request}} stellt "meineURL" #meineAnkerID ist die CSS id.
Das beides in <a href="meineURL"#meineAnkerID>Mein Anker</a> wird auch im TinyMCE richtig dargestellt. Zur Not direkt im HTML schreiben.

Sprung zu Überschriften:
Inhaltselement->Überschrift und dem eine ID geben. (das erste Feld in Experten-Einstellungen. Das 2. Feld ist eine 'class') (siehe screenshot_2)

"Nach oben":
Gibt es in Contao als Inhaltselement für Artikel: "Top-Link".
Der springt zur body ID : 'top', die standardmäßig dem body übergeben wird.

Anker auf gleicher Seite:
Um einen Anker im TinyMCE innerhalb der aktuellen Seite zu setzen: (siehe tinyMCE_anker1)
Den Textblock markieren und einen Link einfügen. Als Adresse reicht der Ankerbefehlt. Contao ergänzt das inserttag automatisch (Contao 2.9.3)

Anker auf entfernter Seite:
Der Weg ist der gleiche, lediglich der Pfad ändert sich. Mit inserttags kein Problem und der TinyMCE macht`s einem auch leicht. Contao Seite wählen -> inserttag wird gesetzt -> Anker dahinter. (siehe: tinyMCE_anker2)
(du könntest auch auf andere Webseiten damit verankern)

Eigene Anker als Modul:
Das Modul "Eigener HTML-Code" eignet sich dafür ganz gut. (siehe: screenshot_3)
Das ist der kürzeste Weg zu einem Anker innerhalb der gleichen Seite. (Das Gleiche erstellt der TinyMCE in den oben dargestellten Wegen)

Grüße,
Tim

Kannst Dir auch mal diese Erweiterung angucken:
http://www.contao.org/erweiterungsli...000069.de.html

Hallo Tim,

das ist ein Super-Tutorial, das Du mir da geschrieben hast. Vielen herzlichen Dank! Jetzt springt alles dorthin, wo es hin soll.

Ein klitzekleines Problemchen habe ich noch:
Den Toplink habe ich, da mein Freund den gern als Grafik haben möchte, getreu dem Thread http://www.contao-community.de/showt...hlight=toplink mit folgendem eigenen HTML-Code gemacht:

PHP-Code:

---

<a title="Zum Seitenanfang" href="{{env::request}}#oben"><img src="tl_files/bilder/pfeil3.gif" alt="Zum Seitenanfang" /></a> 


---

Und da passiert jetzt Folgendes: Oben links am Rand des kleinen Bildes befindet sich ein Unterstrich, der der eigentliche Sprungbefehl ist. Wenn man direkt auf das Bild klickt, springt da nichts und ich weiß nicht, wie das kommt. Ich weiß auch nicht, wie ich den Strich wegkriege. Irgendwie müsste ich dem Strich jetzt sagen, er soll weg sein und das Bild soll stattdessen seine Sprungfunktion übernehmen. Bloß wie?

Bin für jede Anregung sehr dankbar.

Liebe Grüße,
Sunnygarden

Ich seh erstmal keinen Fehler, aber ich hab grad nur das iphone zur Hand.
Ich guck gleich zu Hause drauf.

Grüße


Sent from my iPhone using Tapatalk

Was wahrscheinlich geht ist:
Inhaltselement Hyperlink->Link Adresse: #top -> Linktext freilassen und einen Bildlink erstellen.

Das wäre ne Möglichkeit innerhalb Artikel.

Aber du brauchst das als Modul fürs Seitenlayout, oder? Damit es auf jeder Seite kommt.


Sent from my iPhone using Tapatalk

So hier als grafischer Top-Link.
Module->Eigener HTML-Code

Code:

---

<div id="topLink" class="ce_hyperlink">
<a href="{{env::request}}#top">{{image::tl_files/themes/default/images/arrow_1.png}}</a>
</div>

---

Ich bin Freund von inserttags, daher nutze ich für das Bild den {{image::*}} inserttag, da dieser auch noch ein paar Optionen bereithält. Der inserttag erstellt das komplette <img> Gerüst.
Siehe hier: http://www.contao.org/inserttags.html

(Pfad natürlich ändern ;) ) Das umschließende DIV ist nicht nötig, machts aber eleganter fürs css.

Grüße

Hallo Tim,

juchhu! Ich habe es hingekriegt!!! Da ich die Toplinks nur für die Linkseiten brauchte, konnte ich auf das Modul verzichten und habe es mittels Hyperlink gemacht. Wunderbar! Du hast mir richtig dolle geholfen und dafür danke ich Dir.Und ich hoffe und wünsche, dass Deine Anker-Ausführungen noch vielen anderen helfen, die noch nicht so versiert mit Contao sind.

Liebe Grüße,
Sunnygarden

:) Bestens!

Grüße aus Berlin,
Tim

Eine Verlinkung klappt übrigens nicht nur mit Überschriften sondern auch mit anderen Elementen.
Einfach unter den "Experten-Einstellungen" eine ID vergeben und danach mit

Code:

---

{{link_url::page_id}}#ID

---

darauf verlinken.

Funktioniert das auch von "außen" ?
Ich habe einer Unterüberschrift in den "Experteneinstellungen" eine ID gegeben.
Das hat auch funktionier, wenn ich mit "Element untersuchen mir das anschaue, dann bekomme ich

HTML-Code:

---

<h3 class="ce_headline" id="idname">Überschrift</h3>

---

angezeigt.

Der Aufruf
www.meineSeite.de/inhalt.html#idname
scheint aber nicht zu funktionieren. Ich lande auf der Seite, aber ganz oben.
Mache ich was verkehrt?