Schnellnavigation:

Kategorien

« September 2018»
S M T W T F S
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

Letzte Nachrichten

DSGVO
26.05.2018 18:39
Trackingtools und Datenschutzerklärung
14.03.2014 23:07
1:n und n:1 Relationen in Extbase
06.12.2013 12:04
Erste Abmahnungen wegen Google Analytics
04.10.2013 12:11

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

Zur Zeit wird gefiltert nach: Backend
Filter zurücksetzen

31August2010

Frontend Editing

Ausgehend von einem Artikel bei expertinnen-web.de habe ich mal versucht, das Frontend-Editing in einem meiner Projekte zu implementieren. Dabei hat sich schnell herausgestellt, dass man ein paar Schritte anders machen muss, wenn TemplaVoila anstatt Automake-Template verwendet wird.

Zuerst gehe ich ähnlich vor und erstelle die verschiedenen User und Gruppen:

User und Gruppen incl. User-TSconfig

Zunächst der normale Weg im Backend: Ich richte eine Backend-Gruppe namens “redaktion” ein und lege alle Rechte fest, die diese Gruppe haben soll. Dabei regle ich wie üblich über die Option “Zugriff” in der “Web”-Palette welche Rechte diese Gruppe bei einzelnen Seiten haben soll (lesen, editieren, löschen, neue Seiten anlegen etc. )

Über das Seiten-TSconfig (der root-Seite) lege ich fest, welche Rechte neu erstellte Seiten bekommen:

  1. # Eigentuemer
  2. TCEMAIN.permissions.userid = 5
  3. # Gruppe immer Redaktion:
  4. TCEMAIN.permissions.groupid = 1
  5. # Gruppe bekommt immer alle Rechte
  6. TCEMAIN.permissions.group = 31

Dadurch vermeide ich, dass die Mitglieder der Gruppe “redaktion” Seiten, die von einem Admin erstellt wurden, nicht sehen oder nicht bearbeiten können. Ob man das so haben will, muss man natürlich von Fall zu Fall entscheiden.

Die Gruppe “redaktion” bekommt nun ein User-TSconfig:

  1. admPanel {
  2.   #Frontend-Editieren generell freigeben, sowohl editieren wie Vorschau
  3.   enable.edit=1
  4.   enable.preview=1
  5.     #Buttons abhängig vom Admin-Panel - also umschaltbar
  6.   override.edit.displayIcons=0
  7.   override.preview.showHiddenPages=0
  8.   #Admin-Panel einschalten
  9.   hide=0
  10. }

