Contao: Surf and Edit - Inhalte aus dem Frontend heraus bearbeiten
(Kommentare: 2)
Manche CMS-Systeme (z.B. Magnolia, Red Dot) bieten zur Pflege der Inhalte alternativ oder ausschließlich das "Surf and Edit"-Prinzip bzw. "Inline Editing" oder "Frontend editing"an: Ich navigiere durch die Website (im Vorschau- oder Edit-Modus) und wenn ich eine Seite bearbeiten möchte, klicke ich auf einen Button an Ort und Stelle und es öffnet sich ein Popup, Fenster oder neuer Tab im Browser. Dort kann ich dann diesen Inhalt bearbeiten.
Typolight bzw. Contao bietet das normalerweise nicht an. Eine kleine Änderung in zwei Templates macht dies aber in Grundzügen möglich. Und es ist ausgesprochen praktisch, weil ich dann nicht immer im Seitenbaum herum wühlen muss, um die zu bearbeitende Seite oder den Artikel zu finden.
Hier ein sehr einfacher möglicher Lösungsansatz dazu, den ich in einigen Projekten im Einsatz habe. (Nachtrag: Habe nun erst entdeckt, dass es da eine ausgefeiltere Erweiterung gibt, jetzt auch für Contao 3, siehe Contao Frontend Editor.)
Ich füge in die Template fe_page und mod_article ein bisschen Code ein, so dass ich passende Bearbeiten-Links sehe, so lange ich im Backend eingeloggt bin. Diese Links führen mich ins Backend genau zur aktuellen Seite oder zum entsprechenden Artikel.
Im Einzelnen:
Ich kopiere das Template TL_ROOT/system/modules/core/templates/fe_page.* (Contao 3) bzw. TL_ROOT/system/modules/frontend/templates/fe_page.* (Contao 2) in das Verzeichnis TL_ROOT/templates und bearbeite es. Ich füge die folgenden Zeilen direkt nach dem <body> Tag ein:
Contao 3:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): global $objPage; ?> <div style="position:absolute;top:0;left:0;z-index:1000;"> <a target="_blank" href="/contao/main.php?do=page&act=edit&id=<?php echo $objPage->id ?>&rt=<?php echo RequestToken::get() ?>" title="edit page" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a> </div> <?php endif ?>
Für Contao 2.11:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): global $objPage; ?>
<div style="position:absolute;top:0;left:0;z-index:1000;">
<a target="_blank" href="/contao/main.php?do=page&act=edit&id=<?php echo $objPage->id ?>&rt=<?php echo RequestToken::getInstance()->get() ?>" title="edit page" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a>
</div>
<?php endif ?>
Für Contao 2.9:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): global $objPage; ?>
<div style="position:absolute;top:0;left:0;z-index:1000;">
<a target="_blank" href="/contao/main.php?do=page&act=edit&id=<?php echo $objPage->id ?>" title="edit page" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a>
</div>
<?php endif ?>
Dann kopiere ich das Template TL_ROOT/system/modules/core/templates/mod_article.* (Contao 3) bzw. TL_ROOT/system/modules/frontend/templates/mod_article.* (Contao 2) in das Verzeichnis TL_ROOT/templates und bearbeite es. Ich füge die folgenden Zeilen direkt nach dem ersten <div> Tag ein:
Contao 3:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): ?> <div style="position:absolute;top:0;left:0;z-index:1000;"> <a target="_blank" href="/contao/main.php?do=article&table=tl_content&id=<?php echo $this->id ?>&rt=<?php echo RequestToken::get() ?>" title="edit article" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a> </div> <?php endif ?>
Contao 2.11:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): ?> <div style="position:absolute;top:0;left:0;z-index:1000;"> <a target="_blank" href="/contao/main.php?do=article&table=tl_content&id=<?php echo $this->id ?>&rt=<?php echo RequestToken::getInstance()->get() ?>" title="edit article" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a> </div> <?php endif ?>
Contao 2.9:
<?php if ($_SESSION['BE_DATA']['CURRENT_ID']): ?> <div style="position:absolute;top:0;left:0;z-index:1000;"> <a target="_blank" href="/contao/main.php?do=article&table=tl_content&id=<?php echo $this->id ?>" title="edit article" style="color:#229922;"><img width="12" height="16" style="padding:0 2px" alt="" src="/system/themes/default/images/edit.gif"></a> </div> <?php endif ?>
Dann muss ich noch dafür sorgen, dass im CSS folgendes steht:
.mod_article { position: relative; }
Solange ich nun im CMS-Backend eingeloggt bin und auf der Website navigiere, sehe ich links oben ein Stift-Symbol, das mich bei Klick ins Backend zum Bearbeiten der aktuell angezeigten Seite bringt. Und bei jedem Artikel sehe ich ebenfalls einen Stift, der mich bei Klick ins Backend führt, um genau diesen Artikel zu beabeiten.
Das finde ich ausgesprochen praktisch.
Wenn ich das noch nicht sehe, kann es sein, dass ich im Backend unter Systemwartung noch das Verzeichnis "tmp'" leeren muss. Oder das oben im Code verdrahtete Stif-Icon ist nicht vorhanden. Dann kann ich den Pfad des img-Tags anpassen oder es einfach ersetzen durch den Text "edit" oder so.
Nebenbei: Bei Klick auf den Stift wird immer ein neues Fenster bzw. ein neuer Tab im Browser geöffnet. Damit hat man am Ende ggf. diverse Backend-Seiten offen, was die Contao-Session ggf. etwas durcheinander bringen kann. Nicht wundern, wenn Contao dann mal bei einem Klick auf "zurück" zu einer unerwarteten Seite springt...
Kommentare
Kommentar von Hauge |
Bei Contao 2.11.12:
<?php $this->Import('Environment');
if (sha1(session_id().(!$GLOBALS['TL_CONFIG']['disableIpCheck'] ? $this->Environment->ip : '').'BE_USER_AUTH') == $this->Input->cookie('BE_USER_AUTH')): ?>
Hier INhalt
<?php endif; ?>
<?php else:?>
Bitte loggen Sie sich ein: <a data-lightbox="1000 600" href="contao/main.php">LOGIN</a>
<?php endif; ?>
Kommentar von Tobias |
Für Contao ab 3.5
$GLOBALS['objPage']->id
Einen Kommentar schreiben