Kategorien
- [-]Developer (104)
- API (15)
- Backend (17)
- Extensions (29)
- HTML & CSS (4)
- Typoscript (33)
- [-]Redaktionelles (21)
- Anleitungen (9)
- Tipps (8)
- [-]Sonstiges (50)
- SEO (8)
Schlagwortwolke
« | August 2010 | » | ||||
---|---|---|---|---|---|---|
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 | 31 |
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
Letzte Kommentare
- Das liegt daran, dass die captcha.php versucht, das halbe...
- 05.12.2017 00:41
- Hallo, danke für den tollen Beitrag. Kann man die...
- 22.10.2015 10:05
- Vielen Dank für den Austausch guter Artikel. Es ist eine...
- 17.08.2015 10:58
- Hallo Peter, danke für die Extension. Ich habe sie auf...
- 27.08.2014 12:51
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 ...
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:
- # Eigentuemer
- TCEMAIN.permissions.userid = 5
- # Gruppe immer Redaktion:
- TCEMAIN.permissions.groupid = 1
- # Gruppe bekommt immer alle Rechte
- 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:
- admPanel {
- #Frontend-Editieren generell freigeben, sowohl editieren wie Vorschau
- enable.edit=1
- enable.preview=1
- #Buttons abhängig vom Admin-Panel - also umschaltbar
- override.edit.displayIcons=0
- override.preview.showHiddenPages=0
- #Admin-Panel einschalten
- hide=0
- }
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:
- 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:
- page.headerData.99 < plugin.tx_simulatebe_pi1
Da ich YAML verwende, sieht es bei mir so aus:
- temp.buildHeaderData {
- 10=TEXT
- 10.value= <link href="fileadmin/css/
- 20 = USER
- 20.userFunc = tx_flexformgetconstant_pi1->main
- 20.field = cssfile
- 30 = TEXT
- 30.value = "rel="stylesheet"type="text/css"/>
- 40=TEXT
- 40.value= <!--[if lte IE 7]>
- 50=TEXT
- 50.value= <link href="fileadmin/css/patches/
- 60 = USER
- 60.userFunc = tx_flexformgetconstant_pi1->main
- 60.field = iehacks
- 70 = TEXT
- 70.value = "rel="stylesheet"type="text/css"/>
- 80=TEXT
- 80.value= <![endif]-->
- 99<plugin.tx_simulatebe_pi1
- }
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:
- <field_content type="array">
- <tx_templavoila type="array">
- <title>Inhaltsbereich</title>
- <sample_data type="array">
- <numIndex index="0"></numIndex>
- </sample_data>
- <eType>ce</eType>
- <TypoScript><![CDATA[
- # Neue Inhaltselemente anlegen
- 4=EDITPANEL
- 4 {
- newRecordFromTable=tt_content
- allow= new
- }
- 10=RECORDS
- 10.source.current=1
- 10.tables=tt_content
- 10.wrap= <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
- ]]></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:
- lib.kopf=COA
- lib.kopf {
- # Editpanel für die Seite einbinden und formatieren:
- 5<styles.content.editPanelPage
- 5.10.allow>
- 5.10.allow=toolbar,move,hide
- 5.10.label.data=
- 5.10.label.wrap=
- # der Rest meiner Kopfausgabe
- 10=TEXT
- 10.value={$kopf.headline}
- 10.wrap= <h1>|</h1>
- 20=TEXT
- # mit data und page, da TemplaVoila field selbst schon belegt.
- 20.data=page:title
- 20.wrap= <h2>|</h2>
- }
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:
- ################ Edit Panel ################
- tt_content.stdWrap.editPanel.label=
- # Label entfernen
- tt_content.stdWrap.editPanel.line=0
- # Linie unterhalb des Edit-Panels enfernen
Ausserdem ergänze ich mein Stylesheet noch:
- table.typo3-editPanel { border:none;background-color:#fff;opacity: 0.3;-moz-opacity: 0.3;filter: Alpha(opacity=30);zoom:1;}
- 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:
- Kommentare