Damit bekommt die Gruppe ein Adminpanel zu sehen, das aber nur eingeschränkte Möglichkeiten bietet. (Ich gehe hier einen anderen Weg als expertinnen-web.de: ich möchte, dass das Admin-Panel mit den Vorschaumöglichkeiten zur Verfügung steht.

Natürlich muss man im Haupt-Typoscript-Template das Frontendediting noch generell freischalten:

  1. page.config.admPanel = 1

Danach lege ich einen oder mehrere Backend-User an und weise ihnen die Gruppe “redaktion” zu.

Frontend-User und Backend-User zusammenbringen

Das geschieht über die Extension simulatebe. Die Extension zunächst installieren und danach in headerData einbinden:

  1. page.headerData.99 < plugin.tx_simulatebe_pi1

Da ich YAML verwende, sieht es bei mir so aus:

  1. temp.buildHeaderData {
  2.   10=TEXT
  3.   10.value= <link href="fileadmin/css/
  4.   20 = USER
  5.   20.userFunc = tx_flexformgetconstant_pi1->main
  6.   20.field = cssfile
  7.   30 = TEXT
  8.   30.value = "rel="stylesheet"type="text/css"/>
  9.   40=TEXT
  10.   40.value= <!--[if lte IE 7]>
  11.   50=TEXT
  12.   50.value= <link href="fileadmin/css/patches/
  13.   60 = USER
  14.   60.userFunc = tx_flexformgetconstant_pi1->main
  15.   60.field = iehacks
  16.   70 = TEXT
  17.   70.value = "rel="stylesheet"type="text/css"/>
  18.   80=TEXT
  19.   80.value= <![endif]-->
  20.  
  21.   99<plugin.tx_simulatebe_pi1
  22. }

Danach die passenden Frontend-User anlegen und über das neue Feld “Related Backend User” mit den passenden Backend-Usern verbinden. Jetzt können sich die Frontend-User als Backend-User über das Frontend-Login einloggen.

Einbau der Edit-Panels in eine TemplaVoila-Seite

Da ich TemplaVoila verwende und auch etwas andere Ziele verfolge, geht es jetzt anders weiter als bei den Web-Expertinnen. Prinzipiell müssen die gleichen Einstellungen gemacht werden, aber an anderen Stellen.

Zunächst öffne ich das “XML der Datenstruktur” meiner TemplaVoila-Seitenvorlage und füge dort das Editpanel für neu Inhaltsobjekte ein, und zwar in den XML-Tag, der die Inhaltselemente aufnimmt:

  1. <field_content type="array">
  2.             <tx_templavoila type="array">
  3.                 <title>Inhaltsbereich</title>
  4.                 <sample_data type="array">
  5.                     <numIndex index="0"></numIndex>
  6.                 </sample_data>
  7.                 <eType>ce</eType>
  8.                 <TypoScript><![CDATA[
  9. # Neue Inhaltselemente anlegen               
  10. 4=EDITPANEL
  11. 4 {
  12.     newRecordFromTable=tt_content
  13.         allow= new
  14. }
  15.  
  16. 10=RECORDS
  17. 10.source.current=1
  18. 10.tables=tt_content
  19. 10.wrap= <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
  20.                   ]]></TypoScript>

Entscheidend sind die Zeilen 4 =, damit erscheint ein Button, mit dem auf der Seite neue Inhaltselemente angelegt werden können.

Jetzt möchte ich noch die Toolbar zum Anlegen neuer Seiten im Kopf der Seite ausgeben. Dazu muss ich entweder einen eigenen Platzhalter in der TemplaVoila-Vorlage anlegen, oder eine vorhandene Definition erweitern. Ich erweitere meine Kopfdefinition:

  1. lib.kopf=COA
  2. lib.kopf {
  3.   # Editpanel für die Seite einbinden und formatieren:
  4.   5<styles.content.editPanelPage
  5.   5.10.allow>
  6.   5.10.allow=toolbar,move,hide
  7.   5.10.label.data=
  8.   5.10.label.wrap=
  9.  
  10.   # der Rest meiner Kopfausgabe
  11.   10=TEXT
  12.   10.value={$kopf.headline}
  13.   10.wrap= <h1>|</h1>
  14.   20=TEXT
  15.   # mit data und page, da TemplaVoila field selbst schon belegt.
  16.   20.data=page:title
  17.   20.wrap= <h2>|</h2>
  18. }

Formatierung der Toolbar und Icons:

Da ich die Standardausgabe nicht besonders schön finde, entferne ich einiges, z. B. die Labels. Dazu folgenden Code ins TypoScript-Setup des Haupttemplates eingeben:

  1. ################ Edit Panel ################
  2. tt_content.stdWrap.editPanel.label=
  3. # Label entfernen
  4. tt_content.stdWrap.editPanel.line=0
  5. # Linie unterhalb des Edit-Panels enfernen
  6.  

Ausserdem ergänze ich mein Stylesheet noch:

  1. table.typo3-editPanel { border:none;background-color:#fff;opacity: 0.3;-moz-opacity: 0.3;filter: Alpha(opacity=30);zoom:1;}
  2. table.typo3-editPanel TD.typo3-editPanel-controls {border:none;background-color:#fff;}

Nicht ganz W3C-konform, durch die Transparenz sind die Werkzeuge aber deutlich dezenter. Über das Adminpanel können die Werkzeuge zusätzlich an- und ausgeschaltet werden. Ausserdem steht eine Preview zur Verfügung, mit der die Ansicht aller Frontend-Benutzer simuliert werden kann.

Weiterführende Links:

In der Version 4.3 kann man den Wizard für die neuen Inhaltselemente ziemlich gut konfigurieren. Das bentuze ich um z. B. das ebenfalls komplett überarbeitete Inhaltselement Media in die erste Rubrik Typischer Seiteninhalt einzubinden.

Dazu muss in TSconfig der Seite folgender Abschnitt:

  1. mod {
  2.     wizards{
  3.         newContentElement {
  4.             # Darstellung in Tabs
  5.             renderMode=tabs
  6.             # Content-Element media in den ersten
  7.             # Tab aufnehmen
  8.             # Definition
  9.             wizardItems.common.elements.media {
  10.                 icon=gfx/c_wiz/multimedia.gif
  11.                 title=Media
  12.                 description=Video/Flash einbinden
  13.                 tt_content_defValues {
  14.                         CType=media
  15.                 }

  1.             }
  2.             # Hinzufügen
  3.             wizardItems.common.show:=addToList(media)
  4.         }
  5.     }
  6. }

Tipp: Wenn man mit TemplaVoila arbeitet, geht der Code nicht, in dem Fall muss mod durch templavoila ersetzt werden:

  1. templavoila {
  2.     wizards{
  3.                 # und so  weiter.
  4.     }
  5. }

Weiterführende Links

Kategorien: Backend  Kommentare 0
Tags: wizard, backend

Auch ohne TemplaVoila oder einem Template-Switcher können den Redakteuren verschiedene Layouts einfach über eine TypoScript-Konfiguration im Main-Template zur Verfügung gestellt werden

  1. page=PAGE
  2. page {
  3.     10= CASE
  4.     10.key.field=layout
  5.     # Standardtemplate
  6.     10.0  =TEMPLATE
  7.     10.0.template=FILE
  8.     10.0.template.file=fileadmin/tmpl/standard.html
  9.     10.0.workOnSubpart=DOCUMENT_BODY
  10.     10.0.marks {
  11.           # etc.
  12.     }
  13.     # Variante 1:
  14.     10.1  =TEMPLATE
  15.     10.1.template=FILE
  16.     10.1.template.file=fileadmin/tmpl/variante1.html
  17.     10.1.workOnSubpart=DOCUMENT_BODY
  18.     10.1.marks {
  19.           # etc.
  20.     }
  21.     # und so weiter.
  22. }

Standardmäßig sind vier Varianten vorgesehen. Diese können über PageTSconfig anders benannt werden:

  1. #In die Rootseite ins Feld Tsconfig:
  2. TCEFORM.pages {
  3.     layout.altLabels.0=Standard Vorlage
  4.     layout.altLabels.1=Zwei Spalter
  5.     layout.altLabels.2=Drei Spalter
  6.     layout.altLabels.3=Und so weiter.
  7. }

Falls vier Varianten nicht reichen, können noch weitere ergänzt werden:

  1. TCEFORM.pages{
  2.     layout.addItems {
  3.           4=eine weitere Variante
  4.           # usw
  5.     }
  6. }

Mit dieser Technik kann sogar das klassische 4-Spalten-Layout im Backend mit TemplaVoila kombiniert werden, von Seite zu Seite individuell und einfach vom Redakteur auszuwählen:

  1. page=PAGE
  2. page {
  3.     10= CASE
  4.     10.key.field=layout
  5.     # Standardtemplate
  6.     10.0=USER
  7.     10.0.userFunc=tx_templavoila_pi1->main_page
  8.     # Variante 1:
  9.     10.1  =TEMPLATE
  10.     10.1.template=FILE
  11.     10.1.template.file=fileadmin/tmpl/variante1.html
  12.     10.1.workOnSubpart=DOCUMENT_BODY
  13.     10.1.marks {
  14.           # etc.
  15.     }
  16.     # und so weiter.
  17. }

Allerdings muss dann TemplaVoila so konfiguriert werden, dass in der Rubrik »Web« im Backend beide Seiten-Module gezeigt werden: für TemplaVoila und das klassische. (Je nach Seitenlayout muss das passende Modul für die Eingabe der Inhalte verwendet werden). Dazu öffnet man im Extension Manager TemplaVolia und aktiviert die Option »Enable the classic page module«. Aber Achtung: da beide Seitenmodule leicht verwechselt werden können, erstellen ungeübte Redakteure schnell Inhalte in den falschen Modulen, was dazu führen kann, dass Inhalte zwar in TemplaVoila erscheinen sollen, aber dort nicht referenziert und damit letztlich auch nicht gezeigt werden. Diese Technik setzt also Redakteure voraus, die wissen was sie tun.

Falls doch einmal Inhalte nicht in TemplaVoila referenziert werden und damit nicht im Frontend erscheinen, so gibt es unter »Funktionen« den Assistenten »Referenziere unbenutzte Inhaltselement (TemplaVolia)«. Damit werden alle Inhaltselement in TemplaVoila-Spalten eingefügt – leider oft in die falschen. Aber immerhin sind sie jetzt da und und in der aktuellen Version von TemplaVoila können Inhaltselemente leicht per Drag und Drop verschoben werden, so dass sich der Aufwand in Grenzen hält.

 

Es besteht die Möglichkeit Konstanten zu definieren, die im RTE bzw. in allen Texteingabefeldern verwendet werden können. Diese Konstanten werden im RTE einfach in dieser Schreibweise eingefügt: ###MEINE_KONSTANTE###. Bei der Ausgabe im Frontend können diese Konstanten gegen einen vorgegeben Text oder gegen ein HTML-Snippet ersetzt werden.

Dazu müssen die Konstanten lediglich auf der obersten Ebene im Setup des TypoScript-Templates definiert werden:

  1. ##### Konstanten definieren #####
  2. constants.MEINE_KONSTANTE= <span class="myClass">irgend ein Text</span>
  3.  

Verantwortlich dafür sind diese Einträge, die standardmäßig eingeschaltet sind:

  1. lib.parseFunc.constants=1
  2. lib.parseFunc_RTE.constants=1

Damit wird sowohl im RTE wie in allen Texteingabefeldern die Ersetzung der Konstanten eingeschaltet. Das gilt auch für die Eingabefelder von Extensions, soweit diese durch eine der beiden Funktionen geparst werden.

Platzhalter oder Abkürzungen

Neben diesen Konstanten können Abkürzungen oder Ausdrücke definiert werden, die bei der Ausgabe ins Frontend ersetzt oder expandiert werden. Diese Abkürzungen oder Platzhalter müssen im TypoScript-Setup zunächst definiert werden:

  1. ##### Abkürzungen definieren
  2. lib.parseFunc_RTE.short {  
  3.     T3= <span class="test">Typo3</span>
  4. }

Dabei ist darauf zu achten, dass diese Definition diesmal nicht global erfolgt sondern lokal; um sie also auch in anderen Textfeldern verwenden zu können müssen sie für die normale parseFunc nochmals definiert werden.

Im RTE muss nur die Abkürzung oder der Platzhalter eingegeben werden – es ist keine weitere Auszeichnung erforderlich. Im obigen Beispiel wird ein alleinstehendes »T3« im Frontend automatisch durch »Typo3« in einem span-Tag ersetzt. Allerdings sollte dabei bedacht werden, dass diese Abkürzungen immer ersetzt werden; sinnvoll wären also nur eindeutige Abkürzungen.

Weiterführende Links

Der Abschnitt über die ParseFunc im TSconfig.

Beim Anlegen von Kopien oder von neuen Sprachen wird in leere Titel-Felder immer der String »( Copy x ) eingefügt. Das stört beim Kopieren von vielen Einträgen oder beim schnellen Anlegen von Übersetzungen ganz enorm.

Mit Hilfe eines Eintrag im Page TSconfig in der Root-Seite kann das verhindert bzw. ausgeschaltet werden:

  1. TCEMAIN.default.disablePrependAtCopy = 1

Weiterführende Links

Page TSconfig auf top3.org