https://de.contaowiki.org/api.php?action=feedcontributions&user=Manitougs&feedformat=atomContao Community Documentation - Benutzerbeiträge [de]2024-03-29T00:54:07ZBenutzerbeiträgeMediaWiki 1.22.6https://de.contaowiki.org/MultiColumnWizardMultiColumnWizard2011-09-07T21:58:17Z<p>Manitougs: /* Verfügbare MultiColumnWizard Eval-Optionen */</p>
<hr />
<div>[[en:MultiSelectWizard]]<br />
[[Category:Extensions]]<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=2.9 - 2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/MultiColumnWizard.html<br />
| TrackerLink=http://contao-forge.org/projects/multicolumnwizard/issues<br />
}}<br />
<br />
Dieses Widget ist dafür gedacht, beliebige Widget-Typen nebeneinander zu platzieren.<br /><br />
Das Widget ist eigentlich das Gleiche wie der [[MultiTextWizard]] oder der [[MultiSelectWizard]]; es erweitert die Funktionalitäten für belibige Widgets.<br />
<br />
=Aussehen=<br />
Die Extension kann für jede Art von Inputtype verwendet werden, eine Mischung der einzelnen Typen ist kein Problem.<br />
[[Datei:MultiColumnWizard.jpg|MultiColumnWizard|frame|center]]<br />
<br />
=Verwendung=<br />
Es gibt zwei Verwendungsmöglichkeiten. Entweder direkt mit der Angabe von "columnFields" im "eval"-Array oder mit einem Callback.<br />
<br />
==Angabe mit columnFields==<br />
<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_theme']['fields']['templateSelection'] = array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_theme']['templateSelection'],<br />
'exclude' => true,<br />
'inputType' => 'multiColumnWizard',<br />
'eval' => array<br />
(<br />
'columnFields' => array<br />
(<br />
'ts_client_os' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_theme']['ts_client_os'],<br />
'exclude' => true,<br />
'inputType' => 'select',<br />
'options' => array<br />
(<br />
'option1' => 'Option 1',<br />
'option2' => 'Option 2',<br />
),<br />
'eval' => array('style' => 'width:250px', 'includeBlankOption'=>true)<br />
),<br />
'ts_client_browser' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_theme']['ts_client_browser'],<br />
'exclude' => true,<br />
'inputType' => 'text',<br />
'eval' => array('style'=>'width:180px')<br />
),<br />
'ts_client_mobile' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_theme']['ts_client_mobile'],<br />
'exclude' => true,<br />
'inputType' => 'checkbox',<br />
'eval' => array('style'=>'width:40px')<br />
<br />
),<br />
'ts_extension' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_theme']['ts_extension'],<br />
'inputType' => 'text',<br />
'eval' => array('mandatory'=>true, 'style'=>'width:115px')<br />
),<br />
)<br />
)<br />
);<br />
</source><br />
<br />
==Angabe mit Callback==<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_table']['fields']['anything'] = array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_table']['anything'],<br />
'exclude' => true,<br />
'inputType' => 'multiColumnWizard',<br />
'eval' => array('mandatory'=>true,'columnsCallback'=>array('Class', 'Method'))<br />
<br />
);<br />
</source><br />
<br />
Wobei natürlich der Return-Wert genau das selbe Array sein muss, wie bei der "columnFields"-Variante.<br />
<br />
==Verfügbare MultiColumnWizard Eval-Optionen==<br />
<br />
{| cellpadding="20" cellspacing="0"<br />
|-<br />
| '''Schlüssel''' || '''Wert''' || '''Beschreibung'''<br />
|-<br />
| columnPos || Gruppenname<br />''string'' || Gruppiert Felder und zeigt Sie untereinander an.<br />
|-<br />
| maxCount || Menge<br />''integer'' || Legt die maximale Anzahl an Felder fest, die angelegt werden dürfen.<br />
|-<br />
| minCount || Menge<br />''integer'' || Legt die minimale Anzahl an Felder fest, die angelegt werden dürfen.<br />
|-<br />
| valign || Position<br />''string'' || Legt die vertikale Position der Zelle in der Tabelle fest.<br />
|-<br />
| buttonPos || Position<br />''string'' || Legt die vertikale Position der Zelle, in der sich die Buttons befinden, fest.<br />
|}<br />
<br />
==Unterstützte Contao Eval-Optionen==<br />
<br />
{|<br />
|-<br />
| '''Schlüssel''' || '''Status'''<br />
|-<br />
| nospace || ''Ungetestet''<br />
|-<br />
| multiple || Unterstützt<br />
|-<br />
| size || Unterstützt<br />
|-<br />
| rgxp || Unterstützt<br />
|-<br />
| style || Unterstützt<br />
|-<br />
| tl_class || Unterstützt<br />
|-<br />
| preserveTags || Unterstützt<br />
|-<br />
| allowHtml || Unterstützt<br />
|-<br />
| trailingSlash || ''Ungetestet''<br />
|-<br />
| mandatory || Unterstützt<br />
|-<br />
| spaceToUnderscore || Unterstützt<br />
|-<br />
| includeBlankOption || Unterstützt<br />
|-<br />
| maxlength || Unterstützt<br />
|-<br />
| minlength || Unterstützt<br />
|}</div>Manitougshttps://de.contaowiki.org/ccdde:Aktuelle_Ereignisseccdde:Aktuelle Ereignisse2011-09-06T19:02:41Z<p>Manitougs: Contao 2.10.1</p>
<hr />
<div>Contao 2.10.1 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-10-1.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 21:12, 31. Aug. 2011 (CEST)<br />
----<br />
Contao 2.10.0 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-10-0.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 00:12, 12. Aug. 2011 (CEST)<br />
----<br />
Contao 2.9.5 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-5.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 22:10, 21. Mai 2011 (CEST)<br />
----<br />
Contao 2.9.4 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-4.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 12:26, 8. Mär. 2011 (CET)<br />
----<br />
Standard Wiki Theme ist nun das brandneue von [[Benutzer:Marc|marcules]] erstellte Contaowiki Theme.<br />
Wir hoffen es gefällt.<br /><br />
--[[Benutzer:Xtra|Xtra]] 21:04, 4. Feb. 2011 (CET)<br />
----<br />
Contao 2.9.3 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-3.html Ankündigung auf der Projektseite]<br /><br />
Da dieses Update eine Sicherheitslücke behebt, ist ein Update dringend empfohlen!<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 22:19, 17. Jan. 2011 (CET)<br />
----<br />
Hier im Wiki ist nun ein Syntax Highlighter ([[w:de:GeSHi|GeSHi]]) installiert. Bitte die Änderungen in der [[Hilfe:Hilfe|Hilfe]] beachten.<br /><br />
--[[Benutzer:Xtra|Xtra]] 01:15, 27. Aug. 2010 (CEST)<br />
----<br />
Contao 2.9 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 13:02, 2. Jul. 2010 (CEST)<br />
----<br />
Typolight 2.8.4 veröffentlicht.<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 20:22, 1. Jul. 2010 (CEST)<br />
----<br />
Contao 2.9 RC1 verfügbar: [http://www.contao.org/neuigkeiten/items/contao_2-9-RC1.html Contao News - Contao 2.9 RC1]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 09:53, 25. Jun. 2010 (UTC)<br />
----<br />
Aus TYPOlight wird Contao: [http://www.contao.org/neuigkeiten/items/typolight-wird-zu-contao.html Contao News - TYPOlight wird zu Contao]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 09:53, 25. Jun. 2010 (UTC)<br />
----<br />
Aktuell schreiben wir die bestehenden TYPOlight Artikel auf Contao um.<br />
<br />
Weiterhin wird die Optik dieses Wiki Stück für Stück an die CI des Contao Projekts angepasst.</div>Manitougshttps://de.contaowiki.org/RobotsTagExtenderRobotsTagExtender2011-09-06T18:03:59Z<p>Manitougs: </p>
<hr />
<div>[[Category:Extensions]]<br />
{{ExtInfo<br />
| Dev=trilobit GmbH<br />
| DevSite=http://www.trilobit.de/<br />
| ExtVersion=1.0.0 stable<br />
| Version=2.9.5 bis 2.10.1 stable<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/RobotsTagExtender.html<br />
}}<br />
<br />
=Was bietet die Erweiterung RobotsTagExtender?=<br />
Mit dieser Erweiterung können die im System hinterlegten Robots-Tags um eigene Tags ergänzt werden. Das System erkennt doppelte Einträge und führt diese in der Robots-Tag-Auswahlliste der Seiteneigenschaften zusammen.<br />
<br />
Ergänzende Angaben könnten z.B. die Tags "noodp" und "noydir" sein.<br />
<br />
=Robots-Meta-tag=<br />
Die Robots-Meta-Tags sind dafür zuständig, Suchmaschinen verschiedene Anweisungen zu übermitteln. Setzt man diese nicht ein, so verwendet eine Suchmaschine die eigenen Standard Eigenschaften.<br />
<br />
=Vorteile, SEO, ...=<br />
Nachdem Bing (MSN) vor einiger Zeit den Wert "noodp" für die Meta-Angabe "robots" eingeführt hatte, hat nun auch Google diese übernommen. Diese Angabe weist die Suchmaschinen an, für die Suchergebnisseite nicht den Titel und Beschreibung des ODP-Verzeichnisses zu verwenden.<br />
Analog zur "noodp" Meta-Angabe hat Yahoo die "noydir" Meta-Angabe eingeführt, mit welcher Yahoo Slurp signalisiert werden kann, dass die Beschreibung aus dem Yahoo Verzeichnis nicht als Snippet auf den Suchergebnisseiten verwendet werden soll.<br />
<br />
=Einstellungen=<br />
Sobald diese Erweiterung über den Erweiterungskatalog in Contao installiert ist, stehen das Modul im Abschnitt ''System'' unter dem Namen ''RobotsTagExtender'' zur Verfügung.<br />
<br />
=Mehr Infos=<br />
Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung.</div>Manitougshttps://de.contaowiki.org/Css_ABC_in_ContaoCss ABC in Contao2011-09-04T13:42:50Z<p>Manitougs: /* Add On's */ Typos</p>
<hr />
<div>{{stub}}[[en:Css_ABC_for_Contao]]<br />
[[Category: Erste_Schritte]]<br />
{{AppliesTo|Version=ab 2.9}}<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt, die einem das Leben mit Contao und CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen, diese Anleitung mit nützlichen Tipps und Tricks zu ergänzen.<br />
<br />
=Voraussetzung=<br />
<br />
*Contao Installation. Als z.B. lokale Testumgebungen mit [[Contao2Go]] (auf USB-Stick oder portabler Festplatte) oder [[Xampp_Multidomain|XAMPP]] (lokale Entwicklungsumgebung).<br />
*HTML und CSS Kenntnisse<br />
<br />
=Hilfsmittel=<br />
==Add On's==<br />
Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)<br />
<br />
*Als Erweiterung in Contao (browserunabhängig)<br />
**[http://www.contao.org/erweiterungsliste/view/Firebug.10000003.de.html Firebug Erweiterung für Contao]: Mit diesem Modul kann man den abgespeckten Firebug lite in allen Browsern aktivieren.<br />
<br />
*Chrome:<br />
**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Strg+Shift+I).<br />
**[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer] <br />
<br />
*Firefox:<br />
**[http://getfirebug.com/ Firebug]<br />
**[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web-Developer]<br />
<br />
=Hilfreiche Erweiterungen um mit CSS zu arbeiten=<br />
*[http://www.contao.org/erweiterungsliste/view/csseditor.de.html CSS Editor]: Mit dieser Erweiterung ist ein einfaches Bearbeiten der CSS-Anweisungen in Contao möglich.<br />
<br />
*[[Layout_additional_sources | Layout Additional Sources]]: Mit dieser Erweiterung lassen sich (unter anderem) einfach zusätzliche Dateien in ein Layout einfügen. Wer gerne seine '''.css und .js''' Dateien mit einem externen Editor verwendet, ist mit dieser Erweiterung auch gut bedient.<br />
<br />
==Wireframes==<br />
Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, wo sich diese in der Webseite befinden. Dazu kann man das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn man dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann man verfolgen, welche Abmessungen sich wie ändern.<br />
<source lang="css"><br />
/* Style sheet wireframes */<br />
#wrapper{background-color:#FFFFC0;}<br />
#header{background-color:#D7E9D6;}<br />
#header .inside{background-color:#E9F3E9;}<br />
#container{background-color:#EAFCF3;}<br />
#left{background-color:#D7DCE7;}<br />
#left .inside{background-color:#E9ECF2;}<br />
#main{background-color:#E9E7D6;}<br />
#main .inside{background-color:#F3F2E9;}<br />
#right{background-color:#D7DCE7;}<br />
#right .inside{background-color:#E9ECF2;}<br />
#footer{background-color:#D7E9D6;}<br />
#footer .inside{background-color:#E9F3E9;}<br />
</source><br />
<br />
==CSS Klassen/Selektoren (aus Music Accademy)==<br />
Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als Basis für das auf der Beispiel-Webseite ''Music Academy'' basierenden Theme verwendet werden.<br />
<br />
<source lang="css"><br />
/** Layout **/<br />
body {}<br />
#left {}<br />
#top_image {}<br />
<br />
<br />
/** Article **/<br />
.ce_text,<br />
.teaser<br />
div.error,<br />
p.error {}<br />
.mod_article .back {}<br />
.mod_article .more {}<br />
<br />
/** Breadcrumb **/<br />
.mod_breadcrumb {}<br />
<br />
/** Gallery **/<br />
.ce_gallery .caption {}<br />
<br />
<br />
/** Article **/<br />
.mod_article .pdf_link {}<br />
.mod_article .pdf_link a {}<br />
<br />
<br />
/** Lost password **/<br />
.mod_lostPassword {}<br />
.mod_lostPassword td {}<br />
.mod_lostPassword .text,<br />
.mod_lostPassword .password {}<br />
.mod_lostPassword .captcha {}<br />
.mod_lostPassword .captcha_text {}<br />
<br />
/** Listing **/<br />
.ce_list ul {}<br />
.ce_list li {}<br />
<br />
/** Navigation **/<br />
.mod_navigation {}<br />
.mod_navigation ul {}<br />
.mod_navigation li {}<br />
.mod_navigation .level_2 {}<br />
.mod_navigation .level_2 li {}<br />
.mod_navigation a,<br />
.mod_navigation li,<br />
.mod_navigation span {}<br />
.mod_navigation .level_2 a,<br />
.mod_navigation .level_2 li,<br />
.mod_navigation .level_2 span {}<br />
<br />
/** Accordion **/<br />
.ce_accordion {}<br />
.toggler {}<br />
.toggler_first {}<br />
.toggler_first:hover {}<br />
.accordion div {}<br />
<br />
/** Login form **/<br />
.mod_login {}<br />
.mod_login label {}<br />
.mod_login .checkbox_container {}<br />
.mod_login .checkbox_container label {}<br />
.mod_login .submit_container {}<br />
#request_password {}<br />
#request_password a {}<br />
<br />
/** News **/<br />
.mod_newsmenu,<br />
.mod_eventmenu {}<br />
#breaking_news {}<br />
.mod_newsmenu ul,<br />
.mod_newsmenu li,<br />
.mod_eventmenu ul,<br />
.mod_eventmenu li {}<br />
.mod_newsmenu .year,<br />
.mod_eventmenu .year {}<br />
.mod_newslist p {}<br />
.mod_newsreader .back {}<br />
.mod_newslist .info,<br />
.mod_newsreader .info {}<br />
.mod_newslist .layout_short {}<br />
.mod_newsreader .ce_text {}<br />
.mod_article,<br />
.mod_newsreader {}<br />
.mod_newsreader h2 {}<br />
.mod_newsreader .comment_default {}<br />
.mod_newsreader .comment {}<br />
.mod_newsreader .reply {}<br />
.mod_newsreader .form {}<br />
.mod_newsreader .widget {}<br />
.mod_newsreader .textarea {}<br />
<br />
/** Search **/<br />
.mod_search {}<br />
.mod_search .text {}<br />
.mod_search .radio_container {}<br />
.mod_search .radio_container label {}<br />
.mod_search .header {}<br />
.mod_search h3 {}<br />
.mod_search .context {}<br />
.mod_search .url {}<br />
.mod_search .relevance {}<br />
.mod_search .highlight {}<br />
<br />
/** Calendar **/<br />
table.calendar {}<br />
table.calendar .head {}<br />
table.calendar .current {}<br />
table.calendar .label {}<br />
table.calendar td {}<br />
table.calendar td.weekend {}<br />
table.calendar .today {}<br />
table.calendar .empty,<br />
table.calendar .empty .header {}<br />
table.calendar td .header {}<br />
table.calendar td .event a {}<br />
<br />
/** Mini calendar **/<br />
#minicalendar {}<br />
table.minicalendar {}<br />
table.minicalendar td {}<br />
table.minicalendar td,<br />
table.minicalendar .active a {}<br />
table.minicalendar .weekend {}<br />
table.minicalendar .today {}<br />
table.minicalendar .label {}<br />
table.minicalendar .head {}<br />
table.minicalendar .current {}<br />
<br />
/** Events **/<br />
.mod_eventlist {}<br />
.mod_eventlist .header {}<br />
.mod_eventlist .header.first {}<br />
.mod_eventlist .event {}<br />
.mod_eventlist .time {}<br />
.mod_eventreader .info {}<br />
.mod_eventreader .recurring {}<br />
.mod_eventreader .ce_text {}<br />
.mod_eventreader .back {}<br />
<br />
/** Personal data **/<br />
.mod_personalData {}<br />
.mod_personalData fieldset {}<br />
<br />
*+html .mod_personalData fieldset {}<br />
.mod_personalData legend {}<br />
.mod_personalData .submit_container {}<br />
*+html .mod_personalData .submit_container {}<br />
.mod_personalData td {}<br />
.mod_personalData .text,<br />
.mod_personalData .password {}<br />
.mod_personalData select {}<br />
*+html .mod_personalData select {}<br />
fieldset.radio_container,<br />
fieldset.checkbox_container {}<br />
<br />
/** Tables **/<br />
.ce_table {}<br />
.ce_table td {}<br />
<br />
/** Listing **/<br />
*+html .ce_list li {}<br />
<br />
/** Tables **/<br />
.ce_table th {}<br />
.ce_table th a {}<br />
<br />
<br />
/** Pagination **/<br />
.pagination li {}<br />
<br />
/** Tables **/<br />
#tps td {}<br />
<br />
/** Pagination **/<br />
.pagination {}<br />
<br />
/** Tables **/<br />
#tps .col_0 {}<br />
<br />
/** Pagination **/<br />
.pagination p {}<br />
<br />
/** Tables **/<br />
#tps .explanation {}<br />
<br />
/** Pagination **/<br />
.pagination ul {}<br />
</source><br />
<br />
<br />
<br />
=Beispiele für häufig gestellte Fragen IRC & Forum's=<br />
==Formatieren der Navigation==<br />
'''Unterscheiden zwischen dem Standard-Navigationsmenu und einer individuellen Navigation'''<br />
<source lang="css"><br />
.mod_navigation {} /*Standard-Navigationsmenü*/<br />
.mod_customnav {} /*individiuelle Navigation*/<br />
</source><br />
<br />
'''Formatieren des aktiven Menupunktes'''<br />
<source lang="css"><br />
.mod_navigation .active {}<br />
</source><br />
<br />
'''Formatieren des Hauptmenüpunktes, wenn man sich eine Ebene tiefer befindet'''<br />
<source lang="css"><br />
.mod_navigation .trail {}<br />
</source><br />
<br />
==Html in einem Artikel verwenden==<br />
==Wie man ein verlinktes Bild im Header einfügt==<br />
==Ein existierendes Layout in Contao verwenden==<br />
<br />
=folgt=<br />
=in Kürze=</div>Manitougshttps://de.contaowiki.org/Css_ABC_in_ContaoCss ABC in Contao2011-09-04T13:41:07Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>{{stub}}[[en:Css_ABC_for_Contao]]<br />
[[Category: Erste_Schritte]]<br />
{{AppliesTo|Version=ab 2.9}}<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt, die einem das Leben mit Contao und CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen, diese Anleitung mit nützlichen Tipps und Tricks zu ergänzen.<br />
<br />
=Voraussetzung=<br />
<br />
*Contao Installation. Als z.B. lokale Testumgebungen mit [[Contao2Go]] (auf USB-Stick oder portabler Festplatte) oder [[Xampp_Multidomain|XAMPP]] (lokale Entwicklungsumgebung).<br />
*HTML und CSS Kenntnisse<br />
<br />
=Hilfsmittel=<br />
==Add On's==<br />
Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)<br />
<br />
*Als Erweiterung in Contao (Browserunabhängig)<br />
**[http://www.contao.org/erweiterungsliste/view/Firebug.10000003.de.html Firebug Erweiterung für Contao]: Mit diesem Modul kann man den abgespeckten Firebug lite in allen Browsern aktivieren.<br />
<br />
*Chrome:<br />
**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str+Shift+I).<br />
**[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer] <br />
<br />
*Firefox:<br />
**[http://getfirebug.com/ Firebug]<br />
**[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web-Developer]<br />
<br />
=Hilfreiche Erweiterungen um mit CSS zu arbeiten=<br />
*[http://www.contao.org/erweiterungsliste/view/csseditor.de.html CSS Editor]: Mit dieser Erweiterung ist ein einfaches Bearbeiten der CSS-Anweisungen in Contao möglich.<br />
<br />
*[[Layout_additional_sources | Layout Additional Sources]]: Mit dieser Erweiterung lassen sich (unter anderem) einfach zusätzliche Dateien in ein Layout einfügen. Wer gerne seine '''.css und .js''' Dateien mit einem externen Editor verwendet, ist mit dieser Erweiterung auch gut bedient.<br />
<br />
==Wireframes==<br />
Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, wo sich diese in der Webseite befinden. Dazu kann man das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn man dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann man verfolgen, welche Abmessungen sich wie ändern.<br />
<source lang="css"><br />
/* Style sheet wireframes */<br />
#wrapper{background-color:#FFFFC0;}<br />
#header{background-color:#D7E9D6;}<br />
#header .inside{background-color:#E9F3E9;}<br />
#container{background-color:#EAFCF3;}<br />
#left{background-color:#D7DCE7;}<br />
#left .inside{background-color:#E9ECF2;}<br />
#main{background-color:#E9E7D6;}<br />
#main .inside{background-color:#F3F2E9;}<br />
#right{background-color:#D7DCE7;}<br />
#right .inside{background-color:#E9ECF2;}<br />
#footer{background-color:#D7E9D6;}<br />
#footer .inside{background-color:#E9F3E9;}<br />
</source><br />
<br />
==CSS Klassen/Selektoren (aus Music Accademy)==<br />
Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als Basis für das auf der Beispiel-Webseite ''Music Academy'' basierenden Theme verwendet werden.<br />
<br />
<source lang="css"><br />
/** Layout **/<br />
body {}<br />
#left {}<br />
#top_image {}<br />
<br />
<br />
/** Article **/<br />
.ce_text,<br />
.teaser<br />
div.error,<br />
p.error {}<br />
.mod_article .back {}<br />
.mod_article .more {}<br />
<br />
/** Breadcrumb **/<br />
.mod_breadcrumb {}<br />
<br />
/** Gallery **/<br />
.ce_gallery .caption {}<br />
<br />
<br />
/** Article **/<br />
.mod_article .pdf_link {}<br />
.mod_article .pdf_link a {}<br />
<br />
<br />
/** Lost password **/<br />
.mod_lostPassword {}<br />
.mod_lostPassword td {}<br />
.mod_lostPassword .text,<br />
.mod_lostPassword .password {}<br />
.mod_lostPassword .captcha {}<br />
.mod_lostPassword .captcha_text {}<br />
<br />
/** Listing **/<br />
.ce_list ul {}<br />
.ce_list li {}<br />
<br />
/** Navigation **/<br />
.mod_navigation {}<br />
.mod_navigation ul {}<br />
.mod_navigation li {}<br />
.mod_navigation .level_2 {}<br />
.mod_navigation .level_2 li {}<br />
.mod_navigation a,<br />
.mod_navigation li,<br />
.mod_navigation span {}<br />
.mod_navigation .level_2 a,<br />
.mod_navigation .level_2 li,<br />
.mod_navigation .level_2 span {}<br />
<br />
/** Accordion **/<br />
.ce_accordion {}<br />
.toggler {}<br />
.toggler_first {}<br />
.toggler_first:hover {}<br />
.accordion div {}<br />
<br />
/** Login form **/<br />
.mod_login {}<br />
.mod_login label {}<br />
.mod_login .checkbox_container {}<br />
.mod_login .checkbox_container label {}<br />
.mod_login .submit_container {}<br />
#request_password {}<br />
#request_password a {}<br />
<br />
/** News **/<br />
.mod_newsmenu,<br />
.mod_eventmenu {}<br />
#breaking_news {}<br />
.mod_newsmenu ul,<br />
.mod_newsmenu li,<br />
.mod_eventmenu ul,<br />
.mod_eventmenu li {}<br />
.mod_newsmenu .year,<br />
.mod_eventmenu .year {}<br />
.mod_newslist p {}<br />
.mod_newsreader .back {}<br />
.mod_newslist .info,<br />
.mod_newsreader .info {}<br />
.mod_newslist .layout_short {}<br />
.mod_newsreader .ce_text {}<br />
.mod_article,<br />
.mod_newsreader {}<br />
.mod_newsreader h2 {}<br />
.mod_newsreader .comment_default {}<br />
.mod_newsreader .comment {}<br />
.mod_newsreader .reply {}<br />
.mod_newsreader .form {}<br />
.mod_newsreader .widget {}<br />
.mod_newsreader .textarea {}<br />
<br />
/** Search **/<br />
.mod_search {}<br />
.mod_search .text {}<br />
.mod_search .radio_container {}<br />
.mod_search .radio_container label {}<br />
.mod_search .header {}<br />
.mod_search h3 {}<br />
.mod_search .context {}<br />
.mod_search .url {}<br />
.mod_search .relevance {}<br />
.mod_search .highlight {}<br />
<br />
/** Calendar **/<br />
table.calendar {}<br />
table.calendar .head {}<br />
table.calendar .current {}<br />
table.calendar .label {}<br />
table.calendar td {}<br />
table.calendar td.weekend {}<br />
table.calendar .today {}<br />
table.calendar .empty,<br />
table.calendar .empty .header {}<br />
table.calendar td .header {}<br />
table.calendar td .event a {}<br />
<br />
/** Mini calendar **/<br />
#minicalendar {}<br />
table.minicalendar {}<br />
table.minicalendar td {}<br />
table.minicalendar td,<br />
table.minicalendar .active a {}<br />
table.minicalendar .weekend {}<br />
table.minicalendar .today {}<br />
table.minicalendar .label {}<br />
table.minicalendar .head {}<br />
table.minicalendar .current {}<br />
<br />
/** Events **/<br />
.mod_eventlist {}<br />
.mod_eventlist .header {}<br />
.mod_eventlist .header.first {}<br />
.mod_eventlist .event {}<br />
.mod_eventlist .time {}<br />
.mod_eventreader .info {}<br />
.mod_eventreader .recurring {}<br />
.mod_eventreader .ce_text {}<br />
.mod_eventreader .back {}<br />
<br />
/** Personal data **/<br />
.mod_personalData {}<br />
.mod_personalData fieldset {}<br />
<br />
*+html .mod_personalData fieldset {}<br />
.mod_personalData legend {}<br />
.mod_personalData .submit_container {}<br />
*+html .mod_personalData .submit_container {}<br />
.mod_personalData td {}<br />
.mod_personalData .text,<br />
.mod_personalData .password {}<br />
.mod_personalData select {}<br />
*+html .mod_personalData select {}<br />
fieldset.radio_container,<br />
fieldset.checkbox_container {}<br />
<br />
/** Tables **/<br />
.ce_table {}<br />
.ce_table td {}<br />
<br />
/** Listing **/<br />
*+html .ce_list li {}<br />
<br />
/** Tables **/<br />
.ce_table th {}<br />
.ce_table th a {}<br />
<br />
<br />
/** Pagination **/<br />
.pagination li {}<br />
<br />
/** Tables **/<br />
#tps td {}<br />
<br />
/** Pagination **/<br />
.pagination {}<br />
<br />
/** Tables **/<br />
#tps .col_0 {}<br />
<br />
/** Pagination **/<br />
.pagination p {}<br />
<br />
/** Tables **/<br />
#tps .explanation {}<br />
<br />
/** Pagination **/<br />
.pagination ul {}<br />
</source><br />
<br />
<br />
<br />
=Beispiele für häufig gestellte Fragen IRC & Forum's=<br />
==Formatieren der Navigation==<br />
'''Unterscheiden zwischen dem Standard-Navigationsmenu und einer individuellen Navigation'''<br />
<source lang="css"><br />
.mod_navigation {} /*Standard-Navigationsmenü*/<br />
.mod_customnav {} /*individiuelle Navigation*/<br />
</source><br />
<br />
'''Formatieren des aktiven Menupunktes'''<br />
<source lang="css"><br />
.mod_navigation .active {}<br />
</source><br />
<br />
'''Formatieren des Hauptmenüpunktes, wenn man sich eine Ebene tiefer befindet'''<br />
<source lang="css"><br />
.mod_navigation .trail {}<br />
</source><br />
<br />
==Html in einem Artikel verwenden==<br />
==Wie man ein verlinktes Bild im Header einfügt==<br />
==Ein existierendes Layout in Contao verwenden==<br />
<br />
=folgt=<br />
=in Kürze=</div>Manitougshttps://de.contaowiki.org/TinyMCE_und_AjaxFileManagerTinyMCE und AjaxFileManager2011-09-04T12:34:15Z<p>Manitougs: /* Dateirechte setzen für Dateien, die mit AjaxFileManager hochgeladen werden */</p>
<hr />
<div>{{AppliesTo<br />
|Version=2.10.0<br />
}}<br />
[[Category:Admin HOWTOS]]<br />
Eine Anleitung, wie man den kostenlosen und durchaus brauchbaren "AjaxFileManager" in Contao einbindet.<br />
<br />
=Download des AjaxFileManagers=<br />
Das Paket "Ajax File and Image Manager Version 1.0 Final" von [http://www.phpletter.com/download_project_version.php?version_id=33 php.letter.com] downloaden.<br />
<br />
=Dateien kopieren=<br />
Aus dem heruntergeladenen Paket (s.o.) den Ordner ''ajaxfilemanager'' nach ''plugins/tinyMCE/plugins/ajaxfilemanager'' kopieren.<br /><br />
Alles andere aus der heruntergeladenen zip-Datei wird nicht gebraucht.<br />
<br />
=Konfigurationsdatei bearbeiten=<br />
Die Datei ''plugins/tinyMCE/plugins/ajaxfilemanager/inc/config.base.php'' öffnen, darin in den Zeilen 52/53 CONFIG_SYS_DEFAULT_PATH und CONFIG_SYS_ROOT_PATH folgendermaßen setzen:<br />
<source lang="php"><br />
define('CONFIG_SYS_DEFAULT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
define('CONFIG_SYS_ROOT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
</source><br />
Dabei /media nach eigenen Wünschen anpassen oder auch weglassen...<br />
<br />
=tinyMCE.php bearbeiten=<br />
Die Konfigurationsdatei ''system/config/tinyMCE.php'' folgendermaßen bearbeiten:<br />
<br />
==ajaxfilemanager hinzufügen==<br />
In der Zeile, die mit ''elements:'' beginnt, ajaxfilemanager hinzufügen. Dies sieht dann so aus:<br />
<source lang="php"><br />
elements : "<?php echo $this->rteFields; ?>,ajaxfilemanager",<br />
</source><br />
<br />
==file_browser_callback ergänzen==<br />
Hinter theme_advanced_resizing: true, folgende Zeile einfügen:<br />
<source lang="php"><br />
file_browser_callback : "ajaxfilemanager",<br />
</source><br />
Ob es genau diese Position innerhalb der tinyMCE.php sein muss, weiß ich nicht, aber irgendwo stand diese Empfehlung und es funktioniert so bei mir.<br />
<br />
==Skript einfügen==<br />
Am Ende der Datei vor </script> folgendes einfügen:<br />
<source lang="php"><br />
// start ajaxfilemanager configuration<br />
function ajaxfilemanager(field_name, url, type, win) {<br />
var ajaxfilemanagerurl = "plugins/tinyMCE/plugins/ajaxfilemanager/ajaxfilemanager.php";<br />
switch (type) {<br />
case "image":<br />
break;<br />
case "media":<br />
break;<br />
case "flash":<br />
break;<br />
case "file":<br />
break;<br />
default:<br />
return false;<br />
}<br />
var view='thumbnail'; //alternativ: 'detail'<br />
var language='de';<br />
tinyMCE.activeEditor.windowManager.open({<br />
url: ajaxfilemanagerurl + '?view=' + view + '&language=' + language,<br />
title: "Ajax Dateimanager",<br />
width: 882,<br />
height: 540,<br />
inline : "yes",<br />
close_previous : "no"<br />
},{<br />
window : win,<br />
input : field_name,<br />
resizable: "yes"<br />
});<br />
return false;<br />
}<br />
// end ajaxfilemanager configuration<br />
</source><br />
Wenn man als Grundeinstellung nicht thumbnail, sondern detail wünscht, kann man die Zeile mit var view = 'thumbnail' entsprechend anpassen.<br /><br />
Im Forenthread befindet sich [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 in diesem Post (siehe Anhang)] meine tinyMCE.php mit allen Änderungen.<br />
<br />
==Nachtrag==<br />
Um die Änderungen updatesicher zu machen, kann AjaxFileManager auch so einbinden:<br /><br />
Die Datei ''system/config/tinyMCE.php'' kopieren und umbenennen in z.B. ''tinyCustom.php''.<br /><br />
Dann alle angeführten Änderungen in ''tinyCustom.php'' eintragen.<br /><br />
Zum Einbinden der ''tinyCustom.php'' folgende Zeile in ''system/config/dcaconfig.php'' eintragen:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';<br />
</source><br />
<br />
=Deutsche Sprachdatei hinzufügen=<br />
Die deutsche Sprachdatei findet sich im Forenthread und kann als Anhang von diesem [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 Posting] herunter geladen werden.<br /><br />
Diese Datei muss in das Verzeichnis ''plugins/tinyMCE/plugins/ajaxfilemanager/langs'' kopiert werden.<br />
<br />
=Ordner- und Dateirechte setzen=<br />
Wie ein Forumsmitglied bestätigte, ist dieser Abschnitt nur wichtig, wenn Contao im [[Safemode_Hack|Safe-Mode-Hack]]-Modus läuft.<br /><br />
Im SMH-Modus braucht der Ordner ''plugins/tinyMCE/plugins/ajaxfilemanager/session'' und die beiden darin enthaltenen Dateien die Dateirechte 0775, damit AjaxFileManager nicht die fehlenden Rechte moniert.<br />
<br />
=Dateirechte setzen für Dateien, die mit AjaxFileManager hochgeladen werden=<br />
(ebenfalls nur nötig für Installationen mit SafeMode-Hack)<br /><br />
AjaxFileManager bearbeitet Dateien nicht als ftp-user, sondern als Webserveruser. Das bedeutet u. U. Einschränkungen für AjaxFileManager bei Dateien, die dem ftp-user gehören, und umgekehrt.<br /><br />
Damit alle Vorgänge reibungslos funktionieren, brauchen die Dateien im ''tl_files/media''-Ordner (siehe Abschnitt [[#Konfigurationsdatei_bearbeiten|Konfigurationsdatei bearbeiten]]) und der Ordner selbst die Dateirechte 0775.<br /><br />
AjaxFileManager vergibt beim Upload aber nur die Dateirechte 0755. Um dies abzuändern, muss man in der Datei ''plugins/tinyMCE/plugins/ajaxfilemanager/inc/class.upload.php'' den Wert 0775 für var $uploadFileMode eintragen (Zeile 30):<br />
<source lang="php"><br />
var $uploadFileMode = 0775;<br />
</source><br />
<br />
=Forenthread=<br />
[http://www.contao-community.de/showthread.php?22358-Contao-tinyMCE-und-AjaxFileManger-HowTo Diskussionsthread im Forum]<br />
<br />
Wenn jemand etwas mit dieser Anleitung anfangen kann, dann würde es mich freuen.<br /><br />
Ulrike</div>Manitougshttps://de.contaowiki.org/TinyMCE_und_AjaxFileManagerTinyMCE und AjaxFileManager2011-09-04T12:30:13Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>{{AppliesTo<br />
|Version=2.10.0<br />
}}<br />
[[Category:Admin HOWTOS]]<br />
Eine Anleitung, wie man den kostenlosen und durchaus brauchbaren "AjaxFileManager" in Contao einbindet.<br />
<br />
=Download des AjaxFileManagers=<br />
Das Paket "Ajax File and Image Manager Version 1.0 Final" von [http://www.phpletter.com/download_project_version.php?version_id=33 php.letter.com] downloaden.<br />
<br />
=Dateien kopieren=<br />
Aus dem heruntergeladenen Paket (s.o.) den Ordner ''ajaxfilemanager'' nach ''plugins/tinyMCE/plugins/ajaxfilemanager'' kopieren.<br /><br />
Alles andere aus der heruntergeladenen zip-Datei wird nicht gebraucht.<br />
<br />
=Konfigurationsdatei bearbeiten=<br />
Die Datei ''plugins/tinyMCE/plugins/ajaxfilemanager/inc/config.base.php'' öffnen, darin in den Zeilen 52/53 CONFIG_SYS_DEFAULT_PATH und CONFIG_SYS_ROOT_PATH folgendermaßen setzen:<br />
<source lang="php"><br />
define('CONFIG_SYS_DEFAULT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
define('CONFIG_SYS_ROOT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
</source><br />
Dabei /media nach eigenen Wünschen anpassen oder auch weglassen...<br />
<br />
=tinyMCE.php bearbeiten=<br />
Die Konfigurationsdatei ''system/config/tinyMCE.php'' folgendermaßen bearbeiten:<br />
<br />
==ajaxfilemanager hinzufügen==<br />
In der Zeile, die mit ''elements:'' beginnt, ajaxfilemanager hinzufügen. Dies sieht dann so aus:<br />
<source lang="php"><br />
elements : "<?php echo $this->rteFields; ?>,ajaxfilemanager",<br />
</source><br />
<br />
==file_browser_callback ergänzen==<br />
Hinter theme_advanced_resizing: true, folgende Zeile einfügen:<br />
<source lang="php"><br />
file_browser_callback : "ajaxfilemanager",<br />
</source><br />
Ob es genau diese Position innerhalb der tinyMCE.php sein muss, weiß ich nicht, aber irgendwo stand diese Empfehlung und es funktioniert so bei mir.<br />
<br />
==Skript einfügen==<br />
Am Ende der Datei vor </script> folgendes einfügen:<br />
<source lang="php"><br />
// start ajaxfilemanager configuration<br />
function ajaxfilemanager(field_name, url, type, win) {<br />
var ajaxfilemanagerurl = "plugins/tinyMCE/plugins/ajaxfilemanager/ajaxfilemanager.php";<br />
switch (type) {<br />
case "image":<br />
break;<br />
case "media":<br />
break;<br />
case "flash":<br />
break;<br />
case "file":<br />
break;<br />
default:<br />
return false;<br />
}<br />
var view='thumbnail'; //alternativ: 'detail'<br />
var language='de';<br />
tinyMCE.activeEditor.windowManager.open({<br />
url: ajaxfilemanagerurl + '?view=' + view + '&language=' + language,<br />
title: "Ajax Dateimanager",<br />
width: 882,<br />
height: 540,<br />
inline : "yes",<br />
close_previous : "no"<br />
},{<br />
window : win,<br />
input : field_name,<br />
resizable: "yes"<br />
});<br />
return false;<br />
}<br />
// end ajaxfilemanager configuration<br />
</source><br />
Wenn man als Grundeinstellung nicht thumbnail, sondern detail wünscht, kann man die Zeile mit var view = 'thumbnail' entsprechend anpassen.<br /><br />
Im Forenthread befindet sich [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 in diesem Post (siehe Anhang)] meine tinyMCE.php mit allen Änderungen.<br />
<br />
==Nachtrag==<br />
Um die Änderungen updatesicher zu machen, kann AjaxFileManager auch so einbinden:<br /><br />
Die Datei ''system/config/tinyMCE.php'' kopieren und umbenennen in z.B. ''tinyCustom.php''.<br /><br />
Dann alle angeführten Änderungen in ''tinyCustom.php'' eintragen.<br /><br />
Zum Einbinden der ''tinyCustom.php'' folgende Zeile in ''system/config/dcaconfig.php'' eintragen:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';<br />
</source><br />
<br />
=Deutsche Sprachdatei hinzufügen=<br />
Die deutsche Sprachdatei findet sich im Forenthread und kann als Anhang von diesem [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 Posting] herunter geladen werden.<br /><br />
Diese Datei muss in das Verzeichnis ''plugins/tinyMCE/plugins/ajaxfilemanager/langs'' kopiert werden.<br />
<br />
=Ordner- und Dateirechte setzen=<br />
Wie ein Forumsmitglied bestätigte, ist dieser Abschnitt nur wichtig, wenn Contao im [[Safemode_Hack|Safe-Mode-Hack]]-Modus läuft.<br /><br />
Im SMH-Modus braucht der Ordner ''plugins/tinyMCE/plugins/ajaxfilemanager/session'' und die beiden darin enthaltenen Dateien die Dateirechte 0775, damit AjaxFileManager nicht die fehlenden Rechte moniert.<br />
<br />
=Dateirechte setzen für Dateien, die mit AjaxFileManager hochgeladen werden=<br />
(ebenfalls nur nötig für Installationen mit SafeMode-Hack)<br /><br />
AjaxFileManager bearbeitet Dateien nicht als ftp-user, sondern als Webserveruser. Das bedeutet u. U. Einschränkungen für AjaxFileManager bei Dateien, die dem ftp-user gehören, und umgekehrt.<br /><br />
Damit alle Vorgänge reibungslos funktionieren, brauchen die Dateien im ''tl_files/media''-Ordner (siehe Abschnitt [[#Konfigurationsdatei_bearbeiten|Konfigurationsdatei bearbeiten]]) und der Ordner selbst die Dateirechte 0775.<br /><br />
AjaxFileManager vergibt beim Upload aber nur die Dateirechte 0755. Um dies abzuändern, muss man in der Datei ''plugins/tinyMCE/plugins/ajaxfilemanager/inc/class.upload.php'' den Wert 0775 für var $uploadFileMode eintragen (Zeile 30):<br />
<source lang="php"><br />
var $uploadFileMode = 0775;<br />
</source><br />
<br />
[http://www.contao-community.de/showthread.php?22358-Contao-tinyMCE-und-AjaxFileManger-HowTo Diskussionsthread im Forum]<br />
<br />
Wenn jemand etwas mit dieser Anleitung anfangen kann, dann würde es mich freuen.<br /><br />
Ulrike</div>Manitougshttps://de.contaowiki.org/TinyMCE_und_AjaxFileManagerTinyMCE und AjaxFileManager2011-09-04T11:58:05Z<p>Manitougs: hat „TinyMCE und AjaxFileManager - HowTo“ nach „TinyMCE und AjaxFileManager“ verschoben und dabei eine Weiterleitung überschrieben: zurück verschieben</p>
<hr />
<div>{{AppliesTo<br />
|Version=2.10.0<br />
}}<br />
[[Category:Admin HOWTOS]]<br />
Eine Anleitung, wie man den kostenlosen und durchaus brauchbaren "AjaxFileManager" in Contao einbindet.<br />
<br />
<br />
= Download des AjaxFileManagers =<br />
Das Paket "Ajax File and Image Manager Version 1.0 Final" von php.letter.com downloaden, zurzeit aktueller Link: [http://www.phpletter.com/download_project_version.php?version_id=33 ajaxfilemanagerV1.0.Final.zip]<br />
<br />
= Dateien kopieren =<br />
Aus dem heruntergeladenen Paket (s.o.) den Ordner ajaxfilemanager<br />
kopieren nach plugins/tinyMCE/plugins/ajaxfilemanager.<br />
Alles andere aus der heruntergeladenen zip-Datei wird nicht gebraucht.<br />
<br />
= Konfigurationsdatei bearbeiten =<br />
Die Datei<br />
plugins/tinyMCE/plugins/ajaxfilemanager/inc/config.base.php öffnen,<br />
darin in den Zeilen 52/53 CONFIG_SYS_DEFAULT_PATH und CONFIG_SYS_ROOT_PATH folgendermaßen setzen:<br />
<source lang="php"><br />
define('CONFIG_SYS_DEFAULT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
define('CONFIG_SYS_ROOT_PATH', '../../../../tl_files/media'); //accept relative path only<br />
</source><br />
Dabei /media nach eigenen Wünschen anpassen oder auch weglassen...<br />
<br />
= tinyMCE.php bearbeiten =<br />
Die Konfigurationsdatei system/config/tinyMCE.php folgendermaßen bearbeiten:<br />
<br />
== ajaxfilemanager hinzufügen ==<br />
In der Zeile, die mit elements: beginnt, ajaxfilemanager hinzufügen, sieht dann so aus:<br />
<source lang="php"><br />
elements : "<?php echo $this->rteFields; ?>,ajaxfilemanager",<br />
</source><br />
<br />
== file_browser_callback ergänzen ==<br />
Hinter theme_advanced_resizing: true, folgende Zeile einfügen:<br />
<source lang="php"><br />
file_browser_callback : "ajaxfilemanager",<br />
</source><br />
Ob es genau diese Position innerhalb der tinyMCE.php sein muss, weiß ich nicht, aber irgendwo stand diese Empfehlung und es funktioniert so bei mir.<br />
<br />
== Skript einfügen ==<br />
Unten in der Datei vor </script> folgendes einfügen:<br />
<source lang="php"><br />
// start ajaxfilemanager configuration<br />
function ajaxfilemanager(field_name, url, type, win) {<br />
var ajaxfilemanagerurl = "plugins/tinyMCE/plugins/ajaxfilemanager/ajaxfilemanager.php";<br />
switch (type) {<br />
case "image":<br />
break;<br />
case "media":<br />
break;<br />
case "flash":<br />
break;<br />
case "file":<br />
break;<br />
default:<br />
return false;<br />
}<br />
var view='thumbnail'; //alternativ: 'detail'<br />
var language='de';<br />
tinyMCE.activeEditor.windowManager.open({<br />
url: ajaxfilemanagerurl + '?view=' + view + '&language=' + language,<br />
title: "Ajax Dateimanager",<br />
width: 882,<br />
height: 540,<br />
inline : "yes",<br />
close_previous : "no"<br />
},{<br />
window : win,<br />
input : field_name,<br />
resizable: "yes"<br />
});<br />
return false;<br />
}<br />
// end ajaxfilemanager configuration<br />
</source><br />
Wenn man als Grundeinstellung nicht thumbnail, sondern detail wünscht, kann man die Zeile mit var view = 'thumbnail' entsprechend anpassen.<br />
Im Forum findet sich meine tinyMCE.php mit allen Änderungen: [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 Tutorial zu Contao, tinyMCE und AjaxFileManager], s. Anhang.<br />
<br />
== Nachtrag ==<br />
Wer es gerne updatesicher möchte, kann AjaxFileManager auch so einbinden:<br />
Die Datei system/config/tinyMCE.php kopieren und umbenennen in z.B. tinyCustom.php.<br />
Dann alle angeführten Änderungen in tinyCustom.php eintragen.<br />
Zum Einbinden der tinyCustom.php folgende Zeile in system/config/dcaconfig.php eintragen:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';<br />
</source><br />
<br />
= Deutsche Sprachdatei hinzufügen =<br />
Die deutsche Sprachdatei findet sich hier: [http://www.contao-community.de/showthread.php?22358&p=149890&viewfull=1#post149890 Tutorial zu Contao, tinyMCE und AjaxFileManager], s. Anhang.<br />
Bitte kopieren in das Verzeichnis plugins/tinyMCE/plugins/ajaxfilemanager/langs<br />
<br />
= Ordner- und Dateirechte setzen =<br />
Wie ein Forumsmitglied bestätigte, ist dieser Abschnitt nur wichtig, wenn Contao im Safe-Mode-Hack-Modus läuft.<br />
Im SMH-Modus brauchen der Ordner plugins/tinyMCE/plugins/ajaxfilemanager/session und die beiden darin enthaltenen Dateien die Dateirechte 0775, damit AjaxFileManager nicht die fehlenden Rechte moniert.<br />
<br />
= Dateirechte setzen für Dateien, die mit AjaxFileManager hochgeladen werden =<br />
(ebenfalls nur nötig für Installationen mit SafeMode-Hack)<br /><br />
AjaxFileManager bearbeitet Dateien nicht als ftp-user, sondern als Webserveruser. Das bedeutet u. U. Einschränkungen für AjaxFileManager bei Dateien, die dem ftp-user gehören, und umgekehrt.<br />
Damit alle Vorgänge reibungslos funktionieren, brauchen die Dateien im tl_files/media-Ordner (zu /media s. oben, Abschnitt Konfigurationsdatei bearbeiten) und der Ordner selbst die Dateirechte 0775.<br />
AjaxFileManager vergibt beim Upload aber nur die Dateirechte 0755.<br />
Um dies abzuändern, muss man in der Datei plugins/tinyMCE/plugins/ajaxfilemanager/inc/class.upload.php den Wert 0775 für var $uploadFileMode eintragen (Zeile 30):<br />
<source lang="php"><br />
var $uploadFileMode = 0775;<br />
</source><br />
<br />
<br />
Wenn jemand etwas mit dieser Anleitung anfangen kann, dann würde es mich freuen. Ulrike</div>Manitougshttps://de.contaowiki.org/DC_MemoryDC Memory2011-09-04T11:33:10Z<p>Manitougs: Link zum Tracker eingefügt</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
{{ExtInfo<br />
| Dev=Stefan Lindecke, Yanick Witschi<br />
| ExtVersion=0.5.0 rc1<br />
| Version=2.9.0 - 2.10,0 RC1<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/DC_Memory.de.html<br />
| TrackerLink=http://www.contao-forge.org/projects/c3framework/issues<br />
| Depending=[http://www.contao.org/erweiterungsliste/view/3CFramework.de.html 3CFramework]<br />
}}<br />
<br />
=Allgemeines=<br />
Die DC_Memory ist ein eigener DCA-Driver wie die DC_Table oder andere. Allerdings bietet diese für den Entwickler extrem viel mehr Flexibilität, als die DC_Table, weil die DC_Memory das Laden und Speichern der Daten vollständig dem Entwickler überlässt.<br />
<br />
=Daten laden und speichern=<br />
<br />
Zum Speichern und Laden der Daten werden die bekannten ''onload_callbacks'' und ''onsubmit_callbacks'' genutzt.<br />
Hier ein Beispiel:<br />
<br />
<source lang="php"><br />
'onload_callback' => array<br />
(<br />
array('class', 'onload_callback'),<br />
),<br />
'onsubmit_callback' => array<br />
(<br />
array('class', 'onsubmit_callback'),<br />
)<br />
</source><br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
// Werte holen von der DB oder einem File oder was auch immer<br />
<br />
// Setzen eines Wertes<br />
$dc->setData('field', 'Wert');<br />
<br />
// auch das Setzen aller Werte auf einmal funktioniert:<br />
$arrData = array();<br />
$arrData['field1'] = 'Wert 1';<br />
$arrData['field2'] = 'Wert 2';<br />
$dc->setDataArray($arrData);<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Speichern der Daten<br />
* @param DataContainer<br />
*/<br />
public function onsubmit_callback(DataContainer $dc)<br />
{<br />
// Holen eines Wertes<br />
$strField1 $dc->getData('field1');<br />
<br />
// auch das Holen aller Werte auf einmal funktioniert:<br />
$arrData = $dc->getDataArray();<br />
<br />
// und dann ab in die DB oder in ein File oder wohin auch immer<br />
}<br />
</source><br />
<br />
=Versionierung=<br />
Auf die Contao-eigene Versionierung wird verzichtet, da diese für die meisten Entwickler zu wenig Flexibilität bietet (was aber nicht bedeutet, dass man die Core-Versionierung nicht auch einbauen kann).<br />
<br />
Folgende Konfiguration ist notwendig:<br />
<source lang="php"><br />
'enableVersioning' => true,<br />
'dcMemory_versioning_list_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_list_callback'),<br />
),<br />
'dcMemory_versioning_restore_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_restore_callback'),<br />
),<br />
'dcMemory_versioning_createInitial_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_createInitial_callback'),<br />
)<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, welche Versionen im Dropdown angeboten werden<br />
* @param DataContainer<br />
* @param array<br />
* @return array<br />
*/<br />
public function dcMemory_versioning_list_callback(DataContainer $dc, $arrVersions)<br />
{<br />
$arrVersions[] = array<br />
(<br />
'value' => 'version_1',<br />
'selected' => true, // Diese Version ist die jüngste<br />
'label' => 'Meine jüngste Version'<br />
);<br />
<br />
return $arrVersions;<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, was nach dem Klick auf "Wiederherstellen" passiert (also evtl. auch $this->reload() aufrufen!)<br />
* @param DataContainer<br />
* @param string | enthält die Version<br />
*/<br />
public function dcMemory_versioning_restore_callback(DataContainer $dc, $strVersion)<br />
{<br />
// $strVersion enthält den value, also z.B. "version_1"<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, was bei der Ersterstellung einer Version gemacht werden soll<br />
* @param DataContainer<br />
*/<br />
public function dcMemory_versioning_createInitial_callback(DataContainer $dc)<br />
{<br />
// Erstversion anlegen<br />
}<br />
</source><br />
<br />
=Mehrsprachigkeit=<br />
<br />
Die DC_Memory unterstützt auch Mehrsprachigkeit. Da sie sich nicht darum kümmert, woher die Daten kommen und wohin sie gespeichert werden, bietet sie schlichtweg die Möglichkeit, Sprachen und Methoden zur Abfrage anzubieten, welche Sprache aktuell bearbeitet wird.<br />
Die Konfiguration erfolgt im ''onload_callback'' und könnte so aussehen:<br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
// Sprachwechsel-Konfiguration<br />
$objLangConfig = new stdClass();<br />
<br />
// Fallback zusätzlich zu den Sprachen anbieten<br />
$objLangConfig->enableFallback = true;<br />
<br />
// Sprachen-Array<br />
$objLangConfig->arrLanguages = array<br />
(<br />
'de',<br />
'fr'<br />
);<br />
<br />
// und jetzt das ganze noch aktivieren<br />
$dc->enableLanguageSwitch($objLangConfig);<br />
<br />
// die getLanguage()-Methode bietet die Möglichkeit, die aktuell bearbeitete Sprache zu holen <br />
switch($dc->getLanguage())<br />
{<br />
case 'de':<br />
$dc->setData('name', 'Wir sprechen sowas von Deutsch!');<br />
break;<br />
case 'fr':<br />
$dc->setData('name', 'On parle le français aussi!');<br />
break;<br />
default:<br />
$dc->setData('name', 'What about a fallback?');<br />
}<br />
<br />
// Sprachen können auch gelöscht werden.<br />
$strEditMode = $dc->getLanguageEditMode() // enthält entweder "edit" wenn man eine Sprache bearbeitet oder "delete" wenn die Sprache gelöscht werden soll<br />
}<br />
</source><br />
<br />
Man kann zudem jedem Feld sagen, für welche Sprache es übersetzbar sein sollte. Beim Fallback werden logischerweise alle Felder angezeigt.<br />
Hier z.B. ein Feld welches für alle Sprachen übersetzbar sein soll:<br />
<source lang="php"><br />
'name' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['table']['name'],<br />
'inputType' => 'text',<br />
'eval' => array('mandatory'=>true,'tl_class'=>'w50'),<br />
'translatableFor' => array('*')<br />
),<br />
</source><br />
Hier ein Feld, das nur nach Deutsch und Französisch übersetzbar ist:<br />
<source lang="php"><br />
'name' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['table']['name'],<br />
'inputType' => 'text',<br />
'eval' => array('mandatory'=>true,'tl_class'=>'w50'),<br />
'translatableFor' => array('de', 'fr')<br />
),<br />
</source><br />
<br />
Fehlt der Paramter "translatableFor" gänzlich, so ist das Feld nicht übersetzbar.<br />
<br />
=Buttons hinzufügen=<br />
Im Contao-Core ist es äußerst mühsam, eigene Buttons à la "Speichern und Schliessen" hinzuzufügen. Mit der DC_Memory geht das ganz einfach:<br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
$arrData = array<br />
(<br />
'id'=>'saveNredirectToGoogle',<br />
'formkey'=>'saveNredirectToGoogle',<br />
'class'=>'',<br />
'accesskey'=>'g',<br />
'value'=>specialchars($GLOBALS['TL_LANG']['MSC']['saveNredirectToGoogle']),<br />
'button_callback' => array('class', 'saveNredirectToGoogleButtonCallback')<br />
);<br />
$dc->addButton('saveNredirectToGoogle', $arrData);<br />
}<br />
<br />
<br />
/**<br />
* Nach dem Speichern zu Google weiterleiten<br />
* @param DataContainer<br />
*/<br />
public function saveNredirectToGoogleButtonCallback(DataContainer $dc)<br />
{<br />
$this->redirect('http://www.google.com');<br />
}<br />
</source><br />
<br />
Falls bei einem Button die Daten nicht gespeichert werden sollen, liegt es am Programmierer, diesen Fall vorherzusehen. Der ''onsubmit_callback' wird zuerst aufgerufen. Die Speicherung sollte also in diesem Falle dort nicht vorgenommen werden, wenn z.B. $this->Input->post('myButton') gesetzt ist.<br />
<br />
=Die Listenansicht=<br />
Contao verlangt von einem DataContainer, welcher Daten auflistet, dass vier Methoden eingebunden werden:<br />
* showAll()<br />
* show()<br />
* delete()<br />
* undo()<br />
<br />
Deshalb gibt es für die vier Methoden jeweils Callbacks:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_showAll_callback'][] = array('class', 'dcMemory_showAll_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_show_callback'][] = array('class', 'dcMemory_show_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_delete_callback'][] = array('class', 'dcMemory_delete_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_undo_callback'][] = array('class', 'dcMemory_undo_callback');<br />
</source><br />
<br />
=DC_Memory_Helpers=<br />
Die DC_Memory_Helpers Klasse unterstützt Entwickler bei trivialen Dingen, die immer wieder gebraucht werden.<br />
<br />
==Beispiel für eine listView und Panel mit Limit wie bei DC_Table==<br />
Dieses Beispiel wird eine Listenansicht generieren; mit einem Panel und der Auswahl, welche Einträge man ansehen möchte. Es werden immer 2 Einträge pro Seite angezeigt.<br /><br />
Hier am Beispiel der Tabelle tl_user und jeweils mit zwei Operationen, nämlich "edit" und "copy"; das Ganze gruppiert nach Anfangsbuchstabe des Usernames.<br />
<br />
<source lang="php"><br />
public function dcMemory_showAll_callback(DataContainer $dc)<br />
{<br />
$objHelper = new DC_Memory_Helpers($dc);<br />
// sets the current limits to the session according to DC_Table<br />
$objHelper->setCurrentLimits();<br />
<br />
// total<br />
$objTotal = $this->Database->execute("SELECT COUNT(id) AS total FROM tl_user");<br />
<br />
// get the data<br />
$objData = $this->Database->execute('SELECT id,username FROM tl_user' . $objHelper->getLimitForSQL());<br />
$arrDataArray = array();<br />
<br />
while($objData->next())<br />
{<br />
// get the first letter of the username<br />
$strFirstLetter = substr($objData->username,0,1);<br />
<br />
$arrDataArray[$strFirstLetter]['label'] = ucfirst($strFirstLetter);<br />
$arrDataArray[$strFirstLetter]['data'][] = array<br />
(<br />
'id' => $objData->id,<br />
'class' => 'list_icon',<br />
'style' => 'background-image:url(\'system/themes/default/images/user.gif\');',<br />
'label' => $objData->username,<br />
'buttons' => array<br />
(<br />
'edit' => array<br />
(<br />
'href' => 'contao/main.php?do=user&amp;act=edit&amp;id=' . $objData->id,<br />
'title' => 'Edit user ID ' . $objData->id,<br />
'icon' => 'system/themes/default/images/edit.gif',<br />
'icon_w' => '12',<br />
'icon_h' => '16',<br />
'alt' => 'Edit user' <br />
),<br />
'copy' => array<br />
(<br />
'href' => 'contao/main.php?do=user&amp;act=copy&amp;id= ' . $objData->id,<br />
'title' => 'Duplicate user ID ' . $objData->id,<br />
'icon' => 'system/themes/default/images/copy.gif',<br />
'icon_w' => '14',<br />
'icon_h' => '16',<br />
'alt' => 'Duplicate user' <br />
)<br />
)<br />
);<br />
}<br />
<br />
// 2 Einträge pro Seite<br />
$strLimitHtml = $objHelper->generateLimitMenuString($objTotal->total, 2);<br />
<br />
$strPanel = $objHelper->generatePanel($strLimitHtml);<br />
$strGlobalOperations = $objHelper->generateGlobalOperationsString();<br />
$strListView = $objHelper->generateListViewString($arrDataArray);<br />
return $strPanel . $strGlobalOperations . $strListView;<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/Frontend-VorschauFrontend-Vorschau2011-09-04T11:23:49Z<p>Manitougs: </p>
<hr />
<div>[[Category:Anwender_und_Redakteure]]<br />
[[Category:Admin_HOWTOS]]<br />
Wenn man im Backend arbeitet, bietet Contao die Möglichkeit, die Webseite in der Frontend-Vorschau zu betrachten.<br />
<br />
[[Datei:backend-header.png]]<br />
<br />
<br />
Gegenüber der normalen Website-Betrachtung bietet die Frontend-Vorschau verschiedene Einstellungen, wie das Frontend dargestellt werden soll.<br />
<br />
<br />
[[Datei:frontend-vorschau.jpg]]<br />
<br />
<br />
*'''Frontend-Benutzer''': Mit dieser Einstellung kann definiert werden, mit welchen Mitglied das Frontend betrachtet werden soll. Wie sieht die Website aus der Sicht von einem normalen Besucher (-) aus, wie aus der Sicht von einem registriertem Mitglied,... Da unterschiedliche Mitglieder(gruppen) auch unterschiedliche Elemente sehen können (je nach Freigabeeinstellungen), kann man die Ansicht dieser hier einstellen.<br />
{{Hinweis| Die Simulation angemeldeter Frontend-Benutzer ist nur für Administratoren und nicht für "normale" Backend-Benutzer verfügbar.}}<br />
<br />
*'''Unveröffentlichte Elemente''': Hier kann eingestellt werden, ob unveröffentlichte Elemente (Artikel, News, Inhaltselemente in Artikeln, Events,...) angezeigt werden soll oder nicht. Diese Einstellung ist dann nützlich, wenn man z.B. gerade einen Artikel schreibt, der zwar noch nicht veröffentlicht ist, diesen aber gerne im Frontend betrachten will.<br />
{{Hinweis|Jedoch sollte man diese Einstellung zurücknehmen, da einem sonst die versteckten Inhalte auch ohne Vorschaumodus weiterhin angezeigt werden. Contao speichert diese Einstellung per Cookie, daher hilft ein Löschen des Caches oder ein einfaches Schliessen des Vorschaumodus nicht.}}<br />
*'''Anwenden''': Über diesen Button werden die unter "Frontend-Benutzer" und "Unveröffentlichte Elemente" getätigten Einstellungen auf die Vorschau übernommen.<br />
<br />
*'''Neu Laden''': Wenn man im Backend bei einem Artikel oder ähnlichen Änderungen gemacht hat, kann man diese Änderungen in der Vorschau erst dann sehen, wenn man die Seite mit diesem Button neu lädt.<br />
<br />
*'''Schliessen''': Dieser Button schliesst die Frontend-Vorschau und die Webseite wird normal dargestellt. '''Wichtig:''' Wenn vorher z.B. "Unveröffentlichte Elemente" auf "anzeigen" gestellt wurde, wird nach dem Schliessen der Frontend-Vorschau die versteckten Elemente so lange angezeigt, bis man sich im Backend ausgeloggt hat.</div>Manitougshttps://de.contaowiki.org/Extension_XYZ_installiertExtension XYZ installiert2011-09-04T11:18:04Z<p>Manitougs: </p>
<hr />
<div>Wenn ein Modul von einem anderen Modul abhängig ist, ist es manchmal nötig festzustellen, ob dieses installiert ist.<br />
[[Category:Development]]<br />
[[Category:Dev Snippets]]<br />
{{AppliesTo|TLVersion=ab 2.7|Version=ab 2.9}}<br />
Das ist wie folgt möglich:<br />
<source lang="php"><br />
if (in_array('XYZ', $this->Config->getActiveModules()))<br />
{<br />
// Extension XYZ ist installiert und nicht deaktiviert<br />
} <br />
else<br />
{<br />
// Extension XYZ fehlt oder deaktiviert, Abbruch / Warnung<br />
}<br />
</source><br />
<br />
Wenn bei einem Update der eigenen Extension eine neue Abhängigkeit zu einer anderen Extension hinzugekommen ist, wird diese bei der Aktualisierung über das Extension Repository '''nicht''' mitinstalliert. Der folgende Codeschnippsel prüft die benötigten Extensions UND Dateien und zeigt im Backend solange eine eine entsprechende Meldung an, bis der User sie nachinstalliert hat.<br />
<br />
<source lang="php"><br />
public function checkExtensions($strContent, $strTemplate)<br />
{<br />
if ($strTemplate == 'be_main')<br />
{<br />
if (!is_array($_SESSION["TL_INFO"])) $_SESSION["TL_INFO"] = array();<br />
<br />
// required extensions<br />
$arrRequiredExtensions = array('cron', 'textwizard', '3cframework', 'multicolumnwizard');<br />
<br />
// required files<br />
$arrRequiredFiles = array('system/libraries/RequestExtended.php', 'system/drivers/DC_Memory.php', 'ajax.php');<br />
<br />
// check for required extensions<br />
foreach ($arrRequiredExtensions as $val)<br />
{<br />
if (!in_array($val, $this->Config->getActiveModules()))<br />
{<br />
$_SESSION["TL_INFO"] = array_merge($_SESSION["TL_INFO"], array($val => 'Please install the required extension <strong>'.$val.'</strong>'));<br />
<br />
}<br />
else<br />
{<br />
if (is_array($_SESSION["TL_INFO"]) && key_exists($val, $_SESSION["TL_INFO"]))<br />
{<br />
unset ($_SESSION["TL_INFO"][$val]);<br />
}<br />
}<br />
}<br />
<br />
// check for required files<br />
foreach ($arrRequiredFiles as $val)<br />
{<br />
if (!file_exists(TL_ROOT . '/'. $val))<br />
{<br />
$_SESSION["TL_INFO"] = array_merge($_SESSION["TL_INFO"], array($val => 'Please install the required file <strong>'.$val.'</strong>'));<br />
<br />
}<br />
else<br />
{<br />
if (is_array($_SESSION["TL_INFO"]) && key_exists($val, $_SESSION["TL_INFO"]))<br />
{<br />
unset ($_SESSION["TL_INFO"][$val]);<br />
}<br />
}<br />
}<br />
<br />
}<br />
<br />
return $strContent;<br />
}<br />
</source><br />
<br />
Als Hook wird ''parseBackendTemplate'' verwendet!<br />
<br />
<source lang="php"><br />
$GLOBALS['TL_HOOKS']['parseBackendTemplate'][] = array('MyClass', 'checkExtensions');<br />
</source><br />
<br />
<br />
----<br />
--[[Benutzer:BugBuster|BugBuster]] 14:38, 12. Jul. 2010 (CEST)</div>Manitougshttps://de.contaowiki.org/Contao2GoContao2Go2011-09-04T11:13:47Z<p>Manitougs: /* MySQLi aktivieren */</p>
<hr />
<div>[[Category:Sonstiges]]<br />
<br />
=Grundlagen=<br />
Contao2Go ist ein selbst konfigurierendes WAMP System, welches ohne Installation von Software auskommt.<br />
Ein einfaches Auspacken und Starten der Server2Go.exe ermoeglicht, Contao (sowie durch nachladbare C2G Pakete auch TYPOlight) lokal ausgiebig zu testen.<br />
<br />
Besonderheit hierbei ist das Snapshot System, womit jederzeit der Zustand einer Entwicklung eingefroren werden kann und jederzeit wiederherstellbar ist.<br />
<br />
Hierdurch ist es zum Beispiel moeglich, Kundenpraesentationen mit unterschiedlichen Designs aufzubauen, ohne das man spaeter beim Kunden gross im Backend etwas aendern muss. Es muss nur in den Designphasen ein SnapShot erstellt werden.<br />
Dieser kann dann komfortabel mittels Klick innerhalb weniger Sekunden wiederhergestellt werden.<br />
<br />
Aktuell sind folgende Moeglichkeiten vorhanden :<br />
*vHost Uebersicht<br />
**vorhandene Installationen aufzeigen, incl. der Moeglichkeit, direkt in einem neuen Fenster das Frontend oder das Backend aufzurufen.<br />
**Snapshot der Installation erstellen<br />
**Installation incl. Datenbank entfernen <br />
<br />
*Sicherungen<br />
**Vorhandene SIcherungen einsehen, hierbei sind die Sicherungen Installationsbezogen geordnet<br />
**Sicherungen wiederherstellen<br />
**Sicherungen loeschen<br />
<br />
=Wirtssystem=<br />
==Windows==<br />
Um Contao2Go unter Windows nutzen zu können, muss die entsprechende exe-Datei von der Projekthomepage [http://www.contao2go.org/herunterladen.html heruntergeladen] werden. Diese exe-Datei ist ein selbstextrahierendes Zip-Paket, welches man nach einem Doppelklick darauf an einen Ort seiner Wahl entpackt.<br /><br />
In dem Ordner findet man eine Datei namens ''Server2Go.exe''; mit dieser wird Contao2Go gestartet. Wenn Contao2Go korrekt gestartet wurde, erscheint im Infobereich neben der Uhr ein entsprechendes Icon.<br />
<br />
[[Datei:c2g_systray.png|Contao2Go-Icon im Infobereich|center|frame]]<br />
<br />
Contao2Go ist nun einsatzbereit und kann über den Link [http://localhost:4001 http://localhost:4001] aufgerufen und verwendet werden.<br /><br />
Will man Contao2Go an einen anderen Ort verschieben oder beenden, klickt man auf das Icon im Infobereich und wählt ''Close Contao2Go''.<br />
<br />
===Update===<br />
Bevor man das Wirtssystem von Contao2Go updaten kann, muss man von jeden vHost eine Sicherung erstellen. Dies geschieht in der Übersichtsseite von Contao2Go. Anschliessend beendet man Contao2Go und sichert den Ordner ''\Contao2Go\htdocs\backups'', indem sich die Sicherungen befinden. Im nächsten Schritt lädt man sich das aktuelle Contao2Go von der Projekthomepage und entpackt es in einen '''neuen''' Ordner. Nun spielt man den zuvor gesicherten Ordner ''backups'' wieder in das neue Contao2Go ein.<br /><br />
Nachdem man kontrolliert hat, ob alle Sicherungen wieder vorhanden sind, kann man den alten Contao2Go-Ordner löschen.<br />
<br />
==Linux==<br />
noch nicht veröffentlicht...<br />
==Mac OS X==<br />
noch nicht veröffentlicht...<br />
==Sonderfall c2gadmin==<br />
{{msgWarning|Contao2Go ist nicht für einen Online-Einsatz vorgesehen und sollte aus Sicherheitsgründen nicht öffentlich im Netz betrieben werden!}}<br />
Ein Sonderfall ist c2gadmin, mit der Contao2Go einfach in eine existierende Contao-Installation eingebunden werden kann. Dazu installiert man sich einfach über die Erweiterungsverwaltung einer Contao-Installation die Erweiterung [http://www.contao.org/erweiterungsliste/view/c2gadmin.10000006.de.html c2gadmin].<br /><br />
Anschliessend stehen in den Artikeln 2 neue Inhaltselemente bereit:<br />
*c2g_listBackups: Als Weiterleitungsseite muss jene Seite angegeben werden, auf der das zweite Inhaltselement (c2g_listVHosts) eingebunden ist.<br />
*c2g_listVHosts: Als Weiterleitungsseite muss jene Seite angegeben werden, auf der das erste Inhaltselement (c2g_listBackups) eingebunden ist.<br />
<br />
=Nutzung=<br />
{{msgInfo|In C2G-SnapShots ist die Datenbank anonymisiert. D.h. Datenbank Eintraege in der localconfig.php werden automatisch entfernt und beim Import automatisch basierend auf dem aktuellen System gesetzt. Somit ist auch eine Weitergabe der C2G Pakete an Kunden problemlos moeglich.}}<br />
==Eine neue Installation erstellen==<br />
Dazu wechselt man in der Contao2Go-Verwaltung auf die Seite ''Informationen'', klickt den Link [http://localhost:4001/phpmyadmin /phpmyadmin] und loggt sich mit dem Benutzernamen ''root'' ein (Passwort ist keines erforderlich). Anschliessend erstellt man in dem auf der Startseite befindlichen Bereich ''My SQL localhost'' eine neue Datenbank mit der Kollation ''utf8_general_ci''.<br />
<br />
[[Datei:c2g_phpmyadmin_newdb.png|Neue Datenbank erstellen|center|frame]]<br />
<br />
Danach kann phpmyadmin geschlossen werden.<br />
<br />
Als nächsten Schritt wechselt man im Dateiexplorer des Betriebssystems in den Ordner von Contao2Go und von dort aus in den Unterordner ''\Contao2Go\htdocs\vhosts''. Hier erstellt man einen Ordner (z.B. namens testseite).<br /><br />
In diesem Ordner kopiert man den Inhalt der Core-Installation, den man sich von der [http://www.contao.org/herunterladen.html Contao-Homepage] heruntergeladen hat.<br />
<br />
[[Datei:c2g_filebrowser.png|Dateisystem|frame|center]]<br />
<br />
Ab diesem Zeitpunkt ist die Seite in der Contao2Go-Verwaltung unter ''Hosts'' gelistet.<br />
<br />
Nun kann man Contao wie gewohnt über das [http://localhost:4001/vhosts/testseite/contao/install.php Installtool] installieren. Bei der Installation ist darauf zu achten, dass man die korrekten Datenbank-Daten verwendet:<br />
*Treiber: MySQL<br />
*Host: localhost<br />
*Benutzername: root<br />
*Datenbank: test<br />
*Dauerhafte Verbindung: nein<br />
*Zeichensatz: UTF8<br />
*Portnummer: 7188<br />
<br />
Nach der Installation kann die Seite verwendet werden.<br />
<br />
==Eine bestehende Installation integrieren==<br />
Eine bestehende Installation (z.B. aus XAMPP oder einer Live-Webseite) in Contao2Go integrieren funktioniert prinzipiell nach dem selben System wie eine [[Contao2Go#Eine_neue_Installation_erstellen|neue Installation zu erstellen]]:<br />
*Eine Sicherung des existierenden Dateisystem nach ''\Contao2Go\htdocs\vhosts\testseite\ kopieren.<br />
*Ein Backup der existierenden Datenbank erstellen (z.B. mit der Erweiterung [[BackupDB]]).<br />
*Eine leere Datenbank in phpmyadmin erstellen und das zuvor erstellte Datenbank-Backup in diese Datenbank importieren.<br />
*Die Datei ''\Contao2Go\htdocs\vhosts\testseite\system\config\localconfig.php öffnen und die Zugangsdaten der Datenbank anpassen:<br />
<source lang="php"><br />
$GLOBALS['TL_CONFIG']['dbDriver'] = 'MySQL';<br />
$GLOBALS['TL_CONFIG']['dbHost'] = 'localhost';<br />
$GLOBALS['TL_CONFIG']['dbUser'] = 'root';<br />
$GLOBALS['TL_CONFIG']['dbPass'] = '';<br />
$GLOBALS['TL_CONFIG']['dbDatabase'] = 'test';<br />
$GLOBALS['TL_CONFIG']['dbPconnect'] = false;<br />
$GLOBALS['TL_CONFIG']['dbCharset'] = 'UTF8';<br />
$GLOBALS['TL_CONFIG']['dbPort'] = 7188;<br />
</source><br />
*Falls eine .htaccess - Datei verwendet wird, diese kontrollieren (z.B. auf Hosterspezifische Einträge).<br />
*Anschliessend wird das Installtool der Webseite aufgerufen. Dies dient dazu, um a) die neuen Seitenpfade zu erstellen (geschieht automatisch, ohne dass man etwas machen muss) und b) um die Datenbank-Verbindung zu prüfen.<br />
*Zuletzt loggt man sich im Backend ein und kontrolliert in der Seitenstruktur im ''Startpunkt der Webseite'' im Abschnitt ''DNS-Einstellungen'' das Feld ''Domainname''. Sollte ein Eintrag vorhanden sein, löscht man diesen.<br />
<br />
==Ein c2g-Paket importieren==<br />
Zuerst lädt man sich das gewünschte c2g-Paket von der [http://contao2go.org/pakete.html Projekt-Homepage] auf seinen Computer. Anschliessend wechselt man in seiner lokalen C2G-Webseite auf die Seite [http://localhost:4001/importieren.html Importieren]. Dort klickt man auf den Button ''Durchsuchen'' und wählt das herunter geladene c2g-Paket aus; gefolgt von einem Klick auf den Button ''Importieren''.<br />
<br />
[[Datei:c2g_import.png|c2g-Paket importieren|center|frame]]<br />
<br />
Nachdem der Import erfolgreich durchgeführt wurde, erscheint eine entsprechende Meldung. Anschliessend wechselt man mit dem darunter stehenden Link auf die Sicherungsübersicht.<br />
<br />
[[Datei:c2g_importsuccess.png|Import erfolgreich durchgeführt|center|frame]]<br />
<br />
In der Sicherungsübersicht erscheint nun das vorhin importierte c2g-Paket.<br />
<br />
[[Datei:c2g_backups.png|Sicherungsübersicht|center|frame]]<br />
<br />
Mit einem Klick auf den Button ''Sicherung wiederherstellen'' (2 gelben Pfeile) wird die Sicherung nun wiederhergestellt. Auf der Seite ''Hosts'' ist das importierte c2g-Paket nun als entsprechende Webseite gelistet und kann verwendet werden.<br />
<br />
[[Datei:c2g_hosts.png|Host Übersicht|frame|center]]<br />
<br />
=Tips und Tricks=<br />
==Beschreibung für einen vHost erstellen==<br />
Um eine Beschreibung für die vHost-Übersicht bereit zu stellen, muss eine Datei namens ''package.info'' im Root-Verzeichnis des jeweiligen vHosts erstellt werden.<br />
Der Inhalt dieser Datei entspricht einer XML-Datei und kann mehrsprachigen Beschreibungstext enthalten. Pflichtsprache ist englisch (en), da diese als Standardsprache verwendet wird. Weitere Sprachen können mit den üblichen 2 Zeichen Ländercodes hinzugefügt werden. Anbei ein Beispiel:<br />
<source lang="xml"><br />
<package><br />
<de> <br />
<description><br />
<![CDATA[<br />
Standardinstallation des Contao2Go Paketes.<br><br />
Beinhaltet die Themes <ul><br />
<li><a href="http://www.contaothemes.de/" title="fences" onclick="window.open(this.href); return false;">fences</a> der <a href="http://www.contao.org/partner.html?show=5334" title="piyo medienagentur" onclick="window.open(this.href); return false;">piyo medienagentur (Lars Tubies)</a></li><br />
<li><a href="http://themes.contao-agentur.de/ka-classic/" title="kl_classic" onclick="window.open(this.href); return false;">ka_classic</a> der <a href="http://www.contao.org/partner.html?show=502" title="Die Kommunikationsabteilung" onclick="window.open(this.href); return false;">Kommunikationsabteilung (Fabian Fauth)</a></li><br />
</ul><br />
]]><br />
</description><br />
</de><br />
<en><br />
<description><br />
<![CDATA[<br />
Standardinstallation for Contao2Go package<br><br />
Contains following Themes <ul><br />
<li><a href="http://www.contaothemes.de/" title="fences" onclick="window.open(this.href); return false;">fences</a> from <a href="http://www.contao.org/partner.html?show=5334" title="piyo medienagentur" onclick="window.open(this.href); return false;">piyo medienagentur (Lars Tubies)</a></li><br />
<li><a href="http://themes.contao-agentur.de/ka-classic/" title="kl_classic" onclick="window.open(this.href); return false;">ka_classic</a> from <a href="http://www.contao.org/partner.html?show=502" title="Die Kommunikationsabteilung" onclick="window.open(this.href); return false;">Kommunikationsabteilung (Fabian Fauth)</a></li><br />
</ul><br />
]]><br />
</description><br />
</en><br />
</package><br />
</source><br />
==max_execution_time erhöhen==<br />
Bei grossen c2g-Paketen oder bei langsamen USB-Sticks kann es vorkommen, dass es bei der Sicherungswiederherstellung zu einem timeout kommt. In der Regel wird das mit folgender Fehlermeldung quittiert:<br />
<source lang="text"><br />
Fatal error: Maximum execution time of 10 seconds exceeded in D:\Contao2Go\htdocs\system\modules\c2gadmin\c2g_functions.php on line 259<br />
</source><br />
Abhilfe schafft hier die Erhöhung der max_execution_time des Servers. Dazu wechstelt man im Dateisystem in den Ordner ''\Contao2Go\server\config_tpl\'' und öffnet die Datei ''php.ini''. In dieser sucht man nach der Zeile:<br />
<source lang="php"><br />
max_execution_time = 120<br />
</source><br />
Nun kann man die Zeit entsprechend erhöhen (z.B. 180 oder 240). Anschliessend startet man Contao2Go neu.<br />
==MySQLi aktivieren==<br />
Damit man bei Contao2Go MySQLi verwenden kann, muss man im Ordner ''server/config_tpl'' die Datei ''php.ini'' bearbeiten und unter den '';Windows Extensions'' folgende Zeile hinzufügen:<br />
<br />
<source><br />
extension=php_mysqli_libmysql.dll<br />
</source><br />
<br />
'''Wichtig'''<br />
<br />
Beim Erstellen einer Verbindung muss man nur bedenken, dass der Standard MySQL Port hier auf 7188 steht und man deshalb beim Erstellen einer Verbindung den Port 3306 mitgibt.<br />
<br />
=Screenshots=<br />
<br />
[[Datei:Contao2go_28012011_201855.png|center|frame|v-Hosts Übersicht]]<br />
<br />
[[Datei:Contao2go_28012011_201943.png|center|frame|Sicherung erstellen]]<br />
<br />
[[Datei:Contao2go_28012011_201957.png|center|frame|Sicherungen Übersicht]]</div>Manitougshttps://de.contaowiki.org/DC_MemoryDC Memory2011-09-04T11:04:40Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
{{ExtInfo<br />
| Dev=Stefan Lindecke<br />
| ExtVersion=0.5.0 rc1<br />
| Version=2.9.0 - 2.10,0 RC1<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/DC_Memory.de.html<br />
| Depending=[http://www.contao.org/erweiterungsliste/view/3CFramework.de.html 3CFramework]<br />
}}<br />
<br />
=Allgemeines=<br />
Die DC_Memory ist ein eigener DCA-Driver wie die DC_Table oder andere. Allerdings bietet diese für den Entwickler extrem viel mehr Flexibilität, als die DC_Table, weil die DC_Memory das Laden und Speichern der Daten vollständig dem Entwickler überlässt.<br />
<br />
=Daten laden und speichern=<br />
<br />
Zum Speichern und Laden der Daten werden die bekannten ''onload_callbacks'' und ''onsubmit_callbacks'' genutzt.<br />
Hier ein Beispiel:<br />
<br />
<source lang="php"><br />
'onload_callback' => array<br />
(<br />
array('class', 'onload_callback'),<br />
),<br />
'onsubmit_callback' => array<br />
(<br />
array('class', 'onsubmit_callback'),<br />
)<br />
</source><br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
// Werte holen von der DB oder einem File oder was auch immer<br />
<br />
// Setzen eines Wertes<br />
$dc->setData('field', 'Wert');<br />
<br />
// auch das Setzen aller Werte auf einmal funktioniert:<br />
$arrData = array();<br />
$arrData['field1'] = 'Wert 1';<br />
$arrData['field2'] = 'Wert 2';<br />
$dc->setDataArray($arrData);<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Speichern der Daten<br />
* @param DataContainer<br />
*/<br />
public function onsubmit_callback(DataContainer $dc)<br />
{<br />
// Holen eines Wertes<br />
$strField1 $dc->getData('field1');<br />
<br />
// auch das Holen aller Werte auf einmal funktioniert:<br />
$arrData = $dc->getDataArray();<br />
<br />
// und dann ab in die DB oder in ein File oder wohin auch immer<br />
}<br />
</source><br />
<br />
=Versionierung=<br />
Auf die Contao-eigene Versionierung wird verzichtet, da diese für die meisten Entwickler zu wenig Flexibilität bietet (was aber nicht bedeutet, dass man die Core-Versionierung nicht auch einbauen kann).<br />
<br />
Folgende Konfiguration ist notwendig:<br />
<source lang="php"><br />
'enableVersioning' => true,<br />
'dcMemory_versioning_list_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_list_callback'),<br />
),<br />
'dcMemory_versioning_restore_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_restore_callback'),<br />
),<br />
'dcMemory_versioning_createInitial_callback' => array<br />
(<br />
array('class', 'dcMemory_versioning_createInitial_callback'),<br />
)<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, welche Versionen im Dropdown angeboten werden<br />
* @param DataContainer<br />
* @param array<br />
* @return array<br />
*/<br />
public function dcMemory_versioning_list_callback(DataContainer $dc, $arrVersions)<br />
{<br />
$arrVersions[] = array<br />
(<br />
'value' => 'version_1',<br />
'selected' => true, // Diese Version ist die jüngste<br />
'label' => 'Meine jüngste Version'<br />
);<br />
<br />
return $arrVersions;<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, was nach dem Klick auf "Wiederherstellen" passiert (also evtl. auch $this->reload() aufrufen!)<br />
* @param DataContainer<br />
* @param string | enthält die Version<br />
*/<br />
public function dcMemory_versioning_restore_callback(DataContainer $dc, $strVersion)<br />
{<br />
// $strVersion enthält den value, also z.B. "version_1"<br />
}<br />
</source><br />
<source lang="php"><br />
/**<br />
* Ist dafür verantwortlich, was bei der Ersterstellung einer Version gemacht werden soll<br />
* @param DataContainer<br />
*/<br />
public function dcMemory_versioning_createInitial_callback(DataContainer $dc)<br />
{<br />
// Erstversion anlegen<br />
}<br />
</source><br />
<br />
=Mehrsprachigkeit=<br />
<br />
Die DC_Memory unterstützt auch Mehrsprachigkeit. Da sie sich nicht darum kümmert, woher die Daten kommen und wohin sie gespeichert werden, bietet sie schlichtweg die Möglichkeit, Sprachen und Methoden zur Abfrage anzubieten, welche Sprache aktuell bearbeitet wird.<br />
Die Konfiguration erfolgt im ''onload_callback'' und könnte so aussehen:<br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
// Sprachwechsel-Konfiguration<br />
$objLangConfig = new stdClass();<br />
<br />
// Fallback zusätzlich zu den Sprachen anbieten<br />
$objLangConfig->enableFallback = true;<br />
<br />
// Sprachen-Array<br />
$objLangConfig->arrLanguages = array<br />
(<br />
'de',<br />
'fr'<br />
);<br />
<br />
// und jetzt das ganze noch aktivieren<br />
$dc->enableLanguageSwitch($objLangConfig);<br />
<br />
// die getLanguage()-Methode bietet die Möglichkeit, die aktuell bearbeitete Sprache zu holen <br />
switch($dc->getLanguage())<br />
{<br />
case 'de':<br />
$dc->setData('name', 'Wir sprechen sowas von Deutsch!');<br />
break;<br />
case 'fr':<br />
$dc->setData('name', 'On parle le français aussi!');<br />
break;<br />
default:<br />
$dc->setData('name', 'What about a fallback?');<br />
}<br />
<br />
// Sprachen können auch gelöscht werden.<br />
$strEditMode = $dc->getLanguageEditMode() // enthält entweder "edit" wenn man eine Sprache bearbeitet oder "delete" wenn die Sprache gelöscht werden soll<br />
}<br />
</source><br />
<br />
Man kann zudem jedem Feld sagen, für welche Sprache es übersetzbar sein sollte. Beim Fallback werden logischerweise alle Felder angezeigt.<br />
Hier z.B. ein Feld welches für alle Sprachen übersetzbar sein soll:<br />
<source lang="php"><br />
'name' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['table']['name'],<br />
'inputType' => 'text',<br />
'eval' => array('mandatory'=>true,'tl_class'=>'w50'),<br />
'translatableFor' => array('*')<br />
),<br />
</source><br />
Hier ein Feld, das nur nach Deutsch und Französisch übersetzbar ist:<br />
<source lang="php"><br />
'name' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['table']['name'],<br />
'inputType' => 'text',<br />
'eval' => array('mandatory'=>true,'tl_class'=>'w50'),<br />
'translatableFor' => array('de', 'fr')<br />
),<br />
</source><br />
<br />
Fehlt der Paramter "translatableFor" gänzlich, so ist das Feld nicht übersetzbar.<br />
<br />
=Buttons hinzufügen=<br />
Im Contao-Core ist es äußerst mühsam, eigene Buttons à la "Speichern und Schliessen" hinzuzufügen. Mit der DC_Memory geht das ganz einfach:<br />
<source lang="php"><br />
/**<br />
* Laden der Daten<br />
* @param DataContainer<br />
*/<br />
public function onload_callback(DataContainer $dc)<br />
{<br />
$arrData = array<br />
(<br />
'id'=>'saveNredirectToGoogle',<br />
'formkey'=>'saveNredirectToGoogle',<br />
'class'=>'',<br />
'accesskey'=>'g',<br />
'value'=>specialchars($GLOBALS['TL_LANG']['MSC']['saveNredirectToGoogle']),<br />
'button_callback' => array('class', 'saveNredirectToGoogleButtonCallback')<br />
);<br />
$dc->addButton('saveNredirectToGoogle', $arrData);<br />
}<br />
<br />
<br />
/**<br />
* Nach dem Speichern zu Google weiterleiten<br />
* @param DataContainer<br />
*/<br />
public function saveNredirectToGoogleButtonCallback(DataContainer $dc)<br />
{<br />
$this->redirect('http://www.google.com');<br />
}<br />
</source><br />
<br />
Falls bei einem Button die Daten nicht gespeichert werden sollen, liegt es am Programmierer, diesen Fall vorherzusehen. Der ''onsubmit_callback' wird zuerst aufgerufen. Die Speicherung sollte also in diesem Falle dort nicht vorgenommen werden, wenn z.B. $this->Input->post('myButton') gesetzt ist.<br />
<br />
=Die Listenansicht=<br />
Contao verlangt von einem DataContainer, welcher Daten auflistet, dass vier Methoden eingebunden werden:<br />
* showAll()<br />
* show()<br />
* delete()<br />
* undo()<br />
<br />
Deshalb gibt es für die vier Methoden jeweils Callbacks:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_showAll_callback'][] = array('class', 'dcMemory_showAll_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_show_callback'][] = array('class', 'dcMemory_show_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_delete_callback'][] = array('class', 'dcMemory_delete_callback');<br />
$GLOBALS['TL_DCA'][$strTable]['config']['dcMemory_undo_callback'][] = array('class', 'dcMemory_undo_callback');<br />
</source><br />
<br />
=DC_Memory_Helpers=<br />
Die DC_Memory_Helpers Klasse unterstützt Entwickler bei trivialen Dingen, die immer wieder gebraucht werden.<br />
<br />
==Beispiel für eine listView und Panel mit Limit wie bei DC_Table==<br />
Dieses Beispiel wird eine Listenansicht generieren; mit einem Panel und der Auswahl, welche Einträge man ansehen möchte. Es werden immer 2 Einträge pro Seite angezeigt.<br /><br />
Hier am Beispiel der Tabelle tl_user und jeweils mit zwei Operationen, nämlich "edit" und "copy"; das Ganze gruppiert nach Anfangsbuchstabe des Usernames.<br />
<br />
<source lang="php"><br />
public function dcMemory_showAll_callback(DataContainer $dc)<br />
{<br />
$objHelper = new DC_Memory_Helpers($dc);<br />
// sets the current limits to the session according to DC_Table<br />
$objHelper->setCurrentLimits();<br />
<br />
// total<br />
$objTotal = $this->Database->execute("SELECT COUNT(id) AS total FROM tl_user");<br />
<br />
// get the data<br />
$objData = $this->Database->execute('SELECT id,username FROM tl_user' . $objHelper->getLimitForSQL());<br />
$arrDataArray = array();<br />
<br />
while($objData->next())<br />
{<br />
// get the first letter of the username<br />
$strFirstLetter = substr($objData->username,0,1);<br />
<br />
$arrDataArray[$strFirstLetter]['label'] = ucfirst($strFirstLetter);<br />
$arrDataArray[$strFirstLetter]['data'][] = array<br />
(<br />
'id' => $objData->id,<br />
'class' => 'list_icon',<br />
'style' => 'background-image:url(\'system/themes/default/images/user.gif\');',<br />
'label' => $objData->username,<br />
'buttons' => array<br />
(<br />
'edit' => array<br />
(<br />
'href' => 'contao/main.php?do=user&amp;act=edit&amp;id=' . $objData->id,<br />
'title' => 'Edit user ID ' . $objData->id,<br />
'icon' => 'system/themes/default/images/edit.gif',<br />
'icon_w' => '12',<br />
'icon_h' => '16',<br />
'alt' => 'Edit user' <br />
),<br />
'copy' => array<br />
(<br />
'href' => 'contao/main.php?do=user&amp;act=copy&amp;id= ' . $objData->id,<br />
'title' => 'Duplicate user ID ' . $objData->id,<br />
'icon' => 'system/themes/default/images/copy.gif',<br />
'icon_w' => '14',<br />
'icon_h' => '16',<br />
'alt' => 'Duplicate user' <br />
)<br />
)<br />
);<br />
}<br />
<br />
// 2 Einträge pro Seite<br />
$strLimitHtml = $objHelper->generateLimitMenuString($objTotal->total, 2);<br />
<br />
$strPanel = $objHelper->generatePanel($strLimitHtml);<br />
$strGlobalOperations = $objHelper->generateGlobalOperationsString();<br />
$strListView = $objHelper->generateListViewString($arrDataArray);<br />
return $strPanel . $strGlobalOperations . $strListView;<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/Die_erste_Webseite_-_Header_und_FooterDie erste Webseite - Header und Footer2011-08-29T18:51:32Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Erste Schritte]]<br />
{{AppliesTo<br />
|Version=Alle Versionen}}<br />
== Einleitung ==<br />
Nachdem man [[Die erste Webseite|die erste Webseite]] erstellt hat, taucht meistens die Frage auf: "Wie erzeugt man einen Header|Footer, der auf allen Seiten erscheint?" In diesem Tutorial wird solch ein Header und Footer erstellt, welcher im Nachhinein ohne HTML-Kenntnisse verändert werden kann.<br />
<br />
== Neue Seite RESOURCES ==<br />
Als erstes erstellt man eine neue Seite "RESOURCES", welche '''nicht''' veröffentlicht wird.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Seite_RESOURCES.png|Neue Seite RESOURCES, nicht veröffentlicht, nicht durchsuchen - Contao 2.9.3|frame|center]][[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Seitenstruktur.png|Neue Seitenstruktur - Contao 2.9.3|frame|center]]<br />
<br />
== Artikel "Header" ==<br />
Unter Inhalte --> Artikel sieht man, dass automatisch ein Artikel "RESOURCES" erstellt wurde.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel.png|Artikel - Contao 2.9.3|frame|center]]<br />
Das Veröffentlichungs-Symbol ist grau, weil die Seite nicht veröffentlicht wurde. Mit einem Klick auf das Symbol veröffentlicht man nun diesen Artikel. Das Symbol ist jetzt grün.<br />
<br />
Mit einem Klick auf den Bleistift öffnet man den Artikel. Der Text "Keine Einträge gefunden." signalisiert, dass der Artikel noch keine Inhalte hat. Dieser Artikel RESOURCES wird als Artikel für den Header genutzt. Mit einem weiteren Klick auf den Bleistift gelangt man in die Eigenschaften des Artikels. Er wird umbenannt von "RESOURCES" nach "Header".<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel_Header.png|Artikel umbenennen - Contao 2.9.3|frame|center]]<br />
Den Artikelalias "resources" entfernt man, damit beim Speichern automatisch der Artikelalias "header" erzeugt wird.<br />
<br />
=== Header Inhalt ===<br />
Im Artikel "Header" erstellt man ein CE (Inhaltselement) vom Typ "Text". Dort wird der gewünschte Inhalt eingetragen. Man kann auch direkt ein Bild als Logo auswählen und es als Bildlink auf die Homepage setzen.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_CE_Header.png|CE Typ Text für den Header - Contao 2.9.3|frame|center]]<br />
<br />
== Artikel "Footer" ==<br />
In der Artikelübersicht erstellt man jetzt unterhalb des Artikels "Header" einen zweiten Artikel "Footer".<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel_Header_und_Footer.png|2 Artikel "Header" und "Footer" auf der Seite RESOURCES - Contao 2.9.3|frame|center]]<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel_Footer.png|Artikel "Footer" benennen und veröffentlichen - Contao 2.9.3|frame|center]]<br />
<br />
<br />
=== Footer Inhalt ===<br />
Wieder wird in dem Artikel ein CE vom Typ ''Text'' erstellt. Diesmal mit dem Inhalt für den Footer.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_CE_Footer.png|CE Typ Text für den Footer - Contao 2.9.3|frame|center]]<br />
<br />
== Module erstellen ==<br />
Bis hierhin hat man jetzt eine versteckte Seite in der Seitenstruktur erstellt, welche 2 veröffentlichte Artikel enthält: einen für den Footer und einen für den Header. Wie bekommt man diese Artikel nun so auf die Website, dass sie auf allen Seiten erscheinen? Für die seitenweite Einbindung von Inhalten sind die Module zuständig, denn ein Modul kann man im Seitenlayout in einen Layoutbereich einbinden.<br />
<br />
Über Layout --> Themes --> Modul-Icon gelangt man zu den Modulen. Man erstellt jeweils ein Modul vom Typ "Eigener HTML-Code" für den Header und für den Footer.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Module.png|2 neue Module vom Typ "Eigener HTML-Code" - Contao 2.9.3|frame|center]]<br />
In dem Feld "HTML-Code" benutzt man [http://www.contao.org/inserttags.html Inserttags] um die entsprechenden Artikel auszugeben. Einmal insert_article::header und einmal insert_article::footer.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Modul_Header.png|Hier wird ein Artikel über einen Inserttag ausgegeben - Contao 2.9.3|frame|center]]<br />
<br />
== Module ausgeben ==<br />
Damit diese Module im FE (Frontend) ausgegeben werden geht man über Layout --> Themes --> Layout-Icon-Bleistift ins Standard-Layout und bindet die 2 Module entsprechend ein.<br />
Gleichzeitig ändert man noch die Höhe von Header und Footer, da diese in der Beispielseite ein wenig zu niedrig ausgefallen sind.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Layout.png|Das Standard-Layout wird verändert - Contao 2.9.3|frame|center]]<br />
<br />
== Resultat ==<br />
Im FE sieht man nun, dass auf allen Seiten der Header und Footer erscheint. Beide Elemente sind im BE (Backend) auch ohne HTML-Kenntnisse leicht zu verwalten.<br />
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Resultat.png|Ergebnis im FE - Contao 2.9.3|frame|center]]</div>Manitougshttps://de.contaowiki.org/Die_erste_WebseiteDie erste Webseite2011-08-27T21:56:52Z<p>Manitougs: /* Die Webseite */ Auf einen Link zusammengefasst</p>
<hr />
<div>[[en:First page]]<br />
[[Category: Erste_Schritte]]<br />
{{AppliesTo|Version=ab 2.9}}<br />
=Einleitung=<br />
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Website in Contao aufbaut. Es geht nicht auf die Details zu jedem Einstellpunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Website?<br />
<br />
Das Ergebnis dieser Anleitung wird eine Website mit zwei Spalten, einem Header und einem Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderungen der Website sind:<br />
*Breite: 960px<br />
*Ausrichtung: zentriert<br />
*Höhe der Kopfzeile/Header: 50px<br />
*Breite der linken Spalte: 220px<br />
*Höhe der Fußzeile/Footer: 25px<br />
<br />
{{c2g<br />
|tut1=http://contao2go.org/pakete-uebersicht/items/die-erste-webseite.html<br />
}}<br />
<br />
=Voraussetzung=<br />
*Contao wurde hoch geladen und erfolgreich installiert<br />
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt<br />
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert <br />
*HTML und CSS Kenntnisse<br />
<br />
=Vorbereitungsarbeit=<br />
==Dateien==<br />
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.<br />
<br />
[[Datei:firstsite-filemanager.png|Filemanager|frame|center]]<br />
<br />
==Templates==<br />
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.<br />
<br />
[[Datei:firstsite-templates.png|Templates|frame|center]]<br />
<br />
{{Hinweis|Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.}}<br />
<br />
=Theme=<br />
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigten Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.<br />
<br />
Beim Erstellen des Themes werden neben dem Namen des Themes und des Autors auch die Ordner angegeben, in denen sich die Files und die Templates für die Darstellung der Website befinden.<br />
<br />
[[Datei:firstsite-createtheme.png|Theme erstellen|frame|center]]<br />
<br />
Speichert man nun das neu erstellte Theme so erscheint es auch in der Theme-Manager-Übersicht. Hier erlangt man den Zugriff auf die Theme-eigenen CSS, Module und Seitenlayouts sowie grundlegende Einstellungen des Themes selbst.<br />
<br />
[[Datei:firstsite-theme.png|Theme Übersicht|frame|center]]<br />
<br />
==Stylesheets==<br />
Zuerst erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.<br />
<br />
Weitere Informationen über [[CSS|Contao und CSS]]<br />
<br />
[[Datei:firstsite-createcss.png|Stylesheet erstellen|frame|center]]<br />
<br />
Der CSS-Manager sollte nun so aussehen:<br />
<br />
[[Datei:firstsite-cssmanager.png|Stylesheet Manager|frame|center]]<br />
<br />
==Seitenlayout==<br />
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:<br />
<br />
[[Datei:firstsite-createlayout-1.png|Layout erstellen #1|center]]<br />
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2|frame|center]]<br />
<br />
Der Layout-Manager sollte nun so aussehen:<br />
<br />
[[Datei:firstsite-layoutmanager.png|Layout Manager|frame|center]]<br />
<br />
==Module Teil 1==<br />
Eigentlich fehlen dem Theme jetzt nur mehr die Module. Module sind Objekte, welche seitenweit eingebunden werden, wie z.B. die Navigation, die Kopfzeile oder die Fußzeile. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Dieses kann man aber zu diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Modul "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden, es sorgt für die Ausgabe der seitenbezogenen Artikel. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Das macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.<br />
<br />
[[Datei:firstsite-module-1.png|Layout Artikel zuweisen|frame|center]]<br />
<br />
=Seitenstruktur=<br />
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:<br />
<br />
[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1|center]]<br />
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2|frame|center]]<br />
{{MsgImportant|Achtung! Wenn man nur eine Sprache veröffentlicht, wie in diesem Beispiel 'de', '''muss''' diese Sprache als Fallback ausgezeichnet werden, sonst sehen User mit einem anderssprachigen Browser keine Seiten.}}<br />
{{Hinweis|Ein Seitenlayout muss nicht zugeordnet werden, es wird dann automatisch das Standardlayout benutzt. So kann man während des Entwickelns schnell das gesammte Layout wechseln, indem man ein zweites Layout als Standardlayout definiert. Diese Einstellung wird auf die Unterseiten vererbt.}}<br />
<br />
Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" '''''eine Ebene tiefer''''' des Startpunktes der Webseite. <br />
<br />
[[Datei:firstsite-regularpage.png|Reguläre Seite|frame|center]]<br />
{{Hinweis|Der Seitenname wird im FE als Bezeichnung der Menüpunkte benutzt.<br />
<br />
Der Seitenalias wird automatisch aus dem Seitennamen erzeugt, kann also leer gelassen werden und findet sich nachher im FE als Seitenname in der Adresszeile wieder z.B. "http:// example.org/index.html". Bei der Startseite wird empfohlen beim Seitenalias manuell 'index' einzutragen.<br />
<br />
Der Seitentitel muss auch nicht ausgefüllt werden, es wird dann automatisch der Seitenname benutzt. Aus dem Seitentitel wird nachher im FE das TITLE-Attribut erzeugt und ist ganz oben in der Fensterleiste des Browsers sichtbar.}}<br />
<br />
Die Beispielwebseite erhält 4 Hauptnavigationspunkte:<br />
*Startseite<br />
*Über Mich<br />
*Meine Eltern<br />
*Impressum / Kontakt<br />
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:<br />
*Mein Vater<br />
*Meine Mutter<br />
<br />
Die Seitenstruktur sollte nun wie folgt aussehen:<br />
<br />
[[Datei:firstsite-sitestructure.png|Seitenstruktur|frame|center]]<br />
<br />
{{MsgWarning|Nochmal zur Erinnerung: Die regulären Seiten müssen eine Ebene tiefer als der Startpunkt der Webseite sein.}}<br />
<br />
=Zwischenstand=<br />
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:<br />
<br />
[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben|frame|center]]<br />
<br />
Das Frontend sollte nun so aussehen:<br />
<br />
[[Datei:firstsite-frontendlayout.png|Frontend Layout|frame|center]]<br />
<br />
Folgende Vorgaben der Website sind jetzt schon sichtbar:<br />
*Die (feste) Breite der Seite<br />
*Die Höhe des Headers<br />
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)<br />
*Die Höhe des Footers<br />
<br />
=Module Teil 2=<br />
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:<br />
<br />
[[Datei:firstsite-navi.png|Navigationsmodul|frame|center]]<br />
<br />
Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.<br />
<br />
[[Datei:firstsite-module-2.png|Layout Navimodule einbinden|frame|center]]<br />
<br />
Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.<br />
<br />
=Artikel=<br />
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button. <br />
<br />
[[Datei:firstsite-articlemanager.png|Artikel Manager|frame|center]]<br />
<br />
Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.<br />
<br />
[[Datei:firstsite-article.png|Artikel|frame|center]]<br />
<br />
Diese Schritte wiederholt man in den anderen 5 Artikeln. <br />
<br />
=Die Webseite=<br />
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:<br />
<br />
[[Datei:firstsite-frontend.png|Die fertige Webseite|frame|center]]<br />
<br />
Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, [[Die erste Webseite - Header und Footer|der Header, der Footer]], die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.</div>Manitougshttps://de.contaowiki.org/CatalogCatalog2011-08-27T21:49:30Z<p>Manitougs: Satzstellung</p>
<hr />
<div>Das Catalog-Modul ermöglicht eine vielfältige Kategorisierung beliebiger Daten in hierarchischen und flachen Strukturen. Beispiele umfassen [http://www.tuerkischdeutsche-literatur.de Literaturverzeichnisse] oder eine Immobilienverwaltung (mit Frontendeingabe und Workflow) oder einer Rezeptdatenbank (zu sehen auf [http://catalogdemo.dasprojekt.org http://catalogdemo.dasprojekt.org] ).<br />
<br />
Da dieses Modul sehr komplex ist, findet man einzelne Dokumantationen in der Kategorie [[:Category:Catalog|Catalog]].<br />
<br />
{{AppliesTo<br />
|TLVersion=ab 2.8<br />
|Version=ab 2.9<br />
|Ext1=Catalog ab 2.0beta1<br />
}}<br />
[[Category:Extensions]]<br />
[[Category:Catalog]]<br />
<br />
=Beschreibung=<br />
Definieren von mehrfachen individuellen Katalogen, individuellen Feldtypen und zahlreichen Frontend-Anzeige-Formatierungs-Möglichkeiten.<br />
Dieses Modul erlaubt es Benutzern, Kataloge mit Einträgen zu definieren und zu verwalten. Stellen Sie sich vor, Sie möchten einem Besucher Ihrer Seite eine Liste mit Ihren Spielen zeigen. Sie haben viele Spiele, aber alle haben gleiche bestimmte Eigenschaften, wie z.B. Titel, Autor, Genre, Konsolenformat, Veröffentlichungsdatum usw. Sie möchten nun alle diese Informationen speichern und später dann Besuchern zeigen, ihnen dabei nur Spiele zeigen aus dem Motorsport-Bereich oder Spiele mit einem Preis über einer bestimmten Höhe, nur Spiele, die verfügbar sind usw. Dieses Modul erlaubt Ihnen, solche Dinge zu tun. <br />
<br />
Quelle: [http://www.contao.org/erweiterungsliste/view/catalog.html Beschreibungstext des Catalog-Moduls in der Extension-Repository]<br />
<br />
=Forum=<br />
Fragen rund um den Catalog werden im Forum hier behandelt: [http://www.contao-community.de/forumdisplay.php?18-catalog Forum - Catalog Bereich]<br />
<br />
=Installation=<br />
==Catalog aus dem Contao-Repository==<br />
Catalog kann ganz normal über die Erweiterungsverwaltung des Contao-Backend installiert werden. Eine manuelle Installation ist auch möglich, dazu muss man sich die benötigen Dateien des [http://www.contao.org/erweiterungsliste/view/catalog.html catalog aus dem Extension Repository herunterladen] (abhängige Erweiterungen nicht vergessen!).<br />
<br />
==Catalog aus dem Entwicklungs-Repository==<br />
Den jeweils neusten Build kann man sich aus dem [http://code.google.com/p/typolight-catalog/source/checkout SVN-Repository] herunterladen. Einzig das Modul backend_filterwiz muss dabei separat installiert werden, alle weiteren Module sind im Repository vorhanden. <br />
<br />
Man sollte darauf achten, welche Ordner wohin in der Installation kommen:<br />
* der Inhalt von /drivers nach /system/drivers/<br />
* alle anderen Ordner (bis auf /custumnav) nach /system/modules/<br />
* /customnav wird nicht benötigt<br />
<br />
Danach muss ein Update der Datenbank gemacht werden.<br />
<br />
Eventuell fehlende Sprachdateien können aus den Übersetzungen der Version im Contao-Extension-Repository manuell hinzugefügt werden. So kann dafür gesorgt werden, dass der Catalog dann (weitgehend) in einer Übersetzung benutzt werden kann.<br />
<br />
{{Hinweis|Bei einem Update muss seit Version r239 einmal unter Katalog (Menü von Contao) ganz oben rechts auf 'Maintenance' geklickt werden um die Tags Felder neu aufbauen lassen.}}<br />
<br />
==Migration von Version 1 auf Version 2==<br />
In Version 2 wurde Einiges geändert. So ist es u. a. nicht mehr nötig catalog und catalog_ext zu installieren, da diese Erweiterungen zusammengelegt wurden. Damit es zu keinem Datenverlust kommt, muss bei einem manuellen Update wie folgt vorgegangen werden:<br />
* Zuerst die alten Modulordner entfernen,<br />
* danach die neuen Modulordner hochladen.<br />
* Erst zum Schluss das Datenbankupdate ausführen!<br />
<br />
Beim Update über das Contao-ExtensionRepository sollte man die Reihenfolge beachten:<br />
* Catalog 2 installieren und Datenbank-Update ausführen.<br />
* Catalog_ext deinstallieren und erneut Datenbank-Update ausführen.<br />
* Zur Sicherheit alle catalog-Module etc. noch mal öffnen und speichern, damit auch alles glatt läuft.<br />
* Neue Einstellungen vornehmen.<br />
<br />
Katalogfelder vom Typ "Taxonomie" müssen umgestellt werden auf "Auswahl" mit der Datentabelle "tl_taxonomy", Option Spaltenwert = name. Für eine schönere Darstellung aktiviert man "Die Optionsauswahl individualisieren", dann kann man auch Teilbereiche aus der Taxonomie vorgeben und die Anzeige auf "Baum nur mit auswählbaren Kindeinträgen" stellen.<br />
<br />
=Allgemeines=<br />
Testumgebung und Vortrag vom Usertreffen 2010:<br />
* Vortrag / Testumgebung -> http://catalogdemo.dasprojekt.org/<br />
* Benutzer: tlut2010<br />
* Passwort: catalogisttoll<br />
<br />
==Backend==<br />
Mit dem Catalog bekommt man im Backend unter dem Menüpunkt 'Inhalte' 2 neue Menüeinträge:<br />
* Katalog<br />
* Mit '''Taxonomie''' können Stichworte hierarchisch angelegt und verwaltet werden. Diese sind Grundlage für Filter, Navigation und Verschlagwortung (sog. ''Tagging'') in den Katalogen.<br />
<br />
[[Datei:cat-cat2-be.png|Cat Backend]]<br />
<br />
==Frontend-Module==<br />
Für eine Basisanwendung der Katalog-Erweiterung können folgende Module eingesetzt werden:<br />
* Mit '''Catalog List''' kann eine Liste von Einträgen angezeigt werden.<br />
* Eine Detailansicht eines Eintrags kann mit Hilfe des '''Catalog Reader''' angezeigt werden. Eine ''Catalog List'' verweist dabei auf den ''Catalog Reader''. Der ''Catalog Reader'' muss natürlich nur dann verwendet werden, wenn von einer Auflistung aus eine Detailseite eines Eintrags angezeigt werden soll.<br />
<br />
Für eine weiterführende Benutzung der Katalog-Erweiterung stehen optional diese Module zur Verfügung:<br />
* Catalog Filter (Mit Hilfe von einem Filter können Besucher die Liste eines Catalogs filtern und die Anzeige eingrenzen)<br />
* Catalog Navigation (Mit dieser Navigation kann man eine Navigation erstellen. Die Navigation besteht zum Beispiel aus Kategorien)<br />
* Catalog Notify (Hiermit wird ein Formular erstellt, welches zur schnellen Kontaktaufnahme bei einem einzelnen Item dargestellt wird)<br />
* Catalog Featured (Hiermit kann man eine besondere Liste erstellen, die besondere Items darstellt. Die Liste wird per Zufall zusammengestellt.)<br />
* Catalog Related (Hiermit erstellt man eine Liste von ähnlichen Items - Einzusezten auf einer Seite wo auch der Catalog Reader enthalten ist. Zufallsausgabe)<br />
* Catalog Reference (Hiermit erstellt man eine Liste von Items mit einer gleichen Eigenschaft.)<br />
* Catalog Edit (Um ein Item im Frontend editieren zu können, wird anstelle von Catalog Reader dieses Modul verwendet)<br />
<br />
=Erstellen eines Katalogs (Backend)=<br />
Um einen neuen catalog zu erstellen, klickt man links im Backend unter 'Inhalte' auf 'Katalog'. Anschliessend im Hauptbereich auf den Button 'Neuer Katalog'.<br />
<br />
[[Datei:cat-cat2-newcat.png|Neuen Cat erstellen]]<br />
<br />
* Name des Katalogs angeben<br />
* Einen Tabellennamen angeben (Der catalog legt diese Tabelle selbstständig an. Es hat sich bewährt eine Tabelle anzulegen ohne tl_ als präfix, da Contao diese Tabellen sonst zum Entfernen vorschlägt. Ich empfehle den präfix cat_ damit man die Tabellen schnell wiederfindet.)<br />
* Alias field (kann erst später ausgefüllt werden) -> anstelle der ID wird der Alias genutzt bei den Links<br />
* publishField (kann erst später ausgefüllt werden) -> Hier kann ein Checkboxfeld ausgewählt werden, was die Funktion eines 'Auges' = on-/offline hat (z.B. Ein Feld mit dem Namen online)<br />
* Jump to page -> Hier muss die Detail Seite mit dem Modul Catalog Reader angegeben werden. {{Achtung|Die richtige Zuweisung der Readerseite erfolgt in den Kataloglisten Modulen, diese Zuweisung hier ist jedoch nötig damit der Katalog die Items in die xml-Sitemap eintragen kann. Wird diese Zuweisung hier nicht vorgenommen, so "weiss" der Katalog nicht, auf welchem Reader die Items dargestellt werden sollen und trägt sie daher nicht in der sitemap.xml ein. Auch für die Contao Suche muss diese Angabe gemacht werden.}}<br />
* Ein Bild hinzufügen -> Hier kann ein Bild für den Katalog hinzugefügt werden, um im Backend den Katalog schnell von anderen unterscheiden zu können<br />
* Zeichenkette des Titels formatieren (wird erst später gebraucht) -> Um im Backend die Übersicht von vielen Items besser gewährleisten zu können, kann man hier die Anzeigen der einzelnen Items konfigurieren<br />
* Allow comments -> Kommentare bei den einzelnen Items erlauben und konfigurieren (Funktion ist wie bei News o.ä. daher wird hier nicht genauer darauf eingegangen)<br />
* Searchable -> Wenn man die Items auch in der Contao Suche indexieren lassen möchte. Nach Aktivierung ist es möglich, Conditions (Ausnahmen) einzugeben und das Title Feld anzugeben von einem Item (weiteres zu Conditions und Title finden Sie weiter unten) Wichtig: Weiterleitungsseite muss angegeben werden!<br />
** Condition -> Um Felder direkt aus der Suche herauszunehmen (damit unveröffentlichte Items nicht in die Suche aufgenommen werden o.ä.)<br />
** Page title field -> Den Namen des Items auswählen, damit dieser für die Ergebnisanzeige der Suche genutzt wird ('''und auch für den Title''')<br />
* Enable CSV import -> Damit ist es möglich CSV-Dateien zu importieren. Natürlich sollte man das nicht einfach so machen und nur von Leuten die wissen was sie tun. Daher kann hier festgelegt werden, das nur Administratoren das machen dürften und ob Items überschrieben werden oder nicht<br />
* Generate feed -> Hier kann festgelegt werden, dass ein RSS-Feed generiert wird aus den Items (Funktion ist wie bei News o.ä., daher wird hier nicht genauer darauf eingegangen)<br />
<br />
==Nachträgliches Bearbeiten eines Katalogs==<br />
Um die Grundeinstellungen eines Katalogs nachträglich noch einmal bearbeiten zu können, klickt man in der Katalogübersicht auf den Felder-Button...<br />
<br />
[[Datei:cat-cat2-editfields.png|Cat Felder editieren]]<br />
<br />
...und anschließend im Übersichtsfeld des Katalogs auf 'Bearbeiten'.<br />
<br />
[[Datei:cat-cat2-editcat.png|Cat Catalog editieren]]<br />
<br />
=Erstellen von Attributen/Feldern von Items in einem Katalog=<br />
Nun ist die Grundkonfiguration von einem Katalog erst einmal abgeschlossen. Aber es ist noch nicht festgelegt aus welchen Feldern ein Item denn nun besteht, also welche Attribute ein Item besitzen kann.<br />
Dazu kommen wir jetzt. Um neue Felder für den Katalog zu erstellen, klickt man in der Katalogübersicht auf 'Felder für Katalog erstellen'....<br />
<br />
[[Datei:cat-cat2-editfields.png|Cat Felder editieren]]<br />
<br />
...und danach auf 'Neues Feld'.<br />
<br />
[[Datei:cat-cat2-newfield.png|Cat Neues Feld anlegen]]<br />
<br />
==Die Standardwerte von Feldern==<br />
Die speziellen Felder werden erst sichtbar, wenn man einen Feldtyp ausgewählt hat. Diese Werte werden weiter unten erläutert.<br />
* Field configuration<br />
** Bezeichnung (Eine eindeutige Bezeichnung für das Feld. Diese sollte möglichst selbsterklärend sein.)<br />
** Beschreibung (Um im Backend und beim Frontend-Editing eine Beschreibung anzuzeigen für die Ersteller eines Items)<br />
** Spaltenname (der Spaltenname in der Tabelle. Dieser muss eindeutig sein und so vergeben werden, das er logisch ist, da man beim Template erstellen diese Namen benutzt um an die Inhalte zu kommen)<br />
** '''Typ''' (weiter unten)<br />
* Display Settings (Diese Einstellungen sind für die Ansicht im Backend zuständig)<br />
** Kontroll-Checkbox (Wenn eine Kontroll-Checkbox angegeben wird, wird dieses Feld erst angezeigt, wenn das Kontroll-Checkbox Feld angekreuzt ist)<br />
** Vorher Umbruch einfügen (Um dieses Eingabefeld in einer neuen Zeile zu beginnen)<br />
*** Legend Titel (hier kann dann ein Name für den Legend Titel angegeben werden -> die Grün geschriebenen Titel im Backend)<br />
** Enable half width (um 2 Felder nebeneinander anzuzeigen - seit TYPOlight 2.7 möglich)<br />
* Backend filter settings (hier kann festgelegt werden, ob das Feld im Backend zur Filterung angezeigt wird)<br />
** Sortieren ('''Muss zum Filtern etc. angegeben werden.''' Sonst weiß Contao nicht wie der Filter erstellt werden soll. Für '''Datum''' ist zwangsweise die Angabe nötig ob nach Jahr, Monat oder Tag sortiert werden soll!)<br />
** Filter<br />
** Suche<br />
* Advanced settings<br />
** Pflichtfeld -> Dieses Feld muss ausgefüllt werden<br />
* Frontend editing<br />
** Frontend editing groups -> Welche Gruppen dürfen dieses Feld im Frontend bearbeiten (Mehrfachangabe ist möglich). Wenn hier nichts angegeben wird, dürfen alle Gruppen dieses Feld im Frontend editieren<br />
<br />
==Typ - Feldtypen von Feldern==<br />
Hier werden die Angaben für die jeweiligen Typen aufgelistet und erläutert.<br />
===Text===<br />
* Format settings<br />
** Prefix und Suffix Strings<br />
** Format<br />
*** Formattyp<br />
**** Zeichenkette<br />
**** Nummer<br />
**** Datum<br />
*** Zeichenfolge für Formatierung<br />
<br />
===Alias===<br />
'''Es ist immer nur ein Alias Feld erlaubt in einem Katalog.'''<br />
Die Funktion ist die selbe wie bei einem Alias für eine Seite.<br />
* Alias-Titel-Feld (Aus diesem Feld wird automatisch ein Alias generiert, wenn keine Angabe beim Alias gemacht wurde. Dieses Feld muss '''nicht''' Eindeutig sein. Der Alias wird aber eindeutig generiert und ist damit genau so benutzbar wie eine eindeutige ID)<br />
{{Hinweis|Es ist darauf zu achten, dass beim Anlegen der Felder das Feld ''Alias'' '''nach''' dem Feld ''Titel'' plaziert wird, da sonst der Alias nicht korrekt generiert bzw. nur die ID gesetzt wird.}}<br />
<br />
===Langtext===<br />
* Advanced settings<br />
** Allow html (wenn erlaubt werden in dem Feld HTML-Tags erlaubt - Liste der erlaubten HTML-Tags ist in den Eigenschaften von Contao editierbar)<br />
** Rich Text (wenn angekreuzt wird der TinyMCE angezeigt)<br />
<br />
===Nummer===<br />
* Advanced settings<br />
** Minimum (legt den Minimalwert fest, den ein Benutzer eingeben kann)<br />
** Maximum (legt den Maximalwert fest, den ein Benutzer eingeben kann)<br />
* Format settings<br />
** Prefix und Suffix Strings<br />
** Format<br />
*** Formattyp<br />
**** Zeichenkette<br />
**** Nummer<br />
**** Datum<br />
*** Zeichenfolge für Formatierung<br />
<br />
===Dezimal===<br />
* Advanced settings<br />
** Minimum (legt den Minimalwert fest, den ein Benutzer eingeben kann)<br />
** Maximum (legt den Maximalwert fest, den ein Benutzer eingeben kann)<br />
* Format settings<br />
** Prefix und Suffix Strings<br />
** Format<br />
*** Formattyp<br />
**** Zeichenkette<br />
**** Nummer<br />
**** Datum<br />
*** Zeichenfolge für Formatierung<br />
<br />
===Datum===<br />
* Advanced settings<br />
** Zeiteingabe (Falls ausgewählt, darf der Benutzer Datum '''und''' Zeit eingeben<br />
** Format<br />
*** Formattyp<br />
**** Zeichenkette<br />
**** Nummer<br />
**** Datum<br />
*** Zeichenfolge für Formatierung<br />
<br />
Möchte man im Feld ''Date'' immer das aktuelle Datum beim Anlegen eines Items verwenden, kann man in den erweiterten Einstellungen des Date-Feldes beim Standartwert den Wert '''date()''' eintragen.<br />
<br />
===Checkbox===<br />
Zum Erstellen einer einfachen Checkbox. Hier kann nicht viel eingestellt werden, da ja nur 1 oder 0 als Zustand gilt.<br />
<br />
===Auswahl===<br />
Hiermit kann man ein Auswahl-Feld (Select) erstellen, das als Grundlage eine andere Tabelle nutzt. Das kann Taxonomie sein oder auch ein anderer Katalog.<br />
<br />
* Advanced settings<br />
** Include blank option (Um bei der Drop-Down Liste auch die Möglichkeit zu haben, eine leere Auswahl anzubieten)<br />
* Options settings<br />
** Tabelle für Optionen (Hier muss die Tabelle ausgewählt werden, in der die Optionen stehen - Taxonomie wäre -> tl_taxonomie)<br />
** Spalte für Tabellenwerte (Eine Spalte für die Speicherung einer Option auswählen. Hier sind nur die Spalten vorgegeben, die sich auch in der Tabelle befinden)<br />
** Anzeige der Sortierspalte (Um die Sortierung der Optionen vorzunehmen kann hier eine andere Spalte ausgewählt werden.)<br />
** Filter items (Hier kann man wieder eigene Filter definieren, um die Auswahl einzugrenzen)<br />
** Auswahl der Einträge<br />
*** Optionen (Hier kann man noch mal genau auswählen, welche Optionen man anbieten möchte)<br />
*** Modus für Unterauswahl<br />
**** Show selected items collapsed (Nur die ausgewählten Items anzeigen)<br />
**** Show children of selected items collapsed (Nur die Kinder der selektierten Items anzeigen)<br />
**** Tree with all items selectable (Baumansicht mit allen Items als Option auswählbar)<br />
**** Tree with only children selectable (Baumansicht nur mit den Kind-Items auswählbar)<br />
*** Parent Filter (Hier kann man das Eltern Element angeben, welches die Optionen enthält. Praktisch wenn man 2 Bäume bei der Taxonomie hat und nur einen zur Auswahl geben will)<br />
<br />
===Tags===<br />
Auch Tags sind ähnlich der Auswahl dazu da, eine andere Tabelle als Wert anzugeben.<br />
<br />
Der Unterschied besteht darin, das Tags eine Checkboxliste ergeben, mit der auch eine Mehrfachauswahl möglich ist.<br />
<br />
* Advanced settings<br />
** Include blank option (Um bei der Drop-Down Liste auch die Möglichkeit zu haben, eine leere Auswahl anzubieten)<br />
* Options settings<br />
** Tabelle für Optionen (Hier muss die Tabelle ausgewählt werden, in der die Optionen stehen - Taxonomie wäre -> tl_taxonomie)<br />
** Spalte für Tabellenwerte (Eine Spalte für die Speicherung einer Option auswählen. Hier sind nur die Spalten vorgegeben, die sich auch in der Tabelle befinden)<br />
** Anzeige der Sortierspalte (Um die Sortierung der Optionen vorzunehmen kann hier eine andere Spalte ausgewählt werden.)<br />
** Filter items (Hier kann man wieder eigene Filter definieren, um die Auswahl einzugrenzen)<br />
** Auswahl der Einträge<br />
*** Optionen (Hier kann man noch mal genau auswählen, welche Optionen man anbieten möchte)<br />
*** Modus für Unterauswahl<br />
**** Show selected items collapsed (Nur die ausgewählten Items anzeigen)<br />
**** Show children of selected items collapsed (Nur die Kinder der selectierten Items anzeigen)<br />
**** Tree with all items selectable (Baumansicht mit allen Items als Option auswählbar)<br />
**** Tree with only children selectable (Baumansicht nur mit den Kind-Items auswählbar)<br />
*** Parent Filter (Hier kann man das Eltern Element angeben, welches die Optionen enthält. Praktisch wenn man 2 Bäume bei der Taxonomie hat und nur einen zur Auswahl geben will)<br />
<br />
===URL===<br />
Der Feldtyp URL hat keine besonderen Parameter. Er dient lediglich der Ein- und Ausgabe einer URL.<br />
<br />
===Datei===<br />
Dieser Feldtyp ist für die Ein- und Ausgabe von Dateien vorhanden. Man kann damit Downloads oder Galerien erstellen. Falls die ausgewählte Datei nicht unter den Contao-Einstellungen eingetragen ist, so bleibt das Feld "value" (mehr dazu siehe "Welche Variablen hat man in einem Template zur Verfügung?") leer. Aus diesem Grund sollte man im Vorhinein die entsprechenden Dateitypen freischalten.<br />
* Advanced Settings<br />
** Mehrere Dateien (Wenn ausgewählt können mehrere Dateien ausgewählt werden)<br />
** Ändern des Dateibaumes <br />
*** Setzen des Ordners für das Wurzelverzeichnis (Hier kann ein spezieller Dateibaum gewählt werden, um unnötige Wege zu verkürzen)<br />
*** Gültige Dateitypen (In einer Komma-separierten Liste kann man hier die Dateitypen auf eine gültige Liste einschränken)<br />
*** Nur Dateien erlauben (Ordner sind dann nicht anwählbar)<br />
*Format settings<br />
** Bild anzeigen (Um ein Bild / eine Bildergalerie anzeigen zu lassen)<br />
*** Bildbreite und -höhe sind auswählbar<br />
** Link erzeugen<br />
*** Um einen Link zum Herunterladen der Datei zu erzeugen oder bei einem Bild eine Vollansicht (Lightbox) anzubieten<br />
<br />
===Calculate===<br />
Um Berechnungen auf SQL Ebene vorzunehmen<br />
* Calculation formula (Eingabe von einer SQL calculation für das Feld, wie '(price*1.15)*qty'<br />
* Format settings<br />
** Prefix und Suffix Strings<br />
** Format<br />
*** Formattyp<br />
**** Zeichenkette<br />
**** Nummer<br />
**** Datum<br />
*** Zeichenfolge für Formatierung<br />
<br />
===Bewertungen===<br />
Die Besucher der Internetseite können bei Angabe eines solchen Feldtypes eine Bewertung vornehmen<br />
* ajaxratingfield (Angabe von maximalen Punkten die ein Besucher vergeben kann)<br />
<br />
===Zugriffszähler===<br />
Ohne Optionen. Hiermint wird einfach gezählt und ausgegeben wie oft auf dieses Item zugegriffen wurde. Es ist auf ein Klick per IP pro Tag festgelegt.<br />
<br />
===Frontend Benutzer===<br />
Ohne Optionen.<br />
Um die Items nur dem jeweiligen Frontendbenutzer der sie angelegt hat zuzuweisen muss ein Feldtyp dieser Art angelegt sein.<br />
<br />
===Meta Keywords===<br />
Ohne Optionen.<br />
Um eine Liste von Keywords für diese Item eingeben zu können.<br />
{{Anmerkung|der Feldtyp "Meta Keywords" ist veraltet, da in der Katalog Konfiguration direkt nun ein Textfeld als Quelle der META Keywords gewählt werden kann.}}<br />
<br />
===Mehrspaltiger Text===<br />
<br />
Nur verfügbar wenn zusätzlich installiert: [http://www.contao.org/erweiterungsliste/view/catalogmultitextwizardfield.html direkt zum ER]<br />
<br />
Hiermit kann ein Feld ähnlich des Tabellenelements in Contao angelegt werden.<br />
Man definiert einmal die Spaltenanzahl und Überschriften.<br />
Beim Anlegen des Items hat man dann die Möglichkeit beliebig viele Zeilen anzugeben.<br />
* Spaltenüberschriften (Angabe der Anzahl, der Reihenfolge und der Titel der Spaltenüberschriften)<br />
<br />
Für das Frontend Editing (wenn man dieses Feld dort editieren möchte) braucht man die Erweiterung [http://www.contao.org/erweiterungsliste/view/x_FrontendMultiTextWizard.de.html xFrontend MultiTextWizard]. Ansonsten ist dieses Feld nicht editierbar.<br />
<br />
===Produktvariante (Besonderheit vom chshop -> wird dort erläutert)===<br />
<br />
=== Merkliste und Varianten ===<br />
Mit diesem Feldtyp ist es möglich Items für eine Merkliste vorzubereiten.<br />
* Notelistvariants sind die Varianten, die ein Item besitzen können. Die Liste der Varianten besteht aus Select- und Tagfields des Katalogs. Dadurch ist es möglich Varianten von der Taxonomie oder von anderen Katalogen zu erstellen, indem man in diesem Katalog Auswahlen dafür anlegt.<br />
<br />
==Sobald man Felder definiert hat==<br />
ist in der Übersicht bei den Feldern zu sehen ob ein Feld:<br />
* zur Suche markiert ist<br />
* Sortierbar ist<br />
* Gruppiert wurde (um die Reihenfolge festzulegen)<br />
* ein Pflichtfeld ist<br />
* ob es eine Kontrol Checkbox ist (nur wenn angewählt wird es sichtbar)<br />
* Ob es ein Dateityp ist<br />
* Ob es sich um ein Bild handelt<br />
* in der halben Breite im Backend angezeigt wird<br />
* Ob darüber ein Filter angewendet wird<br />
<br />
[[Datei:cat-cat2-fieldpreview.png|Felderübersicht]]<br />
<br />
=Frontend Module und ihre Attribute=<br />
<br />
Bei den verschiedenen Modulen muss zunächst eine Auswahl getroffen werden, für welchen Katalog das Modul gemacht wird. Dabei kann immer nur ein Katalog gewählt werden. <br />
<br />
'''Allgemeine Einstellungen (die alle Module haben):'''<br />
* Titel<br />
* Überschrift<br />
* Modultyp (mit den unten stehenden Modultypen)<br />
* Zugriffsschutz (Nur bestimmten Gruppen das Modul anzeigen)<br />
* Experten Einstellungen<br />
** Nur Gästen anzeigen<br />
** CSS-ID/Klasse<br />
** Abstand davor und dahinter<br />
<br />
[[Datei:cat-cat2-view-list.jpg|Cat Modul Liste]]<br />
<br />
[[Datei:cat-cat2-view-reader.jpg|Cat Modul Reader]]<br />
<br />
==Catalog List==<br />
Zur Ausgabe einer Liste von Items wird das Modul [[ModuleCatalogList]] verwendet.<br />
<br />
==Catalog Reader==<br />
Um die Details von einem einzelnen Item anzuzeigen<br />
* Als Wichtigstes muss eine Weiterleitungsseite eingestellt werden. Auf dieser Seite muss der Catalog Reader vorhanden sein.<br />
* catalog layout (Auswahl des Templates für den Reader)<br />
** catalog_full (Standardtemplate um Alles auszugeben)<br />
** catalog_full_rev (Template um alle Felder auszugeben - Entwickler Version)<br />
* Visible Fields - Sichbare Felder. Diese Felder sind dann im Template verfügbar. Man kann auch die Reihenfolge der Ausgabe bestimmen.<br />
<br />
==Catalog Filter==<br />
Mit Hilfe von einem Filter können Besucher die Liste eines Catalogs filtern und die Anzeige eingrenzen. Die Filter können hier genau eingestellt werden. Sogar ein eigenes Suchfeld nur für den einen Katalog kann hier erstellt werden.<br />
* Catalog -> für welchen Katalog soll dieser Filter benutzt werden (es kann nur ein Katalog angegeben werden)<br />
* Weiterleitungsseite (auf welche Seite soll bei Klick weitergeleitet werden. Üblicherweise ist das eine Seite mit dem Modul 'cataloglist', da hier dann nur noch die Items angezeigt werden, die zu der gefilterten Ausgabe passen)<br />
* Filter layout (default -> filter_default | zum Entwickeln ist das filter_widget Template gedacht)<br />
* Enables Filter By section (Einen Filter erstellen)<br />
** Filter Headline (Überschrift für diese(n) Filter)<br />
** Filter Fields (Hier kann man das Feld und die Art des Filters auswählen)<br />
*** Die Reihenfolge bestimmt man mit den grünen Pfeilen neben der Feldbezeichnung<br />
*** Tree View (Ankreuzen wenn es eine baumartige Struktur sein soll, bzw. bei diesem Feld eine baumartige Struktur eingegeben wurde. Die Kindelemente reagieren dabei auf die Auswahl der Elternelemente)<br />
*** None (default Wert -> es wird von diesem Feld kein Filter erstellt)<br />
*** Links List (eine einfache Link Liste wird von dem Feld erstellt)<br />
*** Radio Button (Eine Auswahl mittels Radio Button wird erstellt, so ist die Auswahl nur von einem Wert möglich)<br />
*** Select drop-down (Eine Auswahl mittels einer Select-Box wird erstellt. Nur ein Wert kann ausgewählt werden.)<br />
** Reveal tree view sequentially (Die Filter werden erst nach und nach eingeblendet. Die Reihenfolge bestimmt dabei die Einblendung. So wird der 2. Filter erst eingeblendet, wenn im ersten etwas ausgewählt wurde. Eine Möglichkeit wäre hier die Auswahl von Städten, die erst erscheint, wenn ein Bundesland ausgewählt wurde)<br />
** Tags multiple select allowed (Wenn dieses Feld ausgewählt wurde, wird aus dem Radio Button eine Checkbox und aus der Select drop-down Liste eine Liste mit der Möglichkeit meherere auszuwählen.)<br />
* Enables Range section (Hier können Felder ausgewählt werden, wo ein Minimum und Maximum eingegeben werden kann um darüber zu Filtern)<br />
** Range Headline (Überschrift angeben)<br />
** Range Fields (Auswahl der Felder für die ein Bereichsauswahl erstellt werden soll. Die Liste ist auch wieder sortierbar)<br />
* Enables Date section (Hier können Felder ausgewählt werden, welche nach Datum zusammengefasst werden können)<br />
** Dates Headline (Überschrift angeben)<br />
** Date Fields (Hier sind nur Datumsfelder zur Auswahl angeboten. Man kann bestimmen, welches benutzt werden soll)<br />
** Date Ranges (Hier kann angegeben werden, welche Auswahl der Besucher hat, um die Daten zu filtern):<br />
*** Last year<br />
*** Last 6 months<br />
*** Last month<br />
*** Last week<br />
*** Yesterday<br />
*** Today<br />
*** Tomorrow<br />
*** Next week<br />
*** Next month<br />
*** Next 6 months<br />
*** Next year<br />
* Enables Sort section (Hier wird eingestellt, welche Felder vom Besucher überhaupt sortierbar sind und wie das geschehen soll) <br />
** Sort Headline (Überschrift angeben)<br />
** Sort Fields (Hier muss angegeben werden, welche Felder sortierbar sein sollen. Die Reihenfolge kann wieder über die grünen Pfeile bestimmt werden)<br />
** Sort form control type Hier wird festgelegt, wie die Besucher bestimmen können wie sortiert wird:<br />
*** select (Über eine Select Auswahl)<br />
*** list (Mit hilfe einer Linkliste)<br />
*** radio (Über einen Radio Button)<br />
* Enables Search Box (Eine Suchbox einschalten. Nur Text, langtext Felder werden unterstützt)<br />
** Search Headline (Überschrift eingeben)<br />
** Search Fields (Hier können die Felder ausgewählt werden, in denen gesucht werden soll)<br />
* Use filter condition from lister on same page (Wenn auf derselben Seite auch eine List-Modul von dem Katalog eingesetzt wird und diese Liste mit conditions eingeschränkt ist, werden bei Auswahl dieses Feldes die Filter mit Berücksichtigung der conditions erstellt.)<br />
<br />
==Catalog Navigation==<br />
Mit diesem Modul kann man eine Navigation durch einen Katalogs erstellen. Die Navigation besteht zum Beispiel aus Kategorien.<br />
* Catalog -> für welchen Katalog soll diese Navigation genommen werden (es kann nur ein Katalog ausgewählt werden)<br />
* Weiterleitungsseite (auf welche Seite soll bei Klick weitergeleitet werden. Üblicherweise ist das eine Seite mit dem Modul [[ModuleCatalogList|Katalog liste]], da hier dann nur noch die Items angezeigt werden, die zu der Kategorie passen)<br />
* Navigations field -> Hier muss das Feld angegeben werden, aus dem die Navigation zusammengesetzt wird. Also ein Selectfield aus dem gewählten Katalog. (Andere Felder wie Tagfield gehen nicht und stehen deswegen nicht zur Auswahl!)<br />
* Alle anderen Einstellungen der Navigation funktionieren genau so wie beim normalen [[ModulNavigation|Navigationsmodul]]<br />
<br />
==Catalog Notify==<br />
Hiermit wird ein Formular erstellt, welches zur schnellen Kontaktaufnahme bei einem einzelnen Item dargestellt wird. Z.B.: Möchten Sie nähere Informationen zu diesem Produkt? Dann schicken Sie uns bitte Ihre Kontaktdaten, damit wir uns bei Ihnen melden können.<br />
* Catalog (Hier muss wieder der Katalog angegeben werden, in dem das Item dargestellt werden soll)<br />
* Form Fields (Hier können Sie Felder angeben, die der Benutzer ausfüllen soll, damit Sie Kontakt zu ihm aufnehmen können)<br />
{{Anmerkung|Der folgende Punkt ist in catalog 2.0.0 beta1 Build 51 nicht, oder nicht mehr vorhanden!}}<br />
* Sicherheitsfrage deaktivieren (nicht empfohlen! Nur sinnvoll, wenn die Benutzer schon in einem Bereich sind, in dem man sich anmelden muss)<br />
* Subject (Betreff der Email, hier können spezielle Inserttags benutzt werden in der Art -> <nowiki>{{catalog::Spaltenbezeichnung}}</nowiki>. Z.B. <nowiki>{{catalog::title}}</nowiki><br />
* Recipients List (Liste von Emailadressen, die eine Email mit dem Inhalt erhalten sollen)<br />
* Body text (Text der Email. Auch hier sind die speziellen Inserttags <nowiki>{{catalog::Spaltenbezeichnung}}</nowiki> möglich. Zusätzlich sind noch die Variablen ##catalog## und ##link## verfügbar. Wobei catalog durch den Katalog und link durch den direkten Link zu dem Item ersetzt werden.<br />
* Catalog Template (Hier kann das passende Template angegeben werden um das Formular darzustellen. Default ist mod_catalognotify)<br />
<br />
==Catalog Featured==<br />
Hiermit kann man eine Liste erstellen, die besondere Items darstellt. Die Liste wird per Zufall zusammengestellt.<br />
* Grundeinstellungen sind wie bei der Catalog-List<br />
* Besonderheiten:<br />
** Number of items (Hier kann die Anzahl der Items dargestellt werden. 0 zeigt alle)<br />
** Custom ordering (Die Reihenfolge kann hier festgelegt werden)<br />
* Um spezielle Einträge anzulegen braucht nur ein extra Feld (checkbox) erstellt werden (z.B. hervorgehoben) und in der Condition können dann Items festgelegt werden, deren Wert 1 ist -> spalte_hervorgehoben=1<br />
<br />
==Catalog Related==<br />
Hiermit erstellt man eine Liste von ähnlichen Items - einzusetzen auf einer Seite, auf der auch der Catalog Reader enthalten ist. Zufallsausgabe.<br />
* Grundeinstellungen sind wie bei der Catalog-List<br />
* Besonderheiten:<br />
** Related fields to match (Angabe der Felder, die bei den darzustellenden Items gleich sein sollen)<br />
** Amount of tags that must be in common (Einstellen der Anzahl der Übereinstimmungen -> Minimumangabe. d.h. wenn 3 Felder angegeben wurden, die übereinstimmen sollen, kann bei einer Angabe von 1 auch ein Item angezeigt werden, welches nur eine Übereinstimmung hat und nicht alle 3)<br />
** Number of items (Hier kann die Anzahl der Items dargestellt werden. 0 zeigt alle)<br />
** Custom ordering (Die Reihenfolge kann hier festgelegt werden)<br />
<br />
==Catalog Reference==<br />
Hiermit erstellt man eine Liste von Items mit einer gleichen Eigenschaft. Diese muss zusammen mit dem Catalog Reader eingesetzt werden und ist für die Anzeige von Items aus einem '''anderen''' Katalog.<br />
* Grundeinstellungen sind wie bei der Catalog-List<br />
* Besonderheiten:<br />
** Select the match field (Das Feld auswählen, welches die Verbindung zum anderen Katalog herstellt)<br />
** Select reference catalog (Den zweiten Katalog auswählen, wo die anzuzeigenden Items enthalten sind)<br />
** Select the reference field (Das Feld angeben, welches im 2. Katalog für die Identifizierung genutzt wird. Es soll dasselbe Feld angegeben werden, welchen auch schon für die Verknüpfung genommen wurde)<br />
** Number of items (Hier kann die Anzahl der Items dargestellt werden. 0 zeigt alle)<br />
** Custom ordering (Die Reihenfolge kann hier festgelegt werden)<br />
<br />
==Catalog Edit==<br />
Um ein Item im Frontend editieren und erstellen zu können. Dieses Modul wird anstelle von Catalog Reader verwendet.<br />
*Catalog (den Katalog auswählen, dessen Items im Frontend editierbar sein soll)<br />
* Editable Fields (Angabe der Felder, die editierbar sein sollen. Mit den Pfeilen kann man diese in der Reihenfolge anordnen)<br />
* Weiterleitungsseite (Seite die angezeigt werden soll, wenn das Formular abgesendet wurde. Meistens wird wieder zurück zu der Liste weitergeleitet)<br />
* Sicherheitsabfrage deaktivieren (Nicht empfohlen! Es sei denn, nur angemeldete Benutzer haben Zugriff auf diese Seite)<br />
* Restricted fields (Mit dieser Einstellung können Vorbelegungen, die _nicht_ geändert werden können, vorgenommen werden. Diese Felder sollten nicht als Editable Fields konfiguriert sein)<br />
** Wählen Sie hier die Felder aus, welche vorbelegt sein sollen<br />
** Restricted fields default values (Sind erst '''nach dem Speichern einstellbare Vorgaben''' für die Felder, die vorher ausgewählt wurden -> Jeder Feldtyp ist individuell einstellbar.)<br />
** Beispiel für ein Restricted field: Ein Feld mit einer Checkbox, ob das Item online sein soll. 'online' bekommt als default Wert 'Nein'. Nun ist jedes Item, was über diesen Catalog Editor erstellt oder bearbeitet wird offline! So kann man im Frontend mit einer extra Gruppe, die dieses Feld bearbeiten kann und eben keine default Vorgabe hat die Items freischalten. Die 'normalen' Benutzer haben dieses Recht dann nicht.<br />
<br />
=Weitere Einstellungsmöglichkeiten=<br />
<br />
== Merkliste - Formulargenerator ==<br />
Die Merkliste wird nicht als extra Modul erstellt, sondern in einem Formular mit dem Formulargenerator von Contao.<br />
<br />
Dazu gibt es ein neuen Feldtyp 'Merkliste' der zum Beispiel am Anfang positioniert werden kann.<br />
Der Besucher kann später das Formular ausfüllen und so die Liste an den Emailempfänger versenden, um sich so zum Beispiel ein Angebot für die Items einzuholen.<br />
<br />
Einstellungen:<br />
* Feldname (der Feldname für diesen Feldtyp)<br />
* Feldbezeichnung (diese wird normalerweise für Felder als Label angezeigt und sollte daher hier '''leer''' gelassen werden)<br />
* Text (Hier kann ein Text angegeben werden, der über der Liste der Items angezeigt wird)<br />
* Katalog (Den Katalog angeben, der die Items enthält)<br />
* Sichtbare Felder (Die anzuzeigenden Felder von den Items, die Liste ist auch hier wieder über die Pfeile sortierbar)<br />
<br />
=== Templates für die Merkliste ===<br />
* form_catalognotelist.tpl (Template für die Liste im Formular)<br />
* form_catalognotelist_mail.tpl (Template für die Email, welche die Items vom Merkzettel enthält. Hier kann genau festgelegt werden, welche Felder in der Email von einem Item angezeigt werden.)<br />
<br />
=Tipps und Tricks zur Umsetzung=<br />
<br />
==Welche Variablen hat man in einem Template zur Verfügung?==<br />
<source lang="php"><br />
<?php print_r($this->entries); ?><br />
</source><br />
oder<br />
<source lang="php"><br />
<?php $this->showTemplateVars(); ?><br />
</source><br />
Damit bekommt man das komplette Array ausgegeben.<br />
<br />
==Zeichenkette des Titels formatieren==<br />
Warum wird bei mir nichts angezeigt, obwohl ich da etwas angegeben habe?<br />
* Wichtig: man muss bei den Feldern die man später hier benutzen möchte folgendes Ankreuzen -> Anzeige-Einstellungen > Sichtbar in der Backend-Listen-Ansicht<br />
<br />
==Wie kann man in der Detail Ansicht den meta-title so beeinflussen, das dieser den Namen von dem Item nimmt?==<br />
* Einfach das Feld für den Namen mit title benennen (das ist die Fallback Methode, wenn die andere -> Page title field nicht benutzt wird). Der catalog wird dann automatisch dieses Feld benutzen um den meta-title zu generieren.<br />
* Page title field beim Katalog sezten. Zu finden unter 'Search' in den Einstellungen vom Katalog.<br />
<br />
==Titel so beeinflussen, das die aktuelle Kategorie einer Liste dort steht==<br />
Im Catalog Template folgendes nutzen:<br />
<source lang="php"><br />
<?php if(strlen($this->Input->get('kategorie')))<br />
{<br />
global $objPage;<br />
$objPage->pageTitle = "".$entry['data']['kategorie']['value']." - XYZ"; <br />
}<br />
?> <br />
</source><br />
In dem Beispiel wird jetzt (nur wenn eine Kategorie gewählt ist) der Wert von '''$entry['data']['kategorie']['value']''' eingesetzt.<br />
<br />
==Wie bekommt man ein Auge bei den Items? / on- offline Schalten von Items==<br />
Zuerst muss man sich in Feld vom Typ 'Checkbox' anlegen. Zum Beispiel mit dem Namen 'online'.<br />
Jetzt kann man den Katalog konfigurieren und bei '''Feld veröffentlichen''' (publish Field) das Checkbox-Feld auswählen.<br />
Ab jetzt ist im Backend bei den Items eines Katalogs ein graues oder grünes Auge (je nach Zustand) sichtbar.<br />
<br />
==Detail Seiten in die sitemap.xml und ins Modul Sitemap bringen==<br />
* sitemap.xml -> Den Katalog einfach für die Indexierung der Suche freigeben -> [http://tip.dasprojekt.org/Catalog_2#Erstellen_von_einem_Katalog_.28Backend.29 Searchable] (Achtung: eine Weiterleitungsseite muss auf jeden Fall angegeben sein beim Katalog selber. Diese Seite wird dann in der Sitemap benutzt um die Items darzustellen.)<br />
* Modul Sitemap -> Hier werden die Detailseiten nicht integriert, da es bei einem normalen Katalog schon zu viele Einträge wären, um diese dort sinnvoll darzustellen.<br />
<br />
==Alias bei Links benutzen (anstelle der ID)==<br />
Dazu brauchst man nur ein Pflichtfeld (Namen von dem Item) und erstellt dann noch ein Feld vom Typ Alias. Das Alias-Titel-Feld ist dann der Name des Items.<br />
Bei dem Katalog selber muss noch ausgewählt werden, welches das Alias Feld ist.<br />
Das Alias Feld ist genau so wie das Alias Feld von Seiten etc., man kann selbst etwas eintragen oder den Inhalt automatisch generieren lassen, wenn man das leer lässt.<br />
Nachdem die Suche und die Seiten neu generiert wurden (Systemwartung) sollte der Alias bei der Suche und auch bei der Detailansicht (URL) genutzt werden.<br />
'''Im Moment muss in der Liste das Alias Feld als 'Sichtbar' ausgewählt werden. Sonst funktioniert die Verlinkung nicht! (Sollte in der Endversion behoben sein)'''<br />
<br />
==Folder-URL und der catalog wollen nicht so recht==<br />
<br />
Unter Einstellungen kann unter Sicherheitseinstellungen eine Liste von Variablennamen angeben werden, welche von der Erweiterung Folder-URL als Parameter erkannt werden sollen. Hier muss "orderby,sort,search" angegeben werden. Dadurch ignoriert Folderurl diese Parameter und der catalog ist wie immer nutzbar.<br />
<br />
Es sollten alle Schlüsselwörter der Filtermöglichkeiten hinzugefügt werden. Wenn man die Einträge des Kataloges nach z.B. "Ort" sortieren will, gibt es einen Fehler, wenn das Feld der Datenbanktabelle nicht im Feld "URL Schlüsselworte" in den Einstellungen auftaucht.<br />
<br />
==Eine Liste im Frontend so sortieren wie im Backend==<br />
<br />
Um eine Liste genau so zu sortieren wie im Backend braucht man einfach nur bei der Sortierung nach dem Feld 'sorting' zu sortieren (z.B. sorting ASC). Im Backend können Einträge nur dann manuell sortiert (verschoben) werden, wenn bei keinem Feld die Einstellung 'Sortier DropDown aktivieren' aktiv ist.<br />
<br />
{{Achtung|Bitte klären, da die Filterung dann nicht mehr funktioniert. Siehe Thread im Forum: [http://www.contao-community.de/showthread.php?13299-BE-Eintr%E4ge-verwalten-kein-Button-Anwenden-f%FCr-Filterung-vorhanden BE, Einträge verwalten, kein Button 'Anwenden' für Filterung vorhanden ]<br />
[[http://code.google.com/p/typolight-catalog/issues/detail?id=199 Bug-Report]] [[http://code.google.com/p/typolight-catalog/source/detail?r=198 fixed in r198]]}}<br />
<br />
{{Hinweis|Mit der Erweiterung [[catalog_manualsort]] ist es möglich die Reihenfolge der Einträge im Backend trotzdem zu ändern, auch wenn die Sortieroption für bestimmte Felder aktiv ist.}}<br />
<br />
==Items im Backend verschieben==<br />
Damit man Items im Backend verschieben kann darf die '''Sortierungs Option''' (Feld-Eigenschaften->Backend Filter Einstellungen->'Sortierungs Dropdown aktivieren') '''bei keinem Feld aktiviert''' sein.<br />
{{Achtung|Bitte klären, da die Filterung dann nicht mehr funktioniert. Siehe Thread im Forum: [http://www.contao-community.de/showthread.php?13299-BE-Eintr%E4ge-verwalten-kein-Button-Anwenden-f%FCr-Filterung-vorhanden BE, Einträge verwalten, kein Button 'Anwenden' für Filterung vorhanden ]}}<br />
<br />
==Bedingung bei Strings==<br />
<br />
Um eine Bedingung anzugeben, die innerhalb eines Strings vorhanden ist, reicht es ja nicht einfach nur einen Vergleich per SQL vorzunehmen.<br />
Beispiel: Über den Feldtyp Tag sind Taxonomieen einem Produkt zugeordnet. Da das mehrere sein können muss man die Bedingung in der Liste wie folgt abfragen -><br />
<source lang="php"><br />
FIND_IN_SET(7, kategorie)<br />
</source><br />
D.h.: es soll innerhalb von kategorie nach der ID 7 gesucht werden.<br />
<br />
==Formatieren der Felder vom Typ Text, Nummer und Dezimal==<br />
Options-Checkbox: '''Zusätzliche Format-Funktionen aktivieren.'''<br />
<br />
Das Auswahlmenü '''Format-Funktion''' erlaubt es, die Feldtypen '''Text''', '''Nummer''' und '''Dezimal''' zu formatieren. So gehts:<br />
<br />
=== Zeichenkette ===<br />
Hier gibt man einen sprintf Formatierungs-String ein (siehe [http://de3.php.net/sprintf PHP: sprintf - Manual]) <br />
<br />
''Beispiel Zeichenkette:''<br />
* '''Feldinhalt:''' Broccoli<br />
* '''Formatierungs-String:''' Auf zum %s!<br />
* '''Ausgabe:''' Auf zum Broccoli!<br />
<br />
<br />
=== Nummer ===<br />
Hier gibt man nur die Anzahl der gewünschten Nachkommastellen an. In der Ausgabe erscheinen nun die in Contao festgelegten Tausender- und Dezimal-Trennzeichen.<br />
<br />
''Beispiel Nummer:''<br />
* '''Feldinhalt:''' 1000<br />
* '''Nachkommastellen:''' 2<br />
* '''Ausgabe:''' 1.000,00<br />
<br />
<br />
=== Datum ===<br />
Hier gibt man ein Formatierungsmuster ein (siehe [http://de.php.net/manual/de/function.date.php PHP: date - Manual])<br />
<br />
''Beispiel Datum:''<br />
* '''Feldinhalt (Unix Timestamp):''' 1293217200<br />
* '''Formatierungsmuster:''' Y-m-d H:i<br />
* '''Ausgabe:''' 2010-12-24 18:00<br />
<br />
==Filtern nach Datum==<br />
<br />
Aufgabenstellung:<br />
Das Datumsfeld ist in dem Format 'dd.mm.yyyy' vorhanden.<br />
Es soll nun für das aktuelle Jahr eine Ausgabe erfolgen und für die vergangenen Jahre ein Archiv erstellt werden.<br />
<br />
Das Problem:<br />
Die Datum Angaben werden als timestamp gespeichert und sind in einem char Feld.<br />
<br />
Lösungsansatz:<br />
<source lang="php"><br />
meinedatumsvariable BETWEEN UNIX_TIMESTAMP('{{date::Y}}-01-01') AND UNIX_TIMESTAMP('{{date::Y}}-12-31')<br />
</source><br />
So kommt man an die Daten des aktuellen Jahres, um die Daten von 2009 auszugeben:<br />
<source lang="php"><br />
meinedatumsvariable BETWEEN UNIX_TIMESTAMP('2009-01-01') AND UNIX_TIMESTAMP('2009-12-31')<br />
</source><br />
<br />
===Probleme die bei Unix Timestamp auftreten können===<br />
Es kann passieren, das der Unix Timestamp beim Verarbeiten von PHP falsch interpretiert wird (nicht als Zahl).<br />
Daher kann es nötig sein, diesen erst durch einen kleinen Trick auf jeden Fall in einen Zahlenwert umzuwandeln:<br />
<source lang="php"><br />
ROUND(datum)<br />
</source><br />
Damit wird auf einen Zahlenwert gerundet (da es sich schon um Integer Werte handelt geht dabei nichts verloren).<br />
<br />
Beispiel (von do_while) aus dem Forum:<br />
<source lang="php"><br />
ROUND(datum) BETWEEN UNIX_TIMESTAMP('{{date::Y}}-01-01') AND UNIX_TIMESTAMP('{{date::Y}}-12-31')<br />
</source><br />
Hier wird nach dem Datum sortiert.<br />
<br />
==Mit DCA Felder besser einschränken==<br />
Inzwischen ist es möglich Felder über DCA zu steuern. Der Vorteil: dadurch kann man wesendlich besser Fehleingaben abfangen.<br />
Hier unter 'Felder' kann mna die Möglichkeiten der Konfiguration sehen -> [http://www.contao.org/referenz.html http://www.contao.org/referenz.html]<br />
<br />
Um ein Feld zum Beispiel nur für den Lesenden Zugriff freizugeben kann man diese Syntax nutzen:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tabellenname']['fields']['spaltenname']['eval']['readonly'] = true;<br />
</source><br />
<br />
Oder die Eingabe von einer E-Mail überprüfen:<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tabellenname']['fields']['spaltenname']['eval']['rgxp'] = 'email';<br />
</source><br />
<br />
==CSV import==<br />
Um die Daten richtig importieren zu können muss darauf geachtet werden, das diese UTF-8 kodiert sein müssen. Das wird von Exel nicht direkt so gemacht.<br />
<br />
==Mehrsprachige Filter mit dem Taxonomie Modul==<br />
Möchte man einen Mehrsprachigen Katalog erstellen und diesen nach Taxonomien Filtern, so gibt es u.a. zwei Möglichkeiten dies zu tun:<br />
* Für jede Sprache einen Taxonomiebaum erstellen. Problem: Doppelte Zuweisung im Katalog-Item + mehrere Taxonomiebäume<br />
* Bessere Lösung: Man arbeitet mit den sprachabhängigen Inserttags. So kann man je nach Spracheinstellungen der Seite eine passende Frontend-Ausgabe erreichen.<br />
<br />
Beispiel:<br />
Möchte man jedem Item ein Land zuordnen, so erstellt man einen Taxonomie-Eintrag "Länder" und in fügt in diesen die auswählbaren Länder ein. Für "Deutschland" könnte das dann z.B. so aussehen:<br />
<nowiki>{{iflng::de}}</nowiki>Deutschland<nowiki>{{iflng}}{{iflng::en}}</nowiki>Germany<nowiki>{{iflng}}</nowiki><br />
Nun sollte der Filter auf der deutschen Seite "Deutschland", und auf der englischen "Germany" ausgeben.<br />
Dabei gibt es allerdings ein Problem mit dem Feldtyp in der Datenbank. Dieser ist auf wenige Zeichen beschränkt, wird somit bei entsprechender Länge gekürzt. Um dies '''nicht updatesicher''' zu korrigieren, muss man ins phpMyAdmin gehen und unter tl_taxonomy die Länge des entsprechenden Feldes (ich glaube es ist: "name") ändern. (wird später genauer beschrieben)<br />
<br />
==Frontendausgabe Sortieren bei einem Feld was von einem anderen Catalog oder der Taxonomie kommt==<br />
Beispiel:<br />
Katalog A hat ein Select wo man Items aus Katalog B auswählen kann.<br />
<br />
<source lang="sql">(SELECT sorting FROM catalog_tabellenname AS cs WHERE cs.id=catalog_feld) ASC</source><br />
<br />
catalog_tabellenname = Tabelle die das Feld beinhaltet (Katalog B)<br />
catalog_feld = Name von dem Feld welches im Select genutz wird. (Feld in Katalog B)<br />
<br />
==Katalogeinträge an den Frontend-Benutzer binden==<br />
<br />
Um Katalogeinträge an den Frontend-Benutzer zu binden, kann die Erweiterung [http://www.contao.org/erweiterungsliste/view/catalogitemuseridfield.de.html catalogitemuseridfield] installiert werden.<br />
<br />
Nach der Installation besteht die Möglichkeit ein Feld mit dem Feldtyp Frontend-Benutzer im Catalog zu definieren.<br />
In diesem Feld wird die User ID des Frontend-Benutzers gespeichert und kann so z.B. in den Bedingungen verknüpft werden.<br />
<br />
=Video Tutorials aus dem Internet=<br />
Ein paar Videos zu dem Catalog:<br />
<br />
{{#widget:YouTube|id=Dg55QT7uGEI}} {{#widget:YouTube|id=wwhuSCQ4Jb4}}<br />
<br />
=Tutorials=<br />
* [[Catalog Merkzettel erstellen]]<br />
* [[Catalog mit Frontend-Editing und Workflow erstellen]]<br />
* [[Catalog Templates anpassen]]<br />
----<br />
<br />
--[[Benutzer:Toflar|Toflar]] 15:12, 15. Mai 2010 (UTC+1)<br />
<br />
--[[Benutzer:MacKP|MacKP]] 13:02, 5. Apr. 2010 (UTC)<br />
<br />
--[[Benutzer:Nils.riel|Nils.riel]] 12:04, 24. Nov. 2010 (CET)</div>Manitougshttps://de.contaowiki.org/Mootools_Deviant_MenuMootools Deviant Menu2011-08-27T20:56:20Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>{{AppliesTo|TLVersion=2.8.x|Version=ab 2.9}}<br />
[[Category: Admin_HOWTOS]]<br />
<br />
=Anmerkung des Autors=<br />
<br />
Da mein erstes eingebautes Contao Menü durch das Tutorial von MacKP ermöglicht wurde, hab ich mir gedacht ich spendier auch eins. Da dies aber mein erstes Tutorial ist, bitte ich um Verständins;)<br />
...Ich habs auch vom Aufbau ziemlich an das von MacKP angelehnt... *grins*<br />
<br />
=Voraussetzung=<br />
Mootools 1.2 (also TypoLight ab 2.8 / alle Contao Versionen); mit Mootools 1.3 ist noch kein Fehler bekannt.<br /><br />
Grundlegende Erfahrung mit Contao und Seitenstruktur.<br /><br />
Gute CSS-Kentnisse, um das Menü genau anpassen zu können (wenn nicht, kann es im Original behalten werden).<br /><br />
Keine JavaScript-Kentnisse<br />
<br />
=Script herunterladen=<br />
Von der [http://developer.ps/moo/deviantmenu/ Hersteller-Seite] über den Link "Download script" das Skript herunterladen.<br />
Darüber befindet sich eine DEMO des Menüs.<br />
<br />
Wer sich jedoch von der sich darauf öffnenden github.com Seite erschlagen fühlt, kann auch den [https://github.com/dirar/deviantmenu/zipball/1.1 Direktlink] zur Version 1.1 benutzen.<br /><br />
Es wird auch ein Beispiel, allerdings ohne mootools-core in der zip-Datei mitgeliefert.<br />
<br />
=Vorgehen=<br />
'''1.''' Die Datei "deviantMenu.css" [[CSS#Selbsterstellte_Stylesheets_in_das_Framework_importieren|importieren]].<br />
<br />
'''2.''' Die JS-Datei umbenennen in z.B. moo_deviantMenu.xhtml (ab Contao 2.10) oder moo_deviantMenu.tpl (TLVersion=2.8.x|Version=ab 2.9) und in den Template Ordner (TL_ROOT/templates) hochladen. Anschließend geht man in den Template Editor in Contao und [[Templates_bearbeiten#Direkt_in_Contao_.C3.BCber_das_Backend|bearbeitet]] das Script folgendermaßen:<br />
<br />
Beginnen muss das Script mit:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<!--//--><![CDATA[//><!--<br />
</source><br />
<br />
dann folgt der normale Code (die ehemalige deviantMenu.js). Und enden muss es auf:<br />
<br />
<source lang="javascript"><br />
//--><!]]><br />
</script><br />
</source><br />
<br />
Um das Menü automatisch an den Unterpunkt springen zu lassen indem man sich gerade befindet, muss die CSS Klasse ''.selected'' durch ''.active'' ersetzt werden (Zeilen: 55, 56, 64)<br />
<br />
'''3.''' Es kann das Standard Navigationstemplate (nav_default.xhtml/tpl) verwendet werden. Wenn jedoch (wie es bei mir der Fall ist) ein Navigationspunkt, der Unterpunkte hat, nicht verlinkt werden soll, so sollte man sich ein Navigationstemplate bauen z.B.: nav_partiallinked.xhtml/tpl wie es unter "[[Navigationspunkte nicht verlinken]]" beschrieben ist (und natürlich entsprechend die CSS-Klassen der nicht verlinkten Seiten anpassen).<br />
<br />
'''4.''' Ein neues [[ModulNavigation|Navigationsmodul]] erstellen:<br />
* Startlevel 0<br />
* Stoplevel 0<br />
* Referenzseite (keine bzw. Startpunkt oder was man möchte)<br />
* Navigationstemplate: das Standard-Template ''nav_default.xhtml/tpl'' oder das vorhin erstellte ''nav_partiallinked.xhtml/tpl''<br />
* Experten-Einstellungen: ''deviantMenu-main-conatiner'' als CSS-ID!!! einfügen.<br />
<br />
'''5.''' Im Seitenlayout:<br />
* CSS-Datei auswählen: deviantMenu.css (nach eigenen Vorstellungen anpassen; vor allem die Bilddateien, die auch noch hochgeladen werden müssen, falls verwendet ;) !)<br />
* Navigationsmodul aus Punkt 4 einbinden<br />
* MooTools-Templates ''moo_deviantMenu'' aus Punkt 2 aktivieren<br />
* Eigener JavaScript-Code:<br />
<br />
<source lang="javascript"><br />
<!-- Create a Deviant Menu Instance --><br />
<script type="text/javascript" ><br />
window.addEvent('domready', function(){<br />
var devmenu = new deviantMenu('deviantMenu-main-conatiner');<br />
});<br />
</script><br />
</source><br />
<br />
Damit initialisiert man das Menü.<br />
{{msgWarning|Wenn das Menü in einer HTML5 Seite (ab Contao 2.10) eingebunden wird, müssen die Templates die Endungen *.hmtl5 haben!}}<br />
{{msgImportant|Leider gibt es keinen Fallback, wenn Javascript nicht vorhanden ist. Dies sollte vor der Einbindung bedacht werden, bevor dieses Menü verwendet wird. Und noch eine Unschönheit: Wenn die aktiven Links in den Ebenen weit verschachtelt sind, ist das Menü nicht so hoch wie es sein müsste, sondern so hoch wie die Ebene vorher es war. Dies liegt am Script selbst. Es gibt bis dato auch noch keinen Workaround dafür!}}<br />
<br />
Fortgeschrittene User können auch im ''moo_deviantMenu''-Script ein paar Einstellungen vornehmen. Siehe: [http://mootools.net/forge/p/deviantmenu http://mootools.net/forge/p/deviantmenu]<br />
<br />
Link zum Forum: [http://www.contao-community.de/showthread.php?22402-Mootools-deviantmenu-in-TYPOlight-benutzen http://www.contao-community.de/showthread.php?22402-Mootools-deviantmenu-in-TYPOlight-benutzen]</div>Manitougshttps://de.contaowiki.org/AgentfilterAgentfilter2011-08-27T19:49:50Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
<br />
Inhaltselemente abhängig vom User Agent anzeigen.<br />
<br />
{{ExtInfo<br />
| Dev=Helmut Schottmüller ([[User:hschottm|hschottm]])<br />
| DevSite=http://www.aurealis.de<br />
| ExtVersion=1.1.0<br />
| Version=2.9.0 - 2.10.0<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/agentfilter.de.html<br />
| DonateLink=http://aurealis.de/spenden.html<br />
}}<br />
<br />
<br />
== AgentFilter ==<br />
<br />
Webbrowser übertragen ihre Identität in Header-Zeilen bei http-Anfragen (Requests) an den Server. Eine Beschreibung hierzu findet sich in RFC 1945. Diese Zeichenkette, häufig auch User Agent genannt, beinhaltet z.B. den Namen des Webbrowsers, das Betriebssystem, auf dem der Webbrowser eingesetzt wird und einiges mehr.<br />
Beispiele für User Agents sind z.B.<br />
<br />
<pre><br />
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)<br />
Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A477d Safari/419.3<br />
Mozilla/5.0 (Windows NT 6.1; U; ru; rv:5.0.1.6) Gecko/20110501 Firefox/5.0.1 Firefox/5.0.1<br />
</pre><br />
<br />
<br />
AgentFilter erlaubt es, eine Teilzeichenkette innerhalb des User Agent zu suchen und abhängig von diesem Ergebnis ein Inhaltselement anzuzeigen oder zu verstecken.<br />
<br />
Damit lassen sich dann z.B. Betriebssystem-abhängige Inhalte oder Downloads anzeigen.<br />
Zusätzlich ist es möglich, in einem Seiten-Layout nach einem bestimmten User Agent zu suchen und für diesen ein benutzerdefiniertes Seitentemplate zu verwenden.<br />
<br />
=== Filtern von Inhaltselementen ===<br />
<br />
Im Feld '''User agent Suche''' gibt man einen einfachen Suchbegriff an, nach dem gesucht werden soll. Der Suchbegriff wird als regulärer Ausdruck ausgewertet. Einfache Suchbegriffe werden dabei nicht kontextsensitiv behandelt, d.h. es wird nicht zwischen Groß-/Kleinschreibung unterschieden. Bei regulären Ausdrücken wird die in der PHP-Funktion preg_match bekannte Notation verwendet. Im hier angegebenen Beispiel ist die Suche erfolgreich, wenn der User Agent entweder ipad, iphone oder ipod beinhaltet.<br />
<br />
[[Datei:agentfilter_content.png|center|frame|User Agent Filter für Content-Elemente]]<br />
<br />
Im Feld '''Aktion''' legt man fest, was passieren soll, wenn die Suche im User Agent erfolgreich verlief. Im obigen Beispiel würde also das Inhaltselement nicht auf iPhones, iPads oder iPod Touches angezeigt werden.<br />
<br />
=== Filtern von Seitenlayouts ===<br />
<br />
In den Experteneinstellungen eines Seitenlayouts kann man ebenfalls im Feld '''User agent Suche''' einen Suchbegriff eingeben. Für den Fall, dass der Suchbegriff gefunden wird, hat man die Möglichkeit, ein Seitentemplate seiner Wahl statt des regulären Seitentemplates zu verwenden.<br />
<br />
[[Datei:agentfilter_layout.png|center|frame|User Agent Filter für Seitenlayouts]]<br />
<br />
Diese Möglichkeit kann interessant sein, wenn sich ein bestimmtes User Agent spezifisches Verhalten nicht durch ein- oder ausblenden von Inhalten erreichen lässt. Im vorliegenden Beispiel wird z.B. ganz gezielt ein Seitentemplate für Mobile Endgeräte statt eines regulären Seitentemplates verwendet.<br />
<br />
=== Lizenz ===<br />
<br />
AgentFilter steht unter der LGPL-Lizenz<br />
<br />
--[[Benutzer:Hschottm|Hschottm]] 17:58, 13. Aug. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/PhotoalbumsRssFeedPhotoalbumsRssFeed2011-08-27T19:32:51Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
Die Erweiterung photoalbumsRssFeed erweitert die Contao-Erweiterung [http://www.contao.org/erweiterungsliste/view/Photoalbums.de.html Photoalbums] um einen RSS-Feed. Der RSS-Feed informiert über neue und aktualisierte Fotoalben.<br />
<br />
{{ExtInfo<br />
| Dev=Mathias Thomas<br />
| ExtVersion=1.0.0<br />
| Version=2.9.5 - 2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/photoalbumsRssFeed.html<br />
| Depending=Photoalbums<br />
}}<br />
<br />
=Installation=<br />
Die Installation erfolgt über das Extension Repository. Falls die Erweiterung Photoalbums noch nicht installiert wurde, so muss sie mit installiert werden.<br />
<br />
Die Erweiterung benötigt eine Datenbankaktualisierung. Es wird die Spalte "photoalbumsfeeds" in der Datenbanktabelle "tl_layout" (hier werden die Einstellungen der Seitenlayout gespeichert) hinzugefügt.<br />
<br />
=Einstellungen=<br />
Die Fotoalben-Archive, die im RSS-Feed angezeigt werden sollen, werden im Seitenlayout ( Layout -> Themes ), Abschnitt "RSS/Atom-Feeds", "Photoalbums-Feeds" ausgewählt. Je Seitenlayout wird ein RSS-Feed für alle ausgewählten Fotoalben-Archive erstellt.<br />
<br />
=Aktualisierung des RSS-Feeds=<br />
Mit dem stündlichen Cron-Job (zu sehen im System-Log) werden die Fotoalben auf Änderungen (neues Album oder Aktualisierung eines bestehenden Albums) überprüft und ggf. ein neuer RSS-Feed erstellt.</div>Manitougshttps://de.contaowiki.org/Isotope-Cart-ProductAddedFeedbackIsotope-Cart-ProductAddedFeedback2011-08-27T18:41:55Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>{{stub}}<br />
[[Kategorie:Isotope eCommerce]]<br />
In der aktuellen Isotope Version (0.2.10 stable) wird dem Benutzer nach erfolgreichem Hinzufügen eines Produktes in den Warenkorb keine Meldung angezeigt. Mit den Boardmitteln von Contao und ein wenig Kreativität kann man das in wenigen Minuten ändern. Es gibt mehrere Wege dieses Verhalten zu implementieren. Die einzelnen Varianten werden hier vorgestellt.<br />
<br />
{{Hinweis<br />
|Ab Version 1.3 wird ein solcher Mechanismus verfügbar sein.<br />
}}<br />
<br />
==Variante1: Isotope Box und Hooks==<br />
Zum Anzeigen einer HTML-Messagebox nach dem erfolgreichen Hinzufügen eines Artikels in den Warenkorb wird PHP, Javascript und CSS verwendet. Schlussendlich würde es diese Technik auch erlauben Isotope Fehlermeldungen (Out of Stock, komplexere Validierungsresultate) anzuzeigen.<br />
<br />
[[Datei:IsotopeCartExt_ajaxBox.png|HTML-Messagebox|frame|center]]<br />
<br />
Zuerst erstellt man ein neues Modul namens''IsotopeExt''. Im Ordner TL_ROOT/system/modules erstellt man folgende Verzeichnisse und Dateien: <br />
<br />
*IsotopeExt/config/config.php<br />
*IsotopeExt/IsotopeCartExt.php<br />
<br />
===Backend Konfiguration===<br />
Dieses Tutorial geht davon aus, dass im Isotope Produktleser Modul unter 'Add product jump to page' keine Seite angewählt ist. Die beschriebene Technik könnte aber auch dann verwendet werden.<br />
<br />
===PHP Konfiguration===<br />
In der Datei ''IsotopeExt/config/config.php'' folgenden PHP-Code hinzufügen:<br />
<br />
<source lang="php"><br />
$GLOBALS['TL_HOOKS']['iso_addProductToCollection'][] = array('IsotopeCartExt', 'addSuccess');<br />
$GLOBALS['TL_HOOKS']['iso_addProductToCollection'][] = array('IsotopeCartExt', 'createFENotification');<br />
</source><br />
(Am einfachsten eine config.php eines anderen Moduls kopieren und dessen Inhalt ersetzen.)<br />
<br />
Damit registriert man zwei neue Hooks, die jedes mal aufgerufen werden, wenn ein Produkt dem Warenkorb hinzugefügt wird. Im Folgenden nun die Implementation der zwei registrierten Funktionen.<br />
<br />
In der Datei ''IsotopeExt/IsotopeCartExt.php'' folgenden Code einfügen:<br />
<source lang="php"><br />
class IsotopeCartExt extends Model {<br />
public function addSuccess(IsotopeProduct $objProduct, $intQuantity){<br />
$_SESSION['ISOTOPE']['FE_NOTIFY']['messages']['add_success'] = array(<br />
'class' => 'add_success',<br />
'message' => 'Produkt wurde dem Warenkorb hinzugefügt.'<br />
);<br />
return $intQuantity;<br />
}<br />
<br />
public function createFENotification(IsotopeProduct $objProduct, $intQuantity){<br />
$objTempl = new FrontendTemplate('iso_notification');<br />
$objTempl->messages = $_SESSION['ISOTOPE']['FE_NOTIFY']['messages'];<br />
$_SESSION['ISOTOPE']['FE_NOTIFY']['html'] = $objTempl->parse();<br />
<br />
return $intQuantity;<br />
}<br />
}<br />
</source><br />
<br />
===Templates & Isotope Box===<br />
Nun ist es möglich, die erstellten Session Objekte im Frontend zu verwenden. Man verwendet dazu ein [[Templates_bearbeiten|angepasstes]] Produktleser-Template. Dazu einfach das entsprechende Template ''iso_reader_default.tpl'' von TL_ROOT/modules/Isotope/templates nach TL_ROOT/templates kopieren. Wenn das Template umbenannt wird, nicht vergessen im Produktleser Modul das umbenannte Template anzuwählen.<br />
Folgende Zeilen am Anfang einfügen:<br />
<br />
<source lang="php"><br />
<?php<br />
echo $_SESSION['ISOTOPE']['FE_NOTIFY']['html'];<br />
unset($_SESSION['ISOTOPE']['FE_NOTIFY']);<br />
?><br />
</source><br />
<br />
In der Session-Variabel $_SESSION['ISOTOPE']['FE_NOTIFY']['html'] steckt das ganze gerenderte HTML der anzuzeigenden Nachricht, ist allerdings noch nicht sichtbar. Mit Javascript liest man das HTML aus und zeigen es in einer Isotope Box an. <br />
Dazu anschliessend an den PHP-Code folgendes einfügen:<br />
<source lang="javascript"><br />
<script type='text/javascript'><br />
var notifyCtnr = jQuery("#isotope_notify"); // in mootools use: $('isotope_notify');<br />
if(notifyCtnr.length > 0){<br />
Isotope.displayBox(notifyCtnr.html());<br />
}<br />
// optional jQuey Code, enhance isotope box overlay close operation<br />
jQuery("#iso_ajaxOverlay").click(function(){<br />
Isotope.hideBox();<br />
});<br />
</script><br />
</source><br />
<br />
====CSS====<br />
Mit optional markierte Zeilen bzw. Blöcke können weggelassen werden, ohne die Funktion einzuschränken.<br />
Den folgenden CSS-Code direkt im Template einbinden, oder besser im CSS des Themes.<br />
<source lang="css"><br />
#iso_ajaxBox{<br />
z-index: 1000;<br />
line-height: 1.4em; /*optional*/<br />
width: 250px; /*optional*/<br />
padding: 20px !important; /*optional*/<br />
border: 2px solid #93BA13 !important; /*optional*/<br />
border-radius: 4px; /*optional*/<br />
}<br />
#iso_ajaxBox .add_success{<br />
/* Pfade zu Bilddateien anpassen */<br />
background: url("../../system/themes/default/images/help.gif") no-repeat scroll right center #FFFFFF;<br />
padding-right: 50px;<br />
}<br />
#iso_ajaxBox .add_fail{ /*optional*/<br />
/* Pfade zu Bilddateien anpassen */<br />
background: url("../../system/themes/default/images/important.gif") no-repeat scroll right center #FFFFFF;<br />
padding-right: 50px;<br />
}<br />
#iso_ajaxBox a.close{ /*optional*/<br />
color: black;<br />
text-decoration: underline;<br />
float: right;<br />
margin-top: 20px;<br />
}<br />
#iso_ajaxOverlay{<br />
top: 0 !important;<br />
z-index: 999;<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/RefererTaggingRefererTagging2011-08-17T18:03:10Z<p>Manitougs: /* Hinweise zum Internet Explorer */ Typo</p>
<hr />
<div>[[Category:Extensions]]<br />
{{ExtInfo<br />
| Dev=trilobit GmbH<br />
| ExtVersion=1.0.0 stable<br />
| Version=2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/RefererTagging.10000009.de.html<br />
}}<br />
<br />
=Was ist ein Referer?=<br />
Der Referer gibt an, woher der Besucher Ihrer Seite kommt. Diese Angabe bezieht sich immer auf die derzeit aktive Session. Wichtig in diesem Zusammenhang ist, dass immer nur der erste Referer einer Session gespeichert wird. Wenn Sie also die Seite über Google besuchen und nachher über ein Suchergebnis bei Bing, werden Sie nur den Aufruf von Google sehen. Es sei denn der Browser wurde daziwschen geschlossen.<br />
<br />
Das Wissen um den Referer können Sie neben statistischen Auswertungen auch dazu nutzen, dem Besucher individuelle Inhalte anzuzeigen. Kommt er von einer Suchmaschine, ist er vielleicht neu und benötigt Hilfestellung. Oder möchten Sie "Neulingen" ein besonderes Angebot in Ihrem Shop machen? Hat eine Webseite die Lösung zu Ihrem Gewinnspiel veröffentlicht, können Sie Benutzer von dieser Seite auch markieren und später bei der Ziehung nicht berücksichtigen. Viele weitere Einsatzgebiete sind denkbar. <br />
<br />
=Was bietet die Erweiterung RefererTagging?=<br />
RefererTagging kann über das Contao-Repository installiert werden. Es bietet die Möglichkeit, Referer zu erkennen und mit einem Session-Cookie zu taggen, d.h. Sie können konfigurieren, dass bei einem Referer mit ''bing.com'' im Namen, das Cookie ''suchmaschine'' auf ''bing'' gesetzt wird.<br />
<br />
=Einstellungen=<br />
Sobald diese Erweiterung über den Erweiterungskatalog in Contao installiert ist, stehen das Modul im Abschnitt ''System'' unter dem Namen ''RefererTagging'' zur Verfügung.<br />
<br />
[[Datei:referertagging-layout.jpg|frame|center|Layout]]<br />
<br />
Folgende Werte können konfiguriert werden<br />
<br />
* '''Pattern'''<br />
** Auf diesen regulären Ausdruck wird der Referer geprüft.<br />
** Beispiele:<br />
*** ''google'' trifft auf ''google.de'' und ''plus.google.com'' zu, aber auch auf ''http://trilobit.de/google.html''.<br />
*** ''bing.com'' trifft auf ''http://www.bing.com'' zu, allerdings auch auf ''bingocom.de''. Das hat damit zu tun, dass der Punkt ein spezielles Zeichen bei den regulären Ausdrücken ist und als Platzhalter für ein beliebiges Zeichen steht. Korrekt wäre daher das Muster bing\.com.<br />
*** ''google\.(de|com)\/'' prüft, ob der Referer ''google'' gefolgt von einem Punkt und dann ''de'' oder ''com'' enthält. Danach muss ein "/" kommen. Klammern zeigen also Alternativen auf.<br />
*** Möchte man ganz sicher gehen, dass es sich um die richtige Domain handelt, sollte man diese samt Protokoll abprüfen, z.B. ''^https:\/\/trilobit.de\/'' Durch das Dach muss am Anfang des Referers ''https://trilobit.de/'' stehen.<br />
** Eine Hilfestellung zu regulären Ausdrücken bietet beispielsweise [http://www.drweb.de/magazin/php-schnellreferenz-regulare-ausdrucke/ Dr. Web].<br />
* '''Tag Name'''<br />
** Name des Eintrags, der bei positivem Abgleich des Referers mit Pattern in die Session geschrieben wird. Ein gleichnamiges Cookie wird gesetzt.<br />
* '''Tag Wert'''<br />
** Wert des Eintrags, der bei positivem Abgleich des Referers mit Pattern in die Session geschrieben wird. Ein Cookie mit diesem Wert und Tag Name wird gesetzt.<br />
<br />
Es werden alle Einträge nacheinander durchgegangen, so dass auch mehrere Tags und Cookies gesetzt werden können.<br />
<br />
<br />
=Hinweise zum Internet Explorer=<br />
Beim Internet Explorer (Versionen 8, 9) wird nicht in allen Fällen der Referer gesetzt. Folgendes Verhalten bei der Verlinkung auf eine andere Seite gibt es:<br />
<br />
*''<a href="http://www.trilobit.de">trilobit GmbH</a>''<br />
**Mausklick auf den Link<br />
***der Referer wird korrekt gesetzt<br />
***die Seite wird im selben Fenster bzw Tab geöffnet<br />
*''<a href="http://www.trilobit.de" target="_blank">trilobit GmbH</a>''<br />
**Mausklick auf den Link<br />
***der Referer wird korrekt gesetzt<br />
***die Seite wird in einem neuen Fenster bzw Tab geöffnet<br />
*''<a href="http://www.trilobit.de" onclick="window.open(this.href); return false;">trilobit GmbH</a>''<br />
**Diese Version wird von Contao verwendet, wenn die Option "in neuem Fenster öffnen" gesetzt ist<br />
**Mausklick auf den Link<br />
***der Referer wird '''nicht''' gesetzt<br />
***die Seite wird in einem neuen Fenster bzw Tab geöffnet<br />
*''<a href="http://www.trilobit.de" ... >trilobit GmbH</a>''<br />
**Mausklick auf den Link '''mit gedrückter [Strg]-Taste'''<br />
***der Referer wird korrekt gesetzt (egal, ob target oder onclick Attribute gesetzt sind)<br />
***die Seite in einem neuen Fenster bzw Tab geöffnet<br />
<br />
=Mehr Infos=<br />
Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung. Weitere Infos gibt es auch auf [http://trilobit.de/referertagging unserer Homepage].</div>Manitougshttps://de.contaowiki.org/RefererTaggingRefererTagging2011-08-14T22:26:31Z<p>Manitougs: </p>
<hr />
<div>[[Category:Extensions]]<br />
{{ExtInfo<br />
| Dev=trilobit GmbH<br />
| ExtVersion=1.0.0 stable<br />
| Version=2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/RefererTagging.10000009.de.html<br />
}}<br />
<br />
=Was ist ein Referer?=<br />
Der Referer gibt an, woher der Besucher Ihrer Seite kommt. Diese Angabe bezieht sich immer auf die derzeit aktive Session. Wichtig in diesem Zusammenhang ist, dass immer nur der erste Referer einer Session gespeichert wird. Wenn Sie also die Seite über Google besuchen und nachher über ein Suchergebnis bei Bing, werden Sie nur den Aufruf von Google sehen. Es sei denn der Browser wurde daziwschen geschlossen.<br />
<br />
Das Wissen um den Referer können Sie neben statistischen Auswertungen auch dazu nutzen, dem Besucher individuelle Inhalte anzuzeigen. Kommt er von einer Suchmaschine, ist er vielleicht neu und benötigt Hilfestellung. Oder möchten Sie "Neulingen" ein besonderes Angebot in Ihrem Shop machen? Hat eine Webseite die Lösung zu Ihrem Gewinnspiel veröffentlicht, können Sie Benutzer von dieser Seite auch markieren und später bei der Ziehung nicht berücksichtigen. Viele weitere Einsatzgebiete sind denkbar. <br />
<br />
=Was bietet die Erweiterung RefererTagging?=<br />
RefererTagging kann über das Contao-Repository installiert werden. Es bietet die Möglichkeit, Referer zu erkennen und mit einem Session-Cookie zu taggen, d.h. Sie können konfigurieren, dass bei einem Referer mit ''bing.com'' im Namen, das Cookie ''suchmaschine'' auf ''bing'' gesetzt wird.<br />
<br />
=Einstellungen=<br />
Sobald diese Erweiterung über den Erweiterungskatalog in Contao installiert ist, stehen das Modul im Abschnitt ''System'' unter dem Namen ''RefererTagging'' zur Verfügung.<br />
<br />
[[Datei:referertagging-layout.jpg|frame|center|Layout]]<br />
<br />
Folgende Werte können konfiguriert werden<br />
<br />
* '''Pattern'''<br />
** Auf diesen regulären Ausdruck wird der Referer geprüft.<br />
** Beispiele:<br />
*** ''google'' trifft auf ''google.de'' und ''plus.google.com'' zu, aber auch auf ''http://trilobit.de/google.html''.<br />
*** ''bing.com'' trifft auf ''http://www.bing.com'' zu, allerdings auch auf ''bingocom.de''. Das hat damit zu tun, dass der Punkt ein spezielles Zeichen bei den regulären Ausdrücken ist und als Platzhalter für ein beliebiges Zeichen steht. Korrekt wäre daher das Muster bing\.com.<br />
*** ''google\.(de|com)\/'' prüft, ob der Referer ''google'' gefolgt von einem Punkt und dann ''de'' oder ''com'' enthält. Danach muss ein "/" kommen. Klammern zeigen also Alternativen auf.<br />
*** Möchte man ganz sicher gehen, dass es sich um die richtige Domain handelt, sollte man diese samt Protokoll abprüfen, z.B. ''^https:\/\/trilobit.de\/'' Durch das Dach muss am Anfang des Referers ''https://trilobit.de/'' stehen.<br />
** Eine Hilfestellung zu regulären Ausdrücken bietet beispielsweise [http://www.drweb.de/magazin/php-schnellreferenz-regulare-ausdrucke/ Dr. Web].<br />
* '''Tag Name'''<br />
** Name des Eintrags, der bei positivem Abgleich des Referers mit Pattern in die Session geschrieben wird. Ein gleichnamiges Cookie wird gesetzt.<br />
* '''Tag Wert'''<br />
** Wert des Eintrags, der bei positivem Abgleich des Referers mit Pattern in die Session geschrieben wird. Ein Cookie mit diesem Wert und Tag Name wird gesetzt.<br />
<br />
Es werden alle Einträge nacheinander durchgegangen, so dass auch mehrere Tags und Cookies gesetzt werden können.<br />
<br />
=Mehr Infos=<br />
Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung. Weitere Infos gibt es auch auf [http://trilobit.de/referertagging unserer Homepage].</div>Manitougshttps://de.contaowiki.org/Weiterleitungen_via_htaccessWeiterleitungen via htaccess2011-08-14T21:58:46Z<p>Manitougs: Kategorie hinzugefügt</p>
<hr />
<div>{{stub}}<br />
[[Category:Admin_HOWTOS]]<br />
<br />
Um [http://www.google.com/support/webmasters/bin/answer.py?hl=de&answer=66359 Duplicate Content] zu vermeiden, ist es sinnvoll URL's die den selben Inhalt zeigen weiterzuleiten. In der Regel geht das mit einem Eintrag in der .htaccess am schnellsten. Diese Anleitung setzt einen Webserver mit entsprechenden Rechten voraus.<br />
<br />
== www/ohne www ==<br />
<br />
Der folgende Codeschnippsel gehört nach der RewriteBase in die .htaccess und leitet alle Anfragen der Domain auf die Subdomain "www"<br />
<br />
<source lang="bash"><br />
RewriteCond %{HTTP_HOST} ^domain\.com$<br />
RewriteRule ^(.*)$ http://www.domain.com/$1 [L,R=301]<br />
</source><br />
<br />
== urlcleaner ==<br />
<br />
Die Extension [http://www.contao.org/erweiterungsliste/view/urlcleaner.html urlcleaner] ermöglicht eine Weiterleitung via Konfiguration. Möchte man beispielsweise das URL-Fragment /items/ aus einem Nachrichten-Archiv entfernen, so kann man dies mit einem Eintrag in der localconfig.php erreichen. Contao schreibt dann alle URL's in den Templates um, ohne das man als User Hand anlegen muss.<br />
<br />
'''Alte URL''': /news-reader/items/alias<br /><br />
'''Neue URL''': /news-reader/alias<br />
<br />
Leider ist die alte URL mit dieser Konfiguration noch zu erreichen und kann unter Umständen in den Suchmaschinen gelistet werden. Um diesen Fehler zu beheben, genügt folgender Code in der .htaccess (ganz am Ende der Datei):<br />
<br />
<source lang="bash"><br />
RedirectMatch 301 ^(.*)/items/(.*) $1/$2<br />
</source><br />
<br />
Dieser Code setzt voraus das auch alle Nachrichten-Archive via urlcleaner bereinigt wurden. Möchte man beispielsweise nur Nachrichten-Archiv '''Aktuelles''' vom URL-Fragment befreien und '''Pressemitteilungen''' soll so bleiben wie gehabt, dann ist auch via .htaccess eine Differenzierung möglich.<br />
<br />
<source lang="bash"><br />
RedirectMatch 301 ^(.*)/aktuelles/items/(.*) $1/aktuelles/$2<br />
</source><br />
<br />
Das Wort "aktuelles" steht in diesem Beispiel für die Seite des Nachrichten-Archivs.</div>Manitougshttps://de.contaowiki.org/MultiColumnWizardMultiColumnWizard2011-08-14T21:40:50Z<p>Manitougs: Typos</p>
<hr />
<div>[[en:MultiSelectWizard]]<br />
[[Category:Extensions]]<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=2.9 - 2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/MultiColumnWizard.html<br />
| TrackerLink=http://contao-forge.de/projects/multicolumnwizard/issues<br />
}}<br />
<br />
Dieses Widget ist dafür gedacht, beliebige Widget-Typen nebeneinander zu platzieren.<br /><br />
Das Widget ist eigentlich das Gleiche wie der [[MultiTextWizard]] oder der [[MultiSelectWizard]]; es erweitert die Funktionalitäten für belibige Widgets.<br />
<br />
=Aussehen=<br />
Das Modul ist eine Erweiterung des MultiTextWizard und des MultiSelectWizard.<br />
[[Datei:MultiColumnWizard.jpg|MultiColumnWizard|frame|center]]<br />
<br />
=Verwendung=<br />
Es gibt zwei Verwendungsmöglichkeiten. Entweder direkt mit der Angabe von "columnFields" im "eval"-Array oder mit einem Callback.<br />
<br />
==Angabe mit columnFields==<br />
<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_table']['fields']['anything'] = array<br />
(<br />
'label' => $GLOBALS['TL_LANG']['tl_table']['anything'],<br />
'exclude' => true,<br />
'inputType' => 'multiColumnWizard',<br />
'eval' => array<br />
(<br />
'style'=>'width:100%;',<br />
'columnFields' => array<br />
(<br />
'type' => array<br />
(<br />
'label' => 'hallo',<br />
'default' => 'regular',<br />
'exclude' => true,<br />
'inputType' => 'select',<br />
'options_callback' => array('tl_page', 'getPageTypes'),<br />
'eval' => array('helpwizard'=>true, 'submitOnChange'=>true, 'tl_class'=>'w50'),<br />
'reference' => &$GLOBALS['TL_LANG']['PTY']<br />
),<br />
'minRange' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_module']['catalog_staticranges_items_minrange'],<br />
'inputType' => 'text',<br />
'eval' => array()<br />
),<br />
'textnachricht' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_module']['catalog_staticranges_items_maxrange'],<br />
'inputType' => 'textarea',<br />
'eval' => array('cols'=>25,'rows'=>2)<br />
) ,<br />
'checkboxen' => array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_module']['catalog_staticranges_items_maxrange'],<br />
'inputType' => 'checkbox',<br />
'options' => array("Info","Nachricht","Sonstiges"),<br />
'eval' => array('multiple'=>true)<br />
)<br />
)<br />
)<br />
);<br />
</source><br />
<br />
==Angabe mit Callback==<br />
<source lang="php"><br />
$GLOBALS['TL_DCA']['tl_table']['fields']['anything'] = array<br />
(<br />
'label' => &$GLOBALS['TL_LANG']['tl_table']['anything'],<br />
'exclude' => true,<br />
'inputType' => 'multiColumnWizard',<br />
'eval' => array('mandatory'=>true,'columnsCallback'=>array('Class', 'Method'))<br />
<br />
);<br />
</source><br />
<br />
Wobei natürlich der Return-Wert genau das selbe Array sein muss, wie bei der "columnFields"-Variante.</div>Manitougshttps://de.contaowiki.org/CSSCSS2011-08-14T21:36:31Z<p>Manitougs: /* Eigene CSS-Dateien verwenden */ Satzbau</p>
<hr />
<div>{{AppliesTo|TLVersion=Alle Versionen}}<br />
[[Category:Admin_HOWTOS]]<br />
[[Category:CSS_HOWTOS]]<br />
Man hat in Contao 2 Möglichkeiten, wie man CSS (Cascading Stylesheet) einbindet.<br />
<br />
==Eigene CSS-Dateien verwenden==<br />
Wer lieber mit einem Editor als mit dem Framework arbeitet, kann selbst seine eigenen CSS-Dateien anlegen und verwalten. Dazu müssen die verwendeten CSS-Dateien einfach per FTP in einen Ordner (z.B /tl_files/css/) hochgeladen werden. Diese Dateien werden dann im Contao-Backend im Bereich "Seitenlayout" im entsprechenden Layout unter dem Punkt "Experten-Einstellungen --> zusätzliche <head>-Tags" mit folgendem Code eingebunden:<br />
<source lang="html4strict"><br />
<link media="screen" type="text/css" href="tl_files/css/dateiname.css" rel="stylesheet"><br />
</source><br />
<br />
{{Achtung|Prinzipiell können die Dateien überall abgelegt werden. Wenn man sie jedoch in das Root-Verzeichnis ablegt, werden sie von Contao automatisch gelöscht.}}<br />
Es gibt 2 Möglichkeiten, dem entgegenzuwirken. Entweder man legt die Dateien in einem anderen Verzeichnis ab (z.B. /tl_files/ oder /css/) oder man sagt Contao, dass es die CSS-Dateien nicht anrühren soll. Dies geschieht mit folgendem Eintrag in der Datei /system/config/localconfig.php '''unterhalb''' der Zeile ''### INSTALL SCRIPT STOP ###''<br />
<source lang="php"><br />
<!-- Löschen von Root-Dateien verhindern --><br />
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'dateiname.css'; <br />
</source><br />
Jede angelegte CSS-Datei benötigt einen Eintrag.<br />
<br />
==CSS mit dem Contao-Framework==<br />
Die zweite Möglichkeit, Stylesheets zu erstellen, ist über das Contao-Framework. Zu finden ist dieser Bereich im Backend unter Layout --> Stylesheets. Auch hier ist es möglich, mehrere Stylesheets zu erstellen.<br />
<br />
Die so erstellten CSS-Regeln werden dann von Contao benutzt um die CSS-Dateien im Rootverzeichnis automatisch (bei Änderungen oder auch durch einen Cronjob) zu generieren.<br />
<br />
[[Datei:be_css.jpg|Contao Stylesheet Editor]]<br />
<br />
Im Kopfbereich der Stylesheet-Übersicht kann man die Stylesheets nach verschiedenen Kriterien und Suchoptionen filtern. Über den Button ''Neues Stylesheet'' legt man eine neue CSS-Datei an. Im nachfolgendem Formular kann man den Namen der CSS-Datei und den Medientyp definieren. Optional kann man auch [[w:de:Conditional_Comments|Conditional Comments]] für den Internet Explorer von Microsoft festlegen.<br />
<br />
[[Datei:be_css_edit_1.jpg|Neues Stylesheet erstellen]]<br />
<br />
Danach kann mit dem Erstellen der Selektoren und deren Formatierungen begonnen werden.<br />
<br />
'''Wichtig:''' Die erstellten Stylesheets müssen dann auch im Backend unter ''Seitenlayout'' dem entsprechenden Layout zugewiesen werden.<br />
<br />
[[Datei:be_css_seitenlayout.jpg|CSS im Seitenlayout einbinden]]<br />
===Selbsterstellte Stylesheets in das Framework importieren===<br />
Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /tl_files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Import'' importieren.<br />
<br />
[[Datei:be_css.jpg|Contao Stylesheet Editor]]<br />
<br />
==Mischform aus eigenen und Contao Stylesheets==<br />
Es ist auch möglich, beide Möglichkeiten zu kombinieren. Es ist aber anzuraten, sich für eine Version zu entscheiden, da sonst sehr schnell die Übersicht verloren geht.<br />
<br />
==Spezialdatei basic.css==<br />
Während bis Contao 2.9.0 die CSS Datei basic.css vom TinyMCE für die Formatierung von Inhalten herangezogen wurde, ist diese Datei seit 2.9.0 nicht mehr standardmäßig eingebunden. Siehe auch [[TinyMCE]].<br />
<br />
==Spezialdatei newsletter.css==<br />
Die CSS Datei newsletter.css stelllt in Contao einen Spezialfall dar. Diese Datei wird vom Contao für die Formatierung von [[newsletter|Newslettern]] mittels Inline-CSS herangezogen.</div>Manitougshttps://de.contaowiki.org/ccdde:Aktuelle_Ereignisseccdde:Aktuelle Ereignisse2011-08-11T22:12:48Z<p>Manitougs: Contao 2.10.0</p>
<hr />
<div>Contao 2.10.0 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-10-0.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 00:12, 12. Aug. 2011 (CEST)<br />
----<br />
Contao 2.9.5 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-5.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 22:10, 21. Mai 2011 (CEST)<br />
----<br />
Contao 2.9.4 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-4.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 12:26, 8. Mär. 2011 (CET)<br />
----<br />
Standard Wiki Theme ist nun das brandneue von [[Benutzer:Marc|marcules]] erstellte Contaowiki Theme.<br />
Wir hoffen es gefällt.<br /><br />
--[[Benutzer:Xtra|Xtra]] 21:04, 4. Feb. 2011 (CET)<br />
----<br />
Contao 2.9.3 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-3.html Ankündigung auf der Projektseite]<br /><br />
Da dieses Update eine Sicherheitslücke behebt, ist ein Update dringend empfohlen!<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 22:19, 17. Jan. 2011 (CET)<br />
----<br />
Hier im Wiki ist nun ein Syntax Highlighter ([[w:de:GeSHi|GeSHi]]) installiert. Bitte die Änderungen in der [[Hilfe:Hilfe|Hilfe]] beachten.<br /><br />
--[[Benutzer:Xtra|Xtra]] 01:15, 27. Aug. 2010 (CEST)<br />
----<br />
Contao 2.9 veröffentlicht: [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html Ankündigung auf der Projektseite]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 13:02, 2. Jul. 2010 (CEST)<br />
----<br />
Typolight 2.8.4 veröffentlicht.<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 20:22, 1. Jul. 2010 (CEST)<br />
----<br />
Contao 2.9 RC1 verfügbar: [http://www.contao.org/neuigkeiten/items/contao_2-9-RC1.html Contao News - Contao 2.9 RC1]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 09:53, 25. Jun. 2010 (UTC)<br />
----<br />
Aus TYPOlight wird Contao: [http://www.contao.org/neuigkeiten/items/typolight-wird-zu-contao.html Contao News - TYPOlight wird zu Contao]<br /><br />
--[[Benutzer:Manitougs|Manitougs]] 09:53, 25. Jun. 2010 (UTC)<br />
----<br />
Aktuell schreiben wir die bestehenden TYPOlight Artikel auf Contao um.<br />
<br />
Weiterhin wird die Optik dieses Wiki Stück für Stück an die CI des Contao Projekts angepasst.</div>Manitougshttps://de.contaowiki.org/Spaltenset_GridSpaltenset Grid2011-07-18T22:14:40Z<p>Manitougs: div. Änderungen</p>
<hr />
<div>[[Category:Dev_Snippets]]<br />
=Spaltenset als Grid=<br />
<br />
Das Spaltenset lässt sich wunderbar für Grids verwenden. Hierfür sind nur ein paar geringe Anpassungen notwendig die hier beschrieben werden.<br />
<br />
==Spalten neu definieren==<br />
<br />
Die Spalten und die dazugehörigen Klassen werden durch die globale Konfigurationsdatei <code>$GLOBALS['TL_SUBCL']</code> definiert. Hier definiert man erst einmal die Spalten auf Grids um.<br />
Am besten lässt sich das an einem Beispiel, hier für 4 Spalten zeigen:<br />
<br />
<source lang="php"><br />
$GLOBALS['TL_SUBCL'] = array<br />
(<br />
'1x3' => array(array('grid_1', 'inner'), array('grid_3', 'inner')),<br />
'2x2' => array(array('grid_2', 'inner'), array('grid_2', 'inner')),<br />
'3x1' => array(array('grid_3', 'inner'), array('grid_1', 'inner')),<br />
'1x1x2' => array(array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_2', 'inner')),<br />
'1x2x1' => array(array('grid_1', 'inner'), array('grid_2', 'inner'), array('grid_1', 'inner')),<br />
'2x1x1' => array(array('grid_2', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner')),<br />
'1x1x1x1' => array(array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner'))<br />
);<br />
</source><br />
<br />
Ein klassisches 12-Spalten Grid würde natürlich viel zu viel Kombinationen beinhalten als das man sie bequem zusammen schreiben könnte. Deshalb gibt es von [http://www.infinitysoft.de Tristan Lins] einen [http://www.infinitysoft.de/tl_files/Sonstiges/SubcolumsGridGenerator/ Generator], mit dem es möglich ist die Spaltendefinitionen für eine beliebige Anzahl Spalten zu generieren.<br />
<br />
==Template anpassen==<br />
<br />
Das klassische [http://960.gs 960.gs] verwendet eine Containerklasse, typischerweise <code>container_12</code>. Leider lässt sich die CSS Klasse <code>subcolumns</code> nicht per Konfiguration ersetzen, deshalb muss hier Hand angelegt werden und die ce_colsetStart.tpl modifiziert werden:<br />
<br />
<source lang="php"><br />
<br />
<!-- Spaltenset Start //--><br />
<div class="<?php echo $this->class; ?> container_12"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>><br />
<!-- first Column //--><br />
<div class="<?php echo $this->column; ?>"><br />
<div class="<?php echo $this->inside; ?>"<?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>><br />
<br />
</source><br />
<br />
In dem ersten DIV wird einfach die Ausgabe von <code>$this->scclass</code> durch <code>container_12</code> ersetzt.<br />
<br />
==Subcolumns CSS Dateien löschen==<br />
<br />
Um das Ganze abzurunden, löscht man die CSS Dateien aus dem Layout; dies geht nur über den generatePage Hook sicher.<br />
<br />
===config.php===<br />
<source lang="php"><br />
$GLOBALS['TL_HOOKS']['generatePage'][] = array('MyClass', 'hookGeneratePage');<br />
</source><br />
<br />
===MyClass.php===<br />
<source lang="php"><br />
<br />
class MyClass<br />
{<br />
function hookGeneratePage($objPage)<br />
{<br />
unset ($GLOBALS['TL_CSS']['subcolumns']);<br />
unset ($GLOBALS['TL_HEAD']['subcolumns']);<br />
}<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/Backboneit_navigationBackboneit navigation2011-07-11T19:40:41Z<p>Manitougs: Tracker hinzugefügt</p>
<hr />
<div>[[Category:Extensions]]<br />
{{ExtInfo<br />
| Dev=Oliver Hoff<br />
| DevSite=http://www.hofff.com/<br />
| ExtVersion=1.0.0<br />
| Version=ab 2.9<br />
| TLVersion=2.7.0 - 2.8.4<br />
| TrackerLink=http://www.contao-forge.org/projects/backboneitnavigation/issues<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/backboneit_navigation.10000009.de.html<br />
}}<br />
<br />
= backboneit_navigation =<br />
<br />
Erweiterung bestehend aus einer Sammlung von Navigationselementen (vorerst nur ein erweitertes Navigationsmodul).<br />
<br />
Anmerkungen zum Bestimmen der Sichtbarkeit einer Seite:<br />
* Der Veröffentlichungsstatus gilt ausschließlich für eine Seite selbst. Das heißt zum Beispiel, dass eine Navigation durchaus dargestellt wird, selbst wenn die Referenzseite nicht veröffentlicht ist.<br />
* Der Seitenschutz für bestimmte Mitgliedergruppen vererbt sich auf alle Unterseiten, außer denjenigen die selbst explizit einen Seitenschutz für Mitgliedergruppen definieren und deren Unterseiten.<br />
* Die Einstellung "Nur Gästen anzeigen" gilt nur für die Seite selbst. Tatsächlich ist die Seite für angemeldete Benutzer auch noch verfügbar, soll nur in keiner Navigation angezeigt werden. (Anders als zum Beispiel Artikel, die nur Gästen angezeigt werden. Diese werden gar nicht mehr gerendert.)<br />
* "Im Menü verstecken" gilt nur für die Seite selbst.<br />
<br />
== Navigationsmenü ==<br />
<br />
Ein Multitalent: Es ist alles möglich was mit einem Navigationsmenü oder einer Individuellen Navigation möglich ist, Kombinationen aus beiden und noch einiges mehr. Einfach ausprobieren.<br />
<br />
Funktionen:<br />
* Kompatibel zu den Templates für das Standard-Navigationsmenü (einziger Unterschied ist, das Seiten die CSS-Klasse "submenu" tatsächlich auch nur dann bekommen, wenn dieses Untermenü gerendert wird)<br />
* Mehrere Referenzseiten (Wurzeln der Navigation)<br />
* Aktuelle Seite als Referenzseite<br />
* Startebene wird relativ zu den Referenzseiten berechnet (negative Startebene möglich)<br />
* Hardlimit flexibel (Anmerkung: Stopebene und Hardlimit beziehen sich relativ zur Startebene &endash; diessollte auch durch die geänderten Labels der Moduleinstellungen hervorgehen.<br />
* Versteckte und geschützte Seiten anzeigen<br />
* Als Sitemap verwendbar<br />
* Optimierte Algorithmen: Zum Beispiel wird pro Navigationsebene nur noch eine Datenbankabfrage durchgeführt, was vorallem bei einer sehr verzweigten Navigation Vorteile bringen sollte.<br />
* Erweiterbar per Hook<br />
<br />
=== Navigation per Hook erweitern ===<br />
config.php<br />
<source><br />
$GLOBALS['TL_HOOKS']['backboneit_navigation_menu'][] = array('MyNavigationHook', 'hook');<br />
</source><br />
<br />
MyNavigationHook.php<br />
<source><br />
class MyNavigationHook {<br />
<br />
// ... singleton dummy code ...<br />
<br />
public function hook($objThis, $arrRoots) {<br />
$intParentID = 1; // the ID of the parent node, were your new node should be appended/inserted to.<br />
<br />
if(!isset($objThis->arrItems[$intParentID])) // test if the parent should be rendered (to avoid my hook, if it is not needed)<br />
return;<br />
<br />
$strMyNewNodeID = 'MyNavigationHook' . 1; // to avoid collision do not use plain numbers (reservered for tl_page dataset IDs)<br />
// and prefix the ID with something specific to your hook<br />
<br />
$objThis->varActiveID = $strMyNewNodeID; // set my new node as active navigation item<br />
<br />
$objThis->arrSubpages[$intParentID][] = $strMyNewNodeID; // append the my new node to the end of $intParentIDs childs<br />
$arrRoots[] = $strMyNewNodeID; // additionally add my new node to the end of the first level<br />
<br />
$objThis->arrItems[$strMyNewNodeID] = array(<br />
'class' => 'myclass',<br />
'isTrail' => true, // whether this node is in the trail path of the active page<br />
// ... more rendering information for the navigation template (see class AbstractNavigationMenu for all fields) ...<br />
);<br />
<br />
return $arrRoots; // return the modified first navigation level (not needed if unmodified)<br />
}<br />
<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/SyncCtoSyncCto2011-07-11T19:36:22Z<p>Manitougs: Kategorie "Sonstiges" entfernt</p>
<hr />
<div>[[Category:Extensions]]<br />
Mit '''syncCto''' kann der Benutzer im Backend mehrere Contao-Installationen miteinander synchronisieren.<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=2.9 - 2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/syncCto.html<br />
| TrackerLink=http://contao-forge.de/projects/synccto/issues<br />
}}<br />
<br />
==Was ist syncCto?==<br />
<br />
syncCto bietet die Möglichkeit mehrere Contao-Installationen auf Basis einer Grund-Installation zu synchronisieren. Alle Aktionen können bequem im Backend durchgeführt werden. Durch die Integration in das Contao Rechtesystem können auch Redakteure eine Auswahl vorher definierter Datenbank-Tabellen und Dateien synchronisieren.<br />
<br />
Ein integrierter Backup-Manager sichert ausgewählte Datenbank-Tabellen, wahlweise die gesamte Contao-Installation oder nur die persönlichen Daten. Angelegte Backups können durch den Backup-Manager auch wieder importiert werden.<br />
<br />
Durch die Verwendung von syncCto können Redakteure schnell und einfach in einem Preview-System arbeiten und bei Vollendung der Arbeit den aktuellen und freigegebenen Stand zum Live-System synchronisieren.<br />
<br />
==Konfiguration==<br />
<br />
===Systemcheck===<br />
<br />
Für eine reibungslose und fehlerfreie Synchronisation ist es wichtig als erstes alle Installationen zu kontrollieren. Dafür steht der neue Menüpunkt Systemcheck zur Verfügung, denn dort werden alle für syncCto wichtigen Funktionen und Ressourcen des Servers aufgelistet. Sind alle Zellen grün, ist der erste Schritt getan. Sollte dies nicht der Fall sein, kann syncCto womöglich nicht erfolgreich funktionieren.<br />
<br />
===Einstellungen===<br />
<br />
Bevor man die erste Installation synchronisieren kann, muss zwingend bei allen Installationen auf denen syncCto installiert ist, der Menüpunkt Einstellungen (nicht zu verwechseln mit den Contao Einstellungen) aufgerufen und gespeichert werden. Bei diesem Vorgang wird der Verschlüsselungsschlüssel generiert. Der Verschlüsselungsschlüssel aus den Einstellungen des Clients benötigt man später bei der Erstellung des zuvor erwähnten Clients.<br />
<br />
==Clients verwalten==<br />
<br />
Um einen neuen Client anzulegen, klickt man im Menüpunkt Clients einfach auf den Button "Neuer Client".<br />
<br />
* '''Titel:''' z.B. der Kundenname und der Name des Servers<br />
* '''Beschreibung:''' Eine aussagekräftige Beschreibung des Servers<br />
* '''Adresse:''' Der Pfad zum TL_ROOT der Contao Installation, z.B. http://www.example.com<br />
* '''Benutzername:''' Der Benutzername mit dem man sich im Backend einloggt<br />
* '''Passwort:''' Das zum Benutzer zugehörige Passwort (wird verschlüsselt gespeichert)<br />
* '''Verschlüsselungsschlüssel:''' Hier gehört nun der Schlüssel aus den Einstellungen des Clients hinein<br />
<br />
==Synchronisation==<br />
<br />
Um den Client mit dem Server zu synchronisieren, klickt man beim entsprechenden Client auf den rechten Button "Client synchronisieren". Im nächsten Fenster wählt man die Synchronisationsart aus.<br />
<br />
* '''Contao-Installation:''' Die gesamte Contao-Installation, Dateien und Ordner in den tl_files müssen seperat ausgewählt werden<br />
* '''Persönliche Daten:''' Nur ausgewählte Dateien und Ordner im tl_files Ordner. Core-Dateien werden nicht berücksichtigt<br />
<br />
Standardmäßig ist die Option '''Persönliche Daten''' ausgewählt.<br /><br />
Danach kann man die DB-Tabellen auswählen. Man muss in diesem Schritt wissen welche Tabellen welche Daten enthält. Zum Schluss wählt man bei Bedarf noch Dateien und Ordner im tl_files aus und klickt für den Start der Synchronisation auf den Button "Client synchronisieren".<br />
<br />
==Backups==<br />
<br />
Backups können im Backend unter dem Menüpunkt Backups angelegt und wiederhergestellt werden. Alle Backups werden im automatisch angelegten Ordner "syncCto_backups" in den tl_files abgelegt. Datenbanken finden sich im Ordner "database" und Dateien im Ordner "files". Wenn man Backups wieder einspielen möchte, klickt man im Menüpunkt auf Backups und wählt die Art der Wiederherstellung. Im nächsten Schritt wählt man die entsprechende Datei aus und klickt auf "Wiederherstellen". Die Dateien oder die Datenbank auf dem Server werden danach mit den Daten aus dem Backup überschrieben.<br />
<br />
===Backups automatisiert löschen===<br />
<br />
Ab der Version 1.1.0 liegen der Extension zwei neue Cronjobs bei. Die Cronjobs löschen in Verbindung mit der Extension [http://www.contao.org/erweiterungsliste/view/cron.html Cron] automatisiert die Backups aus dem jeweiligen Ordner. Bei der Konfiguration der Cronjobs muss man den Link zum PHP-Script eingeben und den Intervall einstellen.<br />
<br />
Zur Verfügung stehen folgende zwei PHP-Skripte:<br />
<br />
* '''SyncCtoDeleteDbBackups.php''' Löscht alle Datenbank-Backups<br />
* '''SyncCtoDeleteFileBackups.php''' Löscht alle Datei-Backups<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs.jpg|Konfiguration der Cronjobs|frame|center]]<br />
<br />
Die Backups werden mit dieser Einstellung alle 7 Tage um genau 0:00 gelöscht. Möchte man den Zeitraum erhöhen, muss man */7 einfach gegen die Zahl austauschen. */14 löscht die Backups beispielsweise alle 14 Tage.<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs-2.jpg|Konfiguration zum Ausführen der Cronjobs|frame|center]]<br />
<br />
Nach Fertigstellung könnten die Cronjobs folgendermaßen aussehen:<br />
<br />
[[Datei:SyncCto-Cronjob.jpg|Übersicht Cronjobs|frame|center]]<br />
<br />
==Anwendungsfall 1==<br />
<br />
Auf dem Webserver laufen zwei Contao-Installationen.<br />
<br />
* Die Adresse der 1. Webseite heißt ''<nowiki>http://192.168.0.100/server/</nowiki>''<br />
* Die Adresse der 2. Webseite heißt ''<nowiki>http://192.168.0.100/client/</nowiki>''<br />
<br />
Der Server, bei syncCto, beschreibt immer die Installation die alle Informationen hat, die man auf eine andere Installation übertragen will. Dieses Ziel wird bei syncCto als Client beschrieben. Server und Client laufen also auf der gleichen Maschine auf den gleichen Webserver. <br />
<br />
==Anwendungsfall 2==<br />
<br />
Es gibt 2 Seiten die auf zwei verschiedenen Maschinen laufen. Beide Maschinen sind verbunden; egal ob nun im lokalen Netzwerk oder über das Internet. Dabei ist es wichtig das der Server den Client erreichen kann. Der Server kann lokal zuhause auf dem internen Webserver laufen. Der Client allerdings muss von außen erreichbar sein.<br />
<br />
* Server läuft lokal zuhause die Adresse ist ''<nowiki>http://192.168.0.100/server</nowiki>''<br />
* Der Client liegt im Internet und hat die Adresse ''<nowiki>http://www.example.com</nowiki>''<br />
<br />
So wird im Server für den Client einfach die Adresse ''<nowiki>http://www.example.com</nowiki>'' eingetragen.<br />
<br />
==Mögliche Problemfälle==<br />
<br />
Der SMH ist keine Lösung da die Daten via HTTP versendet werden. Ein ordentlich konfigurierter Server ist daher Pflicht.<br />
<br />
Sollten trotz eines guten [[#Systemcheck|Systemchecks]] und richtiger Schreibrechte eine Fehlermeldung kommen, hat man die Möglichkeit den Debugmodus zu aktivieren. In der config.php den Eintrag '''SYNCCTO_DEBUG''' von 0 auf 1 stellen. Es sollte nun eine debug.txt im Ordner syncCto_backups/debug erstellt werden. Diese kann unter Umständen einige Fragen lösen.</div>Manitougshttps://de.contaowiki.org/Hilfe:InhaltsverzeichnisHilfe:Inhaltsverzeichnis2011-07-11T19:26:35Z<p>Manitougs: /* Textlinks */ erweitert</p>
<hr />
<div>[[en:Help:Contents]]<br />
=Verfassen von Artikeln=<br />
Vor dem Verfassen eines neuen Artikels sollte kontrolliert werden, ob schon ein Artikel zum gleichen Thema existiert. Dies kann über die Suchfunktion oder über die [[Spezial:Alle_Seiten|Auflistung aller existierender Seiten]] geprüft werden. Vor dem Abspeichern eines Artikels sollte man den Artikel mit der Vorschau-Funktion auf event. Rechtschreibfehler o.ä. prüfen.<br />
==Einen neuen Artikel anlegen==<br />
Sollte die Suche zu keinem Ergebnis führen, legt man die Seite neu an.<br />
Hierzu gibt man beispielsweise den gewünschten Titel links in der Sidebar in das Suchfeld ein und klickt anschließend auf den Button "Seite".<br />
Die Wiki-Software meldet nun, dass die Seite nicht existiert und man möge sie doch bitte verfassen.<br />
<br />
Nach einem Klick auf den Link '''die Seite verfassen''' gelangt man in die Eingabemaske.<br />
<br />
Ungeduldige können auch direkt die URL: <nowiki>http://de.contaowiki.org/Wunschtitel</nowiki> in ihrem Browser eingeben, wodurch man direkt in die Eingabemaske gelangt.<br />
<br />
'''Artikel sollten neutral und allgemein verfasst werden''' (als Beispiel nicht "''Ich betrachte die Seite''" oder "''Du betrachtest die Seite''", sondern "''Man betrachtet die Seite''"), um eine Vereinheitlichung der Artikel zu gewährleisten.<br />
<br />
==Wichtig: Angabe der Contao-Version==<br />
Da sich Contao ständig weiter entwickelt, ändert sich auch laufend der Quellcode. '''Daher ist es beim Verfassen von Artikeln wichtig, immer mit anzugeben, auf welche Contao-Version sich der Artikel oder das Codebeispiel bezieht.''' Ein Besucher kann ansonsten in einem Jahr nicht mehr nachvollziehen, auf welche Contao-Version(en) sich ein HowTo für z.B. ein modifiziertes Template bezieht. Durch die Angabe der Version ist er jedoch in der Lage, Änderungen an dem entsprechenden Template nachzuvollziehen und es bei Bedarf dementsprechend anzupassen.<br />
Eine Versionsangabe erfolgt durch ff. Code zu Beginn der Seite:<br />
<pre>{{AppliesTo<br />
|Version=Alle Versionen<br />
|Ext1=SuperExtension<br />
|Ext2=HyperExtension}}</pre><br />
Hierbei können folgende Parameter verwendet werden:<br />
* Version - Die Contao Version auf die sich der Artikel bezieht.<br />
* Ext1 ... ExtN - Die Extensions die der Artikel betrifft. Die Zahl beginnt jeweils bei 1 und wird für jede weitere Extension um eins hochgezählt.<br />
* TLVersion - Da einige Artikel neben Contao auch noch TYPOlight (pre Contao 2.9) betreffen, kann man so auch noch angeben, dass ein Artikel ggf. noch TYPOlight betrifft. Diese Angaben werden jedoch mit der Zeit verschwinden.<br />
<br />
Dieser Code wird dann am Anfang der Seite wie auf folgender [[ModuleCatalogList|Beispielseite]] dargestellt.<br />
<br />
==Kategorisierung==<br />
Ein Artikel kann in einer oder mehreren [[Spezial:Kategorien| Kategorien]] abgelegt werden. Für jede Kategorie muss eine neue Zeile zu Beginn der Seite gemacht werden.<br />
<pre><br />
[[Category:Admin HOWTOS]]<br />
[[Category:Module]]<br />
</pre><br />
Um einen in Arbeit oder unvollständigen Artikel als solchen zu kennzeichnen, wird der Eintrag<br />
<pre>{{stub}}</pre><br />
an oberster Stelle, noch vor den Kategorien, eingefügt. Einem unvollständigen Artikel erkennnt man beim Betrachten am Hinweis:<br />
<br />
[[Datei:Stub-warning.png|Unvollständiger Artikel]]<br />
<br />
Des weiteren ist der Artikel in der Liste der unvollständigen Artikel aufgeführt.<br />
<br />
=Hinweise, Anmerkungen und Warnungen=<br />
In einem Artikel kann man Hinweise und Warnungen hinterlegen.<br />
Diese fügt man durch die Verwendung der jeweiligen Vorlage hinzu.<br />
==Hinweise==<br />
<pre><br />
{{Hinweis|Text des Hinweises}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Hinweis|Text des Hinweises}}<br />
<br />
==Anmerkungen==<br />
<pre><br />
{{Anmerkung|Text der Anmerkung}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Anmerkung|Text der Anmerkung}}<br />
<br />
==Warnungen==<br />
<pre><br />
{{Achtung|Text der Warnung}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Achtung|Text der Warnung}}<br />
<br />
<br />
== Meldungen mit Bild links oben und farbigem Text ==<br />
Ich habe mir erlaubt, einige eingefärbte Meldungsboxen hinzuzufügen, bei denen die Bilder links oben sitzen (was ich bei längeren Texten ganz angenehm finde). Die Icons sind aus dem frei verfügbaren Oxygen Theme von David Vignoni. --[[Benutzer:Hschottm|Hschottm]] 16:11, 11. Sep. 2010 (CEST)<br />
<br />
{|<br />
!Befehl<br />
!Ausgabe<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgInfo|Text der Meldung}}</pre><br />
|{{msgInfo|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgSuccess|Text der Meldung}}</pre><br />
|{{msgSuccess|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgError|Text der Meldung}}</pre><br />
|{{msgError|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgWarning|Text der Meldung}}</pre><br />
|{{msgWarning|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgImportant|Text der Meldung}}</pre><br />
|{{msgImportant|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|}<br />
<br />
=Formatierung=<br />
==Textformatierung==<br />
Die wichtigsten Textformatierungen lauten:<br />
<br />
'''Fettschrift'''<br />
<pre>'''Fettschrift'''</pre><br />
''Schrägschrift''<br />
<pre>''Schrägschrift''</pre><br />
'''''Fett- und Schrägschrift'''''<br />
<pre>'''''Fett- und Schrägschrift'''''</pre><br />
==Auflistung==<br />
Standardauflistung<br />
<pre><br />
* foo<br />
* bar<br />
</pre><br />
ergibt<br />
* foo<br />
* bar<br />
Nummerierte Auflistung<br />
<pre><br />
# foo<br />
# bar<br />
</pre><br />
ergibt<br />
# foo<br />
# bar<br />
==Gruppierung==<br />
Es ist möglich, einen Artikel in verschiedenen Gruppen und Untergruppen zu gliedern, um bei langen Artikeln die Übersicht zu behalten.<br />
<pre><br />
=Hauptgruppe 1=<br />
Text<br />
==Untergruppe 1.1==<br />
Text<br />
==Untergruppe 1.2==<br />
Text<br />
=Hauptgruppe 2=<br />
Text<br />
==Untergruppe 2.1==<br />
Text<br />
==Untergruppe 2.2==<br />
usw<br />
</pre><br />
Bei mehr als 4 Gruppen wird automatisch ein Inhaltsverzeichnis am Anfang des Artikels angelegt.<br />
<br />
==Auszeichung von Quellcode==<br />
Um Text als Quellcode darzustellen, verwendet man das '''<nowiki><source></nowiki>'''-Tag (favorisierte Methode seit 27.08.2010).<br /><br />
Weiter Möglichkeiten sind:<br />
# man fügt eine Leerzeile ein und beginnt jede Zeile des zu formatierenden Textes mit einem Leerzeichen (space/blank).<br />
# man umgibt den zu formatierenden Text mit <nowiki><pre>.... text ...</pre></nowiki><br />
<br />
Bei der Formatierung von Quellcode mittels <nowiki><source></nowiki>-Tag kann man optional ein Sprachattribut mit angeben.<br />
<br />
Beispiel:<br />
<pre><br />
<source lang="css"><br />
div .classname {<br />
color: white;<br />
}<br />
</source><br />
</pre><br />
<br />
Das Ergebnis sieht dann so aus:<br />
<source lang="css"><br />
div .classname {<br />
color: white;<br />
}<br />
</source><br />
<br />
<br />
Die folgenden Sprachen sind per '''lang'''-Parameter verfügbar:<br />
{| border="0" cellpadding="0" cellspacing="20"<br />
|- valign="top"<br />
|<br />
* actionscript<br />
* ada<br />
* apache<br />
* applescript<br />
* asm<br />
* asp<br />
* autoit<br />
* bash<br />
* blitzbasic<br />
* bnf<br />
* c<br />
* caddcl<br />
* cadlisp<br />
* cfdg<br />
* cfm<br />
* cpp-qt<br />
* cpp<br />
* csharp<br />
* css-gen.cfg<br />
* css<br />
|<br />
* c_mac<br />
* d<br />
* delphi<br />
* diff<br />
* div<br />
* dos<br />
* eiffel<br />
* fortran<br />
* freebasic<br />
* gml<br />
* groovy<br />
* html4strict<br />
* idl<br />
* ini<br />
* inno<br />
* io<br />
* java<br />
* java5<br />
* javascript<br />
* latex<br />
|<br />
* lisp<br />
* lua<br />
* matlab<br />
* mirc<br />
* mpasm<br />
* mysql<br />
* nsis<br />
* objc<br />
* ocaml-brief<br />
* ocaml<br />
* oobas<br />
* oracle8<br />
* pascal<br />
* perl<br />
* php-brief<br />
* php<br />
* plsql<br />
* python<br />
* qbasic<br />
* reg<br />
|<br />
* robots<br />
* ruby<br />
* sas<br />
* scheme<br />
* sdlbasic<br />
* smalltalk<br />
* smarty<br />
* sql<br />
* tcl<br />
* text<br />
* thinbasic<br />
* tsql<br />
* vb<br />
* vbnet<br />
* vhdl<br />
* visualfoxpro<br />
* winbatch<br />
* xml<br />
* z80<br />
|}<br />
<br />
==Umlaute/Sonderzeichen==<br />
Will man Umlaute im Wiki als HTML-Entity (Ersatzdarstellung) darstellen (z.b. ä = &amp;auml;), sieht die Schreibweise beispielsweise so aus:<br />
<pre><br />
ä = &amp;amp;auml;<br />
</pre><br />
=Verlinkung=<br />
==Textlinks==<br />
Bei Textlinks unterscheidet man zwischen internen und externen Link.<br />
<br />
'''Interne Links''' (innerhalb des Contao Info Portals) werden wie folgt verlinkt:<br />
<pre>[[Seitenname|Beschreibung]]</pre><br />
''Beispiel:''<pre>[[Einsteiger|Anleitung für Einsteiger]]</pre><br />
ergibt folgenden Link: [[Einsteiger|Anleitung für Einsteiger]]<br />
<br />
'''Interne Links mit Anker''' (innerhalb des Contao Info Portals):<br />
<pre>[[Seitenname#Anker|Beschreibung]]</pre><br />
''Beispiel:''<pre>[[Einsteiger#Entstehungsgeschichte|Anleitung für Einsteiger]]</pre><br />
ergibt folgenden Link: [[Einsteiger#Entstehungsgeschichte|Anleitung für Einsteiger]]<br />
<br />
Für '''externe Links''' verwendet man:<br />
<pre>[http://www.example.com Beschreibung]</pre><br />
''Beispiel:''<pre>[http://www.contao.org Contao-Homepage]</pre><br />
ergibt folgenden Link: [http://www.contao.org Contao-Homepage]<br />
<br />
Eine Ausnahme hiervon bilden beispielsweise Links auf die Wikipedia. Solche legt man, um auf die englischsprachige Seite in der Wikipedia zu verlinken, folgendermaßen an:<br />
<pre>[[w:Seitenname|Beschreibung]]</pre><br />
Eine Seite in anderer Sprache, innerhalb der Wikipedia, erreicht man durch das zusätzliche anhängen des Sprachcodes. Am Beispiel Deutsch sieht dies dann so aus:<br />
<pre>[[w:de:Seitenname|Beschreibung]]</pre><br />
<br />
Diese Notation nennt sich Interwiki links, von denen einige bereits eingerichtet sind. Sollten welche fehlen, bitte einem Administrator Bescheid geben, damit er baldmöglichst eingebaut wird.<br />
<br />
==Bilderlinks==<br />
Bevor man auf ein Bild verlinkt, muss man das Bild [[Spezial:Hochladen|hochladen]].<br />
Um das Bild in einen Artikel einzubinden, verwendet man folgende Codes:<br />
<br />
Die einfachste Variante ist ein Bild mit Beschreibung.<br />
<pre>[[Datei:foo.jpg|Bechreibung]]</pre><br />
Des weiteren kann man Bilder auch auf andere Seiten verlinken.<br />
<br />
Interne Links:<br />
<pre>[[Datei:foo.jpg|link=Hauptseite|Beschreibung]]</pre><br />
Externe Links:<br />
<pre>[[Datei:foo.jpg|link=http://www.example.com|Beschreibung]]</pre><br />
<br />
----<br />
Bei Code- und Templatebeispielen TL-Version mit angeben!<br />
<br />
Eine ausführliche Zusammenfassung aller Formatierungsmöglichkeiten findet man auf der [http://www.mediawiki.org/wiki/Help:Contents MediaWiki Homepage]<br />
<br />
=Übersetzungen des Contaowiki=<br />
<br />
Das Contaowiki-Projekt umfasst derzeit drei Sprachen. Deutsch (http://de.contaowiki.org), Englisch (http://en.contaowiki.org) und Französisch (http://fr.contaowiki.org).<br />
In einem Artikel sieht man links unten im Menü unter "Sprachen" in welche anderen Sprachen der Artikel bereits übersetzt wurde. Sollte eine Sprache fehlen und man sich selbst der jeweiligen Sprache ausreichend mächtig fühlen, sollte man nun daran gehen den Artikel in die fehlende Sprache zu übersetzen.<br />
Zur genauen Vorgehensweise hier eine kleine Anleitung:<br />
==Titelfindung==<br />
Vorab sollte überlegt werden, wie der Artikel in der anderen Sprache heißen könnte. Nimmt man als Beispiel hier den fiktiven Artikel "Beispiel" (das Wort "Beispiel" heißt übersetzt in englischen "Example"), so sollte der auf en.contaowiki.org erstellende Artikel somit heißen: <nowiki>http://en.contaowiki.org/Example</nowiki>.<br />
==Text übersetzen==<br />
Nun geht es daran, den Text zu übersetzen. Man sollte daran denken, dass die im Ursprungsartikel verlinkten weiteren Artikel in der neuen Sprache vermutlich einen anderen Namen haben werden. Diese Artikel sollte man dann suchen und, sofern noch nicht existent, unter neuem Namen ebenfalls verlinken. Dies erzeugt einen roten Link und fungiert somit als Platzhalter für den Artikel, welcher dann in der Liste der [[Spezial:Gewünschte_Seiten|gewünschten Seiten]] auftaucht. Wenn man möchte, kann man die jeweiligen Artikel dann logischerweise auch gleich im Anschluss ebenfalls übersetzen.<br />
==Verlinkungen zwischen den Sprachen setzen==<br />
Abschließend muss den Wikis noch mitgeteilt werden, unter welchem Namen die Übersetzung in der anderen Sprache zu erreichen ist.<br />
Hierzu verwendet man die Interwiki-Notation, wie bei Wikipedia und ähnlichen Projekten.<br />
<br />
Im deutschen Wiki schreibt man auf der Seite "Beispiel":<br />
<br />
<nowiki>[[en:Example]]</nowiki><br />
und im englischen auf der Seite "Example":<br />
<br />
<nowiki>[[de:Beispiel]]</nowiki></div>Manitougshttps://de.contaowiki.org/Hilfe:InhaltsverzeichnisHilfe:Inhaltsverzeichnis2011-07-11T19:14:35Z<p>Manitougs: /* Textlinks */ Link zur besseren Veranschaulichung geändert</p>
<hr />
<div>[[en:Help:Contents]]<br />
=Verfassen von Artikeln=<br />
Vor dem Verfassen eines neuen Artikels sollte kontrolliert werden, ob schon ein Artikel zum gleichen Thema existiert. Dies kann über die Suchfunktion oder über die [[Spezial:Alle_Seiten|Auflistung aller existierender Seiten]] geprüft werden. Vor dem Abspeichern eines Artikels sollte man den Artikel mit der Vorschau-Funktion auf event. Rechtschreibfehler o.ä. prüfen.<br />
==Einen neuen Artikel anlegen==<br />
Sollte die Suche zu keinem Ergebnis führen, legt man die Seite neu an.<br />
Hierzu gibt man beispielsweise den gewünschten Titel links in der Sidebar in das Suchfeld ein und klickt anschließend auf den Button "Seite".<br />
Die Wiki-Software meldet nun, dass die Seite nicht existiert und man möge sie doch bitte verfassen.<br />
<br />
Nach einem Klick auf den Link '''die Seite verfassen''' gelangt man in die Eingabemaske.<br />
<br />
Ungeduldige können auch direkt die URL: <nowiki>http://de.contaowiki.org/Wunschtitel</nowiki> in ihrem Browser eingeben, wodurch man direkt in die Eingabemaske gelangt.<br />
<br />
'''Artikel sollten neutral und allgemein verfasst werden''' (als Beispiel nicht "''Ich betrachte die Seite''" oder "''Du betrachtest die Seite''", sondern "''Man betrachtet die Seite''"), um eine Vereinheitlichung der Artikel zu gewährleisten.<br />
<br />
==Wichtig: Angabe der Contao-Version==<br />
Da sich Contao ständig weiter entwickelt, ändert sich auch laufend der Quellcode. '''Daher ist es beim Verfassen von Artikeln wichtig, immer mit anzugeben, auf welche Contao-Version sich der Artikel oder das Codebeispiel bezieht.''' Ein Besucher kann ansonsten in einem Jahr nicht mehr nachvollziehen, auf welche Contao-Version(en) sich ein HowTo für z.B. ein modifiziertes Template bezieht. Durch die Angabe der Version ist er jedoch in der Lage, Änderungen an dem entsprechenden Template nachzuvollziehen und es bei Bedarf dementsprechend anzupassen.<br />
Eine Versionsangabe erfolgt durch ff. Code zu Beginn der Seite:<br />
<pre>{{AppliesTo<br />
|Version=Alle Versionen<br />
|Ext1=SuperExtension<br />
|Ext2=HyperExtension}}</pre><br />
Hierbei können folgende Parameter verwendet werden:<br />
* Version - Die Contao Version auf die sich der Artikel bezieht.<br />
* Ext1 ... ExtN - Die Extensions die der Artikel betrifft. Die Zahl beginnt jeweils bei 1 und wird für jede weitere Extension um eins hochgezählt.<br />
* TLVersion - Da einige Artikel neben Contao auch noch TYPOlight (pre Contao 2.9) betreffen, kann man so auch noch angeben, dass ein Artikel ggf. noch TYPOlight betrifft. Diese Angaben werden jedoch mit der Zeit verschwinden.<br />
<br />
Dieser Code wird dann am Anfang der Seite wie auf folgender [[ModuleCatalogList|Beispielseite]] dargestellt.<br />
<br />
==Kategorisierung==<br />
Ein Artikel kann in einer oder mehreren [[Spezial:Kategorien| Kategorien]] abgelegt werden. Für jede Kategorie muss eine neue Zeile zu Beginn der Seite gemacht werden.<br />
<pre><br />
[[Category:Admin HOWTOS]]<br />
[[Category:Module]]<br />
</pre><br />
Um einen in Arbeit oder unvollständigen Artikel als solchen zu kennzeichnen, wird der Eintrag<br />
<pre>{{stub}}</pre><br />
an oberster Stelle, noch vor den Kategorien, eingefügt. Einem unvollständigen Artikel erkennnt man beim Betrachten am Hinweis:<br />
<br />
[[Datei:Stub-warning.png|Unvollständiger Artikel]]<br />
<br />
Des weiteren ist der Artikel in der Liste der unvollständigen Artikel aufgeführt.<br />
<br />
=Hinweise, Anmerkungen und Warnungen=<br />
In einem Artikel kann man Hinweise und Warnungen hinterlegen.<br />
Diese fügt man durch die Verwendung der jeweiligen Vorlage hinzu.<br />
==Hinweise==<br />
<pre><br />
{{Hinweis|Text des Hinweises}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Hinweis|Text des Hinweises}}<br />
<br />
==Anmerkungen==<br />
<pre><br />
{{Anmerkung|Text der Anmerkung}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Anmerkung|Text der Anmerkung}}<br />
<br />
==Warnungen==<br />
<pre><br />
{{Achtung|Text der Warnung}}<br />
</pre><br />
Was folgendes Ergebnis erzeugt.<br />
{{Achtung|Text der Warnung}}<br />
<br />
<br />
== Meldungen mit Bild links oben und farbigem Text ==<br />
Ich habe mir erlaubt, einige eingefärbte Meldungsboxen hinzuzufügen, bei denen die Bilder links oben sitzen (was ich bei längeren Texten ganz angenehm finde). Die Icons sind aus dem frei verfügbaren Oxygen Theme von David Vignoni. --[[Benutzer:Hschottm|Hschottm]] 16:11, 11. Sep. 2010 (CEST)<br />
<br />
{|<br />
!Befehl<br />
!Ausgabe<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgInfo|Text der Meldung}}</pre><br />
|{{msgInfo|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgSuccess|Text der Meldung}}</pre><br />
|{{msgSuccess|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgError|Text der Meldung}}</pre><br />
|{{msgError|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgWarning|Text der Meldung}}</pre><br />
|{{msgWarning|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|- style="vertical-align:top;"<br />
| <pre>{{msgImportant|Text der Meldung}}</pre><br />
|{{msgImportant|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis odio ac magna ornare porttitor. Aliquam erat volutpat. Morbi vitae dignissim diam. Vestibulum ultrices vehicula posuere. Fusce nec ante tortor, quis euismod dolor. Proin quis porttitor odio. Nam lacinia, nunc sed venenatis pretium, augue risus lobortis lacus, vitae porttitor leo lorem sit amet lectus. Vivamus eu fermentum felis. Cras dictum consequat fringilla.}}<br />
|}<br />
<br />
=Formatierung=<br />
==Textformatierung==<br />
Die wichtigsten Textformatierungen lauten:<br />
<br />
'''Fettschrift'''<br />
<pre>'''Fettschrift'''</pre><br />
''Schrägschrift''<br />
<pre>''Schrägschrift''</pre><br />
'''''Fett- und Schrägschrift'''''<br />
<pre>'''''Fett- und Schrägschrift'''''</pre><br />
==Auflistung==<br />
Standardauflistung<br />
<pre><br />
* foo<br />
* bar<br />
</pre><br />
ergibt<br />
* foo<br />
* bar<br />
Nummerierte Auflistung<br />
<pre><br />
# foo<br />
# bar<br />
</pre><br />
ergibt<br />
# foo<br />
# bar<br />
==Gruppierung==<br />
Es ist möglich, einen Artikel in verschiedenen Gruppen und Untergruppen zu gliedern, um bei langen Artikeln die Übersicht zu behalten.<br />
<pre><br />
=Hauptgruppe 1=<br />
Text<br />
==Untergruppe 1.1==<br />
Text<br />
==Untergruppe 1.2==<br />
Text<br />
=Hauptgruppe 2=<br />
Text<br />
==Untergruppe 2.1==<br />
Text<br />
==Untergruppe 2.2==<br />
usw<br />
</pre><br />
Bei mehr als 4 Gruppen wird automatisch ein Inhaltsverzeichnis am Anfang des Artikels angelegt.<br />
<br />
==Auszeichung von Quellcode==<br />
Um Text als Quellcode darzustellen, verwendet man das '''<nowiki><source></nowiki>'''-Tag (favorisierte Methode seit 27.08.2010).<br /><br />
Weiter Möglichkeiten sind:<br />
# man fügt eine Leerzeile ein und beginnt jede Zeile des zu formatierenden Textes mit einem Leerzeichen (space/blank).<br />
# man umgibt den zu formatierenden Text mit <nowiki><pre>.... text ...</pre></nowiki><br />
<br />
Bei der Formatierung von Quellcode mittels <nowiki><source></nowiki>-Tag kann man optional ein Sprachattribut mit angeben.<br />
<br />
Beispiel:<br />
<pre><br />
<source lang="css"><br />
div .classname {<br />
color: white;<br />
}<br />
</source><br />
</pre><br />
<br />
Das Ergebnis sieht dann so aus:<br />
<source lang="css"><br />
div .classname {<br />
color: white;<br />
}<br />
</source><br />
<br />
<br />
Die folgenden Sprachen sind per '''lang'''-Parameter verfügbar:<br />
{| border="0" cellpadding="0" cellspacing="20"<br />
|- valign="top"<br />
|<br />
* actionscript<br />
* ada<br />
* apache<br />
* applescript<br />
* asm<br />
* asp<br />
* autoit<br />
* bash<br />
* blitzbasic<br />
* bnf<br />
* c<br />
* caddcl<br />
* cadlisp<br />
* cfdg<br />
* cfm<br />
* cpp-qt<br />
* cpp<br />
* csharp<br />
* css-gen.cfg<br />
* css<br />
|<br />
* c_mac<br />
* d<br />
* delphi<br />
* diff<br />
* div<br />
* dos<br />
* eiffel<br />
* fortran<br />
* freebasic<br />
* gml<br />
* groovy<br />
* html4strict<br />
* idl<br />
* ini<br />
* inno<br />
* io<br />
* java<br />
* java5<br />
* javascript<br />
* latex<br />
|<br />
* lisp<br />
* lua<br />
* matlab<br />
* mirc<br />
* mpasm<br />
* mysql<br />
* nsis<br />
* objc<br />
* ocaml-brief<br />
* ocaml<br />
* oobas<br />
* oracle8<br />
* pascal<br />
* perl<br />
* php-brief<br />
* php<br />
* plsql<br />
* python<br />
* qbasic<br />
* reg<br />
|<br />
* robots<br />
* ruby<br />
* sas<br />
* scheme<br />
* sdlbasic<br />
* smalltalk<br />
* smarty<br />
* sql<br />
* tcl<br />
* text<br />
* thinbasic<br />
* tsql<br />
* vb<br />
* vbnet<br />
* vhdl<br />
* visualfoxpro<br />
* winbatch<br />
* xml<br />
* z80<br />
|}<br />
<br />
==Umlaute/Sonderzeichen==<br />
Will man Umlaute im Wiki als HTML-Entity (Ersatzdarstellung) darstellen (z.b. ä = &amp;auml;), sieht die Schreibweise beispielsweise so aus:<br />
<pre><br />
ä = &amp;amp;auml;<br />
</pre><br />
=Verlinkung=<br />
==Textlinks==<br />
Bei Textlinks unterscheidet man zwischen internen und externen Link.<br />
<br />
Interne Links (innerhalb des Contao Info Portals) werden wie folgt verlinkt:<br />
<pre>[[Seitenname|Beschreibung]]</pre><br />
'''Bsp:''' [[Hauptseite|Hauptseite des Wikis]]<br />
<br />
Für externe Links verwendet man:<br />
<pre>[http://www.example.com Beschreibung]</pre><br />
'''Bsp:''' [http://www.contao.org Contao-Homepage]<br />
<br />
Eine Ausnahme hiervon bilden beispielsweise Links auf die Wikipedia. Solche legt man, um auf die englischsprachige Seite in der Wikipedia zu verlinken, folgendermaßen an:<br />
<pre>[[w:Seitenname|Beschreibung]]</pre><br />
Eine Seite in anderer Sprache, innerhalb der Wikipedia, erreicht man durch das zusätzliche anhängen des Sprachcodes. Am Beispiel Deutsch sieht dies dann so aus:<br />
<pre>[[w:de:Seitenname|Beschreibung]]</pre><br />
<br />
Diese Notation nennt sich Interwiki links, von denen einige bereits eingerichtet sind. Sollten welche fehlen, bitte einem Administrator Bescheid geben, damit er baldmöglichst eingebaut wird.<br />
<br />
==Bilderlinks==<br />
Bevor man auf ein Bild verlinkt, muss man das Bild [[Spezial:Hochladen|hochladen]].<br />
Um das Bild in einen Artikel einzubinden, verwendet man folgende Codes:<br />
<br />
Die einfachste Variante ist ein Bild mit Beschreibung.<br />
<pre>[[Datei:foo.jpg|Bechreibung]]</pre><br />
Des weiteren kann man Bilder auch auf andere Seiten verlinken.<br />
<br />
Interne Links:<br />
<pre>[[Datei:foo.jpg|link=Hauptseite|Beschreibung]]</pre><br />
Externe Links:<br />
<pre>[[Datei:foo.jpg|link=http://www.example.com|Beschreibung]]</pre><br />
<br />
----<br />
Bei Code- und Templatebeispielen TL-Version mit angeben!<br />
<br />
Eine ausführliche Zusammenfassung aller Formatierungsmöglichkeiten findet man auf der [http://www.mediawiki.org/wiki/Help:Contents MediaWiki Homepage]<br />
<br />
=Übersetzungen des Contaowiki=<br />
<br />
Das Contaowiki-Projekt umfasst derzeit drei Sprachen. Deutsch (http://de.contaowiki.org), Englisch (http://en.contaowiki.org) und Französisch (http://fr.contaowiki.org).<br />
In einem Artikel sieht man links unten im Menü unter "Sprachen" in welche anderen Sprachen der Artikel bereits übersetzt wurde. Sollte eine Sprache fehlen und man sich selbst der jeweiligen Sprache ausreichend mächtig fühlen, sollte man nun daran gehen den Artikel in die fehlende Sprache zu übersetzen.<br />
Zur genauen Vorgehensweise hier eine kleine Anleitung:<br />
==Titelfindung==<br />
Vorab sollte überlegt werden, wie der Artikel in der anderen Sprache heißen könnte. Nimmt man als Beispiel hier den fiktiven Artikel "Beispiel" (das Wort "Beispiel" heißt übersetzt in englischen "Example"), so sollte der auf en.contaowiki.org erstellende Artikel somit heißen: <nowiki>http://en.contaowiki.org/Example</nowiki>.<br />
==Text übersetzen==<br />
Nun geht es daran, den Text zu übersetzen. Man sollte daran denken, dass die im Ursprungsartikel verlinkten weiteren Artikel in der neuen Sprache vermutlich einen anderen Namen haben werden. Diese Artikel sollte man dann suchen und, sofern noch nicht existent, unter neuem Namen ebenfalls verlinken. Dies erzeugt einen roten Link und fungiert somit als Platzhalter für den Artikel, welcher dann in der Liste der [[Spezial:Gewünschte_Seiten|gewünschten Seiten]] auftaucht. Wenn man möchte, kann man die jeweiligen Artikel dann logischerweise auch gleich im Anschluss ebenfalls übersetzen.<br />
==Verlinkungen zwischen den Sprachen setzen==<br />
Abschließend muss den Wikis noch mitgeteilt werden, unter welchem Namen die Übersetzung in der anderen Sprache zu erreichen ist.<br />
Hierzu verwendet man die Interwiki-Notation, wie bei Wikipedia und ähnlichen Projekten.<br />
<br />
Im deutschen Wiki schreibt man auf der Seite "Beispiel":<br />
<br />
<nowiki>[[en:Example]]</nowiki><br />
und im englischen auf der Seite "Example":<br />
<br />
<nowiki>[[de:Beispiel]]</nowiki></div>Manitougshttps://de.contaowiki.org/Dma_elementgeneratorDma elementgenerator2011-07-11T19:08:35Z<p>Manitougs: /* Bildergalerie darstellen */ Typo</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
<br />
{{ExtInfo<br />
| Dev=Carsten Kollmeier<br />
| DevSite=http://www.ckollmeier.de/<br />
| ExtVersion=0.0.1 beta2<br />
| Version=ab 2.9<br />
| TLVersion=2.7.6 - 2.8.3<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/dma_elementgenerator.14.de.html<br />
| Forum=http://www.contao-community.de/showthread.php?6119-dma_elementgenerator-Contentelemente-und-Frontendmodule-generieren<br />
}}<br />
<br />
<br />
Der Elementgenerator bietet eine Möglichkeit, Daten in einem vorgegebenem Layout auszugeben.<br />
<br />
= Beispiel / Tutorial =<br />
== Element erstellen ==<br />
Nach der erfolgreichen Installation wählt man zunächst den neuen Menüpunkt "Elementgenerator" unterhalb von Layout.<br />
<br /><br />
An dieser Stelle lassen sich Elemente erstellen, die völlig unabhängig voneinander strukturierte Inhalte ausgeben. Man klickt also auf die Schaltfläche "Neues Element" und füllt die Maske wie folgt aus:<br />
<br /><br />
Bezeichnung = Buch<br /><br />
Kategorie = Layouts<br /><br />
Template = dma_eg_default (temporär)<br /><br />
''Als Inhaltselement bereitstellen'' auswählen<br /><br />
<br /><br />
Die Bezeichnung dient nur der internen Verwaltung im Backend. Auch der Name der Kategorie ist frei wählbar und ordnet die Datensätze mit gleicher Bezeichnung innerhalb der Auswahl des Elementtyps im Bereich der Inhaltselemente. Das Template lässt man vorübergehend so, bis man später ein eigenes Template für den Datensatz erstellt.<br />
<br /><br />
Der Datensatz lässt sich selbstverständlich auch als Modul bereitstellen. Somit kann man diesen beispielsweise auch direkt im Seitenlayout verlinken.<br /><br />
<br />
== Felder hinzufügen ==<br />
Nun legt man die Felder an, die man ausgeben möchte. Die Auswahl ähnelt der von Formularen: Legende, Textfeld, Textarea, Auswahlliste, Checkboxen, Radiobuttons, Seitenauswahl, Dateiauswahl<br /><br />
Als nächstes legt man ein Textfeld an und füllt es folgendermaßen aus:<br />
<br /><br />
Textfeld:<br /><br />
Beschriftung = Titel<br /><br />
Feldname = titel<br /><br />
Beschreibung = Bitte vergeben Sie für das Buch einen Titel<br /><br />
<br />
Textfeld:<br /><br />
Beschriftung = Autor<br /><br />
Feldname = autor<br /><br />
Beschreibung = Bitte vergeben Sie für das Buch einen Autor<br /><br />
<br />
Textfeld:<br /><br />
Beschriftung = Verlag<br /><br />
Feldname = verlag<br /><br />
Beschreibung = Bitte vergeben Sie für das Buch einen Verlag<br /><br />
<br />
Textfeld:<br /><br />
Beschriftung = Alter<br /><br />
Feldname = alter<br /><br />
Beschreibung = Bitte nennen Sie, für welches Alter das Buch geeignet ist<br /><br />
<br />
Textfeld:<br /><br />
Beschriftung = Form<br /><br />
Feldname = form<br /><br />
Beschreibung = Bitte nennen Sie, welche Form das Buch aufweist<br /><br />
<br />
Textarea:<br /><br />
Beschriftung = Beschreibung<br /><br />
Feldname = beschreibung<br /><br />
Beschreibung = Bitte beschreiben Sie das Buch<br /><br />
Zeilen = 5<br /><br />
Spalten = 100<br /><br />
<br />
Dateiauswahl:<br /><br />
Beschriftung = Bild<br /><br />
Feldname = bild<br /><br />
Beschreibung = Wählen Sie ein Bild aus<br /><br />
Vorgabe = (hier könnte man ein Default-Bild angeben)<br /><br />
Art der Auswahl = ft_radio<br /><br />
Pfad = Pfad/zum/Bild.jpg<br /><br />
<br />
== Template anlegen ==<br />
Nun liegt ein Datensatz vor mit drei Feldern, die man in einem Template abfragen möchte. Unter Layout/Templates leget man ein neues Template auf Basis des Originaltemplates "dma_eg_default.tpl" und weist diesem das jeweilige Zielverzeichnis zu. Nach dem Speichern kann über "bearbeiten" der Name geändert werden (z.B. in dma_eg_buchvorstellung.tpl) und natürlich muss man dieses neue Template unter "Elementgenerator/Buch" gegen das Standardtemplate ersetzen.<br />
<br /><br />
<source lang="php"><br />
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><br />
<?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>><br />
<br />
<br />
<br />
<br />
<h1><?php echo $this->elements['titel']; ?></h1><br />
<br />
<br />
<div class="left"><br />
<table><br />
<tbody><br />
<tr><td class="first"><?php if ($this->elements['titel']): ?><?php echo $this->labels['titel']; ?>:</td><td class="last"><?php echo $this->elements['titel']; ?><?php endif; ?></td></tr><br />
<tr><td class="first"><?php if ($this->elements['autor']): ?><?php echo $this->labels['autor']; ?>:</td><td class="last"><?php echo $this->elements['autor']; ?><?php endif; ?></td></tr><br />
<tr><td class="first"><?php if ($this->elements['verlag']): ?><?php echo $this->labels['verlag']; ?>:</td><td class="last"><?php echo $this->elements['verlag']; ?><?php endif; ?></td></tr><br />
<tr><td class="first"><?php if ($this->elements['alter']): ?><?php echo $this->labels['alter']; ?>:</td><td class="last"><?php echo $this->elements['alter']; ?><?php endif; ?></td></tr><br />
<tr><td class="first"><?php if ($this->elements['form']): ?><?php echo $this->labels['form']; ?>:</td><td class="last"><?php echo $this->elements['form']; ?><?php endif; ?></td></tr><br />
</tbody><br />
</table><br />
</div><br />
<br />
<?php if ($this->elements['bild']): ?><br />
<div class="right"><br />
<!-- teaserstart --><div class="image_container"><br />
<img src="<?php echo $this->elements['bild']; ?>" alt="<?php echo $this->elements['name']; ?>" width="150" /><br />
<br />
<div class="caption"><?php if ($this->elements['titel']): ?><?php echo $this->elements['titel']; ?><?php endif; ?></div><br />
</div><!-- teaserend --></div></div><br />
<?php endif; ?><br />
<br />
<div class="twocol"><!-- teaserstart --> <?php if ($this->elements['beschreibung']): ?><?php echo nl2br($this->elements['beschreibung']); ?><?php endif; ?><!-- teaserend --></div><br />
</div><br />
<br />
<br />
</source><br />
<br /><br />
In dem Template wird das Bild in einer Breite von 150 Pixel ausgegeben, die Bildunterschrift gibt den Titel wieder.<br />
<br /><br />
<br />
== Buch als Inhaltselement integrieren ==<br />
<br />
In der Artikelstruktur lässt sich nun dieses Inhaltelement "Buch" wie jeder andere Elementtyp dem Artikel hinzufügen. Wählt man diese nun aus, findet man die drei Felder vor, die nun auszufüllen sind und kann den Datensatz nun Speichern und betrachten. <br />
<br />
== Bildergalerie darstellen ==<br />
<br />
Hier ein Codeschnipsel, wie man im Template auf die Bilddaten im Falle einer Galerie zugreift:<br />
<br />
<source lang="php"><br />
<?php foreach(deserialize($this->elements['gallery'], true) as $bild): ?><br />
<img src="<?php echo $bild; ?>" /><br />
<?php endforeach; ?> <br />
</source> <br />
<br />
Hierzu muss das serialisierte Array zunächst deserialisiert werden und kann dann über eine foreach Schleife schließlich ausgegeben werden. Das Beispiel ist absichtlich sehr einfach gehalten.<br />
<br />
----<br />
--[[Benutzer:Carino|Carino]] 21:00, 07. Sept. 2010 (UTC)</div>Manitougshttps://de.contaowiki.org/Backboneit_navigationBackboneit navigation2011-07-11T18:56:33Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Extensions]]<br />
{{ExtInfo<br />
| Dev=Oliver Hoff<br />
| DevSite=http://www.hofff.com/<br />
| ExtVersion=1.0.0<br />
| Version=ab 2.9<br />
| TLVersion=2.7.0 - 2.8.4<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/backboneit_navigation.10000009.de.html<br />
}}<br />
<br />
= backboneit_navigation =<br />
<br />
Erweiterung bestehend aus einer Sammlung von Navigationselementen (vorerst nur ein erweitertes Navigationsmodul).<br />
<br />
Anmerkungen zum Bestimmen der Sichtbarkeit einer Seite:<br />
* Der Veröffentlichungsstatus gilt ausschließlich für eine Seite selbst. Das heißt zum Beispiel, dass eine Navigation durchaus dargestellt wird, selbst wenn die Referenzseite nicht veröffentlicht ist.<br />
* Der Seitenschutz für bestimmte Mitgliedergruppen vererbt sich auf alle Unterseiten, außer denjenigen die selbst explizit einen Seitenschutz für Mitgliedergruppen definieren und deren Unterseiten.<br />
* Die Einstellung "Nur Gästen anzeigen" gilt nur für die Seite selbst. Tatsächlich ist die Seite für angemeldete Benutzer auch noch verfügbar, soll nur in keiner Navigation angezeigt werden. (Anders als zum Beispiel Artikel, die nur Gästen angezeigt werden. Diese werden gar nicht mehr gerendert.)<br />
* "Im Menü verstecken" gilt nur für die Seite selbst.<br />
<br />
== Navigationsmenü ==<br />
<br />
Ein Multitalent: Es ist alles möglich was mit einem Navigationsmenü oder einer Individuellen Navigation möglich ist, Kombinationen aus beiden und noch einiges mehr. Einfach ausprobieren.<br />
<br />
Funktionen:<br />
* Kompatibel zu den Templates für das Standard-Navigationsmenü (einziger Unterschied ist, das Seiten die CSS-Klasse "submenu" tatsächlich auch nur dann bekommen, wenn dieses Untermenü gerendert wird)<br />
* Mehrere Referenzseiten (Wurzeln der Navigation)<br />
* Aktuelle Seite als Referenzseite<br />
* Startebene wird relativ zu den Referenzseiten berechnet (negative Startebene möglich)<br />
* Hardlimit flexibel (Anmerkung: Stopebene und Hardlimit beziehen sich relativ zur Startebene &endash; diessollte auch durch die geänderten Labels der Moduleinstellungen hervorgehen.<br />
* Versteckte und geschützte Seiten anzeigen<br />
* Als Sitemap verwendbar<br />
* Optimierte Algorithmen: Zum Beispiel wird pro Navigationsebene nur noch eine Datenbankabfrage durchgeführt, was vorallem bei einer sehr verzweigten Navigation Vorteile bringen sollte.<br />
* Erweiterbar per Hook<br />
<br />
=== Navigation per Hook erweitern ===<br />
config.php<br />
<source><br />
$GLOBALS['TL_HOOKS']['backboneit_navigation_menu'][] = array('MyNavigationHook', 'hook');<br />
</source><br />
<br />
MyNavigationHook.php<br />
<source><br />
class MyNavigationHook {<br />
<br />
// ... singleton dummy code ...<br />
<br />
public function hook($objThis, $arrRoots) {<br />
$intParentID = 1; // the ID of the parent node, were your new node should be appended/inserted to.<br />
<br />
if(!isset($objThis->arrItems[$intParentID])) // test if the parent should be rendered (to avoid my hook, if it is not needed)<br />
return;<br />
<br />
$strMyNewNodeID = 'MyNavigationHook' . 1; // to avoid collision do not use plain numbers (reservered for tl_page dataset IDs)<br />
// and prefix the ID with something specific to your hook<br />
<br />
$objThis->varActiveID = $strMyNewNodeID; // set my new node as active navigation item<br />
<br />
$objThis->arrSubpages[$intParentID][] = $strMyNewNodeID; // append the my new node to the end of $intParentIDs childs<br />
$arrRoots[] = $strMyNewNodeID; // additionally add my new node to the end of the first level<br />
<br />
$objThis->arrItems[$strMyNewNodeID] = array(<br />
'class' => 'myclass',<br />
'isTrail' => true, // whether this node is in the trail path of the active page<br />
// ... more rendering information for the navigation template (see class AbstractNavigationMenu for all fields) ...<br />
);<br />
<br />
return $arrRoots; // return the modified first navigation level (not needed if unmodified)<br />
}<br />
<br />
}<br />
</source></div>Manitougshttps://de.contaowiki.org/ValumsFileUploaderValumsFileUploader2011-07-11T18:48:34Z<p>Manitougs: Kategorie "Sonstiges" entfernt</p>
<hr />
<div>[[Category:Extensions]]<br />
'''valumsFileUploader''' ist ein Mehrfachuploader und bietet eine flashfreie Alternative zu FancyUpload im Backend und Frontend. Dateien können des weiteren via Drag&Drop hochgeladen werden.<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=2.0.0<br />
| Version=2.9.0 - 2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/valumsFileUploader.html<br />
| TrackerLink=http://contao-forge.de/projects/valumsfileuploader/issues<br />
}}<br />
<br />
==valumsFileUploader==<br />
<br />
Der Uploader dient als flashfreie Alternative zu FancyUpload und bietet die Möglichkeit Dateien via Drag&Drop oder Auswahlmenü auf den Server zu laden. <br />
<br />
==Verwendung im Backend==<br />
<br />
===Konfiguration===<br />
<br />
Aktiviert werden muss der valumsFileUploader nach der Installation bei jedem Benutzer in den Persönlichen Daten. Sobald der neue Uploader aktiviert wurde, stehen 2 weitere Optionen zur Verfügung: "Dateien überschreiben" und "Bilder skalieren". Ab der Version 2.10 ist es möglich die maximale Bildbreite und maximale Bildhöhe zu berücksichtigen, in diesem Fall werden die Bilder auf die eingestellten Werte skaliert. Nach Vollendung der Konfiguration steht dem Benutzer beim Dateiupload der neue Uploader zur Verfügung.<br />
<br />
===Upload===<br />
<br />
valumsFileUploader begrenzt keinen Upload und kann auch für sehr große Dateien genutzt werden. In diesem Fall sollte der Server auf dem die Contao Installation liegt dafür ausgestattet sein und große Dateiuploads erlauben. Dateien können mit Hilfe des "Durchsuchen" Buttons hochgeladen werden oder man zieht alle Dateien via Drag&Drop in die Schaltfläche. <br />
<br />
Die Dateien werden umgehend hochgeladen, ein Absenden des Formulars ist nicht notwendig.<br />
<br />
==Verwendung im Frontend==<br />
<br />
==Konfiguration==<br />
<br />
Um in Frontend-Formularen ein Uploadfeld vom Typ "valumsFileUploader" verwenden zu können, legt man im Formulargenerator ein neues Feld an. Beim Feldtyp wählt man "valumsFileUploader". Im nächsten Schritt gibt man die "erlaubten Dateitypen" und die "maximale Dateigröße" an. Möchte man die hochgeladenen Dateien desweiteren auch in einem bestimmten Ordner auf dem Server speichern, wählt man die Option "Hochgeladene Dateien speichern" aus. Nun muss man nur noch den Ordner für den Upload auswählen.<br />
<br />
==Mögliche Problemfälle==<br />
<br />
Der Uploader ohne korrekt ausgeführte Schreibrechte auf dem Server keine Dateien hochladen. Ein SMH ist daher zurzeit keine Lösung. An einer Änderung dieses Verhaltens wird gearbeitet.</div>Manitougshttps://de.contaowiki.org/Css_ABC_in_ContaoCss ABC in Contao2011-07-07T22:18:02Z<p>Manitougs: stub added</p>
<hr />
<div>{{stub}}[[en:Css_ABC_for_Contao]]<br />
[[Category: Erste_Schritte]]<br />
{{AppliesTo|Version=ab 2.9}}<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt die einem das Leben mit CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen mit sinvollem zu ergänzen.<br />
<br />
=Voraussetzung=<br />
<br />
*Contao Installation (Lokale Testumgebungen: '''Contao2Go''':[[Contao2Go|USB-Stick oder Festplatte]] '''XAMPP''': [[Xampp_Multidomain|lokale Entwicklungsumgebung mit XAMPP]] ).<br />
*HTML und CSS Kenntnisse<br />
<br />
=Hilfsmittel=<br />
==Add On's==<br />
Tools zum anzeigen CSS spezifischer daten. Nach Browser sortiert (liste unvollständig)<br />
<br />
*Chrome:<br />
**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str & Shift & I).<br />
**[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer] <br />
<br />
*Firefox:<br />
**[http://getfirebug.com/ Firebug]<br />
**[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web-Developer]<br />
<br />
==Wireframes==<br />
Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, bis wo sie eigentlich gehen. Dazu kann mann das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn mann dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann mann verfolgen, welche Abmessungen sich wie ändern.<br />
<source lang="css"><br />
/* Style sheet wireframes */<br />
#wrapper{background-color:#FFFFC0;}<br />
#header{background-color:#D7E9D6;}<br />
#header .inside{background-color:#E9F3E9;}<br />
#container{background-color:#EAFCF3;}<br />
#left{background-color:#D7DCE7;}<br />
#left .inside{background-color:#E9ECF2;}<br />
#main{background-color:#E9E7D6;}<br />
#main .inside{background-color:#F3F2E9;}<br />
#right{background-color:#D7DCE7;}<br />
#right .inside{background-color:#E9ECF2;}<br />
#footer{background-color:#D7E9D6;}<br />
#footer .inside{background-color:#E9F3E9;}<br />
</source><br />
<br />
==CSS Klassen/Selektoren (aus Music Accademy)==<br />
<br />
<source lang="css"><br />
/** Layout **/<br />
body<br />
#left<br />
#top_image<br />
<br />
<br />
/** Article **/<br />
.ce_text,<br />
.teaser<br />
div.error,<br />
p.error<br />
.mod_article .back<br />
.mod_article .more<br />
<br />
/** Breadcrumb **/<br />
.mod_breadcrumb<br />
<br />
/** Gallery **/<br />
.ce_gallery .caption<br />
<br />
<br />
/** Article **/<br />
.mod_article .pdf_link<br />
.mod_article .pdf_link a<br />
<br />
<br />
/** Lost password **/<br />
.mod_lostPassword<br />
.mod_lostPassword td<br />
.mod_lostPassword .text,<br />
.mod_lostPassword .password<br />
.mod_lostPassword .captcha<br />
.mod_lostPassword .captcha_text<br />
<br />
/** Listing **/<br />
.ce_list ul<br />
.ce_list li<br />
<br />
/** Navigation **/<br />
.mod_navigation<br />
.mod_navigation ul<br />
.mod_navigation li<br />
.mod_navigation .level_2<br />
.mod_navigation .level_2 li<br />
.mod_navigation a,<br />
.mod_navigation li,<br />
.mod_navigation span<br />
.mod_navigation .level_2 a,<br />
.mod_navigation .level_2 li,<br />
.mod_navigation .level_2 span<br />
<br />
/** Accordion **/<br />
.ce_accordion<br />
.toggler<br />
.toggler_first<br />
.toggler_first:hover<br />
.accordion div<br />
<br />
/** Login form **/<br />
.mod_login<br />
.mod_login label<br />
.mod_login .checkbox_container<br />
.mod_login .checkbox_container label<br />
.mod_login .submit_container<br />
#request_password<br />
#request_password a<br />
<br />
/** News **/<br />
.mod_newsmenu,<br />
.mod_eventmenu<br />
#breaking_news<br />
.mod_newsmenu ul,<br />
.mod_newsmenu li,<br />
.mod_eventmenu ul,<br />
.mod_eventmenu li<br />
.mod_newsmenu .year,<br />
.mod_eventmenu .year<br />
.mod_newslist p<br />
.mod_newsreader .back<br />
.mod_newslist .info,<br />
.mod_newsreader .info<br />
.mod_newslist .layout_short<br />
.mod_newsreader .ce_text<br />
.mod_article,<br />
.mod_newsreader<br />
.mod_newsreader h2<br />
.mod_newsreader .comment_default<br />
.mod_newsreader .comment<br />
.mod_newsreader .reply<br />
.mod_newsreader .form<br />
.mod_newsreader .widget<br />
.mod_newsreader .textarea<br />
<br />
/** Search **/<br />
.mod_search<br />
.mod_search .text<br />
.mod_search .radio_container<br />
.mod_search .radio_container label<br />
.mod_search .header<br />
.mod_search h3<br />
.mod_search .context<br />
.mod_search .url<br />
.mod_search .relevance<br />
.mod_search .highlight<br />
<br />
/** Calendar **/<br />
table.calendar<br />
table.calendar .head<br />
table.calendar .current<br />
table.calendar .label<br />
table.calendar td<br />
table.calendar td.weekend<br />
table.calendar .today<br />
table.calendar .empty,<br />
table.calendar .empty .header<br />
table.calendar td .header<br />
table.calendar td .event a<br />
<br />
/** Mini calendar **/<br />
#minicalendar<br />
table.minicalendar<br />
table.minicalendar td<br />
table.minicalendar td,<br />
table.minicalendar .active a<br />
table.minicalendar .weekend<br />
table.minicalendar .today<br />
table.minicalendar .label<br />
table.minicalendar .head<br />
table.minicalendar .current<br />
<br />
/** Events **/<br />
.mod_eventlist<br />
.mod_eventlist .header<br />
.mod_eventlist .header.first<br />
.mod_eventlist .event<br />
.mod_eventlist .time<br />
.mod_eventreader .info<br />
.mod_eventreader .recurring<br />
.mod_eventreader .ce_text<br />
.mod_eventreader .back<br />
<br />
/** Personal data **/<br />
.mod_personalData<br />
.mod_personalData fieldset<br />
<br />
*+html .mod_personalData fieldset<br />
.mod_personalData legend<br />
.mod_personalData .submit_container<br />
*+html .mod_personalData .submit_container<br />
.mod_personalData td<br />
.mod_personalData .text,<br />
.mod_personalData .password<br />
.mod_personalData select<br />
*+html .mod_personalData select<br />
fieldset.radio_container,<br />
fieldset.checkbox_container<br />
<br />
/** Tables **/<br />
.ce_table<br />
.ce_table td<br />
<br />
/** Listing **/<br />
*+html .ce_list li<br />
<br />
/** Tables **/<br />
.ce_table th<br />
.ce_table th a<br />
<br />
<br />
/** Pagination **/<br />
.pagination li<br />
<br />
/** Tables **/<br />
#tps td<br />
<br />
/** Pagination **/<br />
.pagination<br />
<br />
/** Tables **/<br />
#tps .col_0<br />
<br />
/** Pagination **/<br />
.pagination p<br />
<br />
/** Tables **/<br />
#tps .explanation<br />
<br />
/** Pagination **/<br />
.pagination ul<br />
<br />
</source><br />
=Hilfreiche Erweiterungen um mit CSS zu arbeiten=<br />
*'''CSS Editor''': Damit ein einfaches bearbeiten der oben aufgeführten CSS "Schnipsel/Klassen/Selektoren" in Contao möglich ist, empfiehlt sich die Erweiterung "csseditor" zu installieren.<br />
<br />
=Beispiele für häufig gestellte Fragen IRC & Forum's=<br />
==Html in einem Artikel verwenden==<br />
==Wie man ein verlinktes Bild im Header einfügt==<br />
==Ein existierendes Layout in Contao verwenden==<br />
<br />
=folgt=<br />
=in Kürze=</div>Manitougshttps://de.contaowiki.org/Stylepicker4wardStylepicker4ward2011-07-05T19:27:17Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Kategorie:Extensions]]<br />
<br />
= Stylepicker =<br />
<br />
Wizard zur Auswahl von CSS-Klassennamen in Inhaltselementen und anderen Objekten. <br><br />
Die verfügbaren Klassennamen müssen zuvor im Theme als Vorlage eingetragen werden. <br><br />
Sie werden oft zur Designanpssung von einzelnen Elementen genutzt.<br />
{{ExtInfo<br />
| Dev=Christoph Wiechert ([[User:psi|psi]])<br />
| DevSite=http://www.4wardmedia.de<br />
| ExtVersion=1.0.0<br />
| Version=2.9.5 - 2.9.10<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/Stylepicker4ward.de.html<br />
}}<br />
<br />
<br />
== Schrittweise Anleitung ==<br />
<br />
Nach der Installation aus dem Repository müssen im Theme die Klassennamen-Vorlagen erstellt werden.<br><br />
Man kann neben dem Titel zusätzlich einen Beschreibungstext und ein Vorschaubild angeben.<br />
<br />
[[Datei:Stylepicker Theme.png|Stylepicker in der Theme-Übersicht|frame|center]]<br />
<br />
<br />
[[Datei:Stylepicker edit.png|Stylepicker-Einstellungen in einem Theme|frame|center]]</div>Manitougshttps://de.contaowiki.org/Simile_Timeline_einbindenSimile Timeline einbinden2011-07-05T19:17:52Z<p>Manitougs: Korrektur</p>
<hr />
<div>[[Category:Dev Snippets]]<br />
{{AppliesTo<br />
|TLVersion=ab 2.6<br />
|Version=ab 2.9<br />
}}<br />
Das ''Simile Timeline'' Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.<br />
<br />
=Frontend-Modul anlegen=<br />
Als erstes wird ein Platzhalter für die Zeitleiste benötigt. Dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an und wählt als Modultyp "Eigener HTML-Code".<br />
<br />
<source lang="javascript"><br />
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div><br />
</source><br />
<br />
=Layout anlegen=<br />
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.<br />
<br />
Body onLoad: onLoad();<br />
<br />
Zusätzliche <Head>-Tags:<br />
<source lang="javascript"><br />
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script><br />
<br />
<script type="text/javascript"><br />
var tl;<br />
function onLoad() {<br />
var eventSource = new Timeline.DefaultEventSource(0);<br />
<br />
var theme = Timeline.ClassicTheme.create();<br />
theme.event.bubble.width = 300;<br />
theme.event.bubble.height = 200;<br />
theme.mouseWheel = 'scroll';<br />
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");<br />
var bandInfos = [<br />
Timeline.createBandInfo({<br />
width: "80%", <br />
intervalUnit: Timeline.DateTime.DAY, <br />
intervalPixels: 100,<br />
eventSource: eventSource,<br />
date: d,<br />
theme: theme<br />
}),<br />
Timeline.createBandInfo({<br />
width: "10%", <br />
intervalUnit: Timeline.DateTime.MONTH, <br />
intervalPixels: 150<br />
}),<br />
Timeline.createBandInfo({<br />
width: "10%", <br />
intervalUnit: Timeline.DateTime.YEAR, <br />
intervalPixels: 200<br />
})<br />
];<br />
bandInfos[1].syncWith = 0;<br />
bandInfos[1].highlight = true; <br />
bandInfos[2].syncWith = 1;<br />
bandInfos[2].highlight = true; <br />
<br />
tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);<br />
// !! HIER DATEN LADEN !!<br />
var mydata = "/timeline.json";<br />
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });<br />
// !! HIER DATEN LADEN !!<br />
}<br />
// bei bedarf<br />
var resizeTimerID = null;<br />
function onResize() {<br />
if (resizeTimerID == null) {<br />
resizeTimerID = window.setTimeout(function() {<br />
resizeTimerID = null;<br />
tl.layout();<br />
}, 500);<br />
}<br />
}<br />
</script><br />
</source><br />
<br />
=Daten laden=<br />
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
//Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.<br />
var mydata = "/timeline.json";<br />
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });<br />
</script><br />
</source><br />
<br />
=Abschließendes=<br />
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden. Wichtig ist jedoch, das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.<br />
<br />
--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/Akkordeons_verschachtelnAkkordeons verschachteln2011-07-05T19:07:32Z<p>Manitougs: Typos</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]<br />
{{AppliesTo<br />
|Version=ab 2.9<br />
}}<br />
<br />
==Einleitung==<br />
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]<br />
<br />
Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:<br />
<br />
Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.<br />
<br />
Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].<br />
<br />
==Editieren im Backend==<br />
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]<br />
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:<br />
<br />
* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])<br />
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen<br />
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.<br />
<br />
Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.<br />
<br />
==Code/Template==<br />
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<!--//--><![CDATA[//><!--<br />
window.addEvent('domready', function()<br />
{<br />
var heightValue = window.ie6 ? '100%' : '';<br />
<br />
this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
<br />
this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
});<br />
//--><!]]><br />
</script><br />
</source><br />
<br />
==Erläuterungen zum Code==<br />
<br />
Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).<br />
<br />
Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.<br />
<br />
Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].<br />
<br />
Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:<br />
<br />
* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.<br />
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.<br />
<br />
Getestet wurde das in allen gängigen Browsern:<br />
*Opera 11.11 (XP, W7)<br />
*FireFox 3.6.17 (XP)<br />
*FireFox 4.0.1 (W7)<br />
*Safari 5.0.5 (XP, W7)<br />
*Chrome 11.0.696.77 (XP, W7)<br />
*IE 8.0.6001.18702 (XP)<br />
*IE 9.0.8112.16421 (W7)<br />
*Mac (diverse Browser, Liste folgt)<br />
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.<br />
<br />
==Verbesserung: Akkordeons geöffnet halten==<br />
<br />
Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.<br />
<br />
Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst ein aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass das Formular nicht erfolgreich gesendet werden konnte.<br />
<br />
Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.<br />
<br />
==Code der Verbesserung==<br />
<br />
Gezeigt wird hier nur das diff (leider erlaubt das Wiki weder *.zip noch *.txt als Anhang).<br />
<br />
<source lang=diff"><br />
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200<br />
+++ moo_accordion_act_nested_cookie.tpl 2011-06-25 18:02:21.339125000 +0200<br />
@@ -3,10 +3,12 @@<br />
window.addEvent('domready', function()<br />
{<br />
var heightValue = window.ie6 ? '100%' : '';<br />
+ var cookieBase = $$('div.toggler')[0] ?<br />
+ 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id') : 'acc_x';<br />
+ var maybeScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : <br />
+ Cookie.read(cookieBase + '_outer') ? 'outer' : false;<br />
<br />
this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),<br />
{<br />
- display: -1,<br />
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
@@ -37,12 +39,39 @@<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
+ Cookie.dispose(cookieBase + '_outer');<br />
+ var toggler = this.togglers[this.previous];<br />
+ if (element && toggler && toggler.hasClass('active'))<br />
+ {<br />
+ Cookie.write(cookieBase + '_outer', this.previous);<br />
+ if (maybeScroll == 'outer')<br />
+ {<br />
+ maybeScroll = false;<br />
+<br />
+ var wc = {top: window.getScroll().y, height: window.getSize().y};<br />
+ var tc = toggler.getCoordinates();<br />
+ var ec = element.getCoordinates();<br />
+ var sc =<br />
+ {<br />
+ top: Math.max(0, tc.top - 20),<br />
+ height: Math.min(tc.height + ec.height + 40, wc.height)<br />
+ };<br />
+ if (sc.top < wc.top)<br />
+ {<br />
+ new Fx.Scroll($(document.body)).start(0, sc.top);<br />
+ }<br />
+ else if (sc.top + sc.height > wc.top + wc.height)<br />
+ {<br />
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);<br />
+ }<br />
+ }<br />
+ }<br />
}<br />
});<br />
<br />
this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),<br />
{<br />
- display: -1,<br />
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
@@ -73,6 +102,33 @@<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
+ Cookie.dispose(cookieBase + '_inner');<br />
+ var toggler = this.togglers[this.previous];<br />
+ if (element && toggler && toggler.hasClass('active'))<br />
+ {<br />
+ Cookie.write(cookieBase + '_inner', this.previous);<br />
+ if (maybeScroll == 'inner')<br />
+ {<br />
+ maybeScroll = false;<br />
+<br />
+ var wc = {top: window.getScroll().y, height: window.getSize().y};<br />
+ var tc = toggler.getCoordinates();<br />
+ var ec = element.getCoordinates();<br />
+ var sc =<br />
+ {<br />
+ top: Math.max(0, tc.top - 20),<br />
+ height: Math.min(tc.height + ec.height + 40, wc.height)<br />
+ };<br />
+ if (sc.top < wc.top)<br />
+ {<br />
+ new Fx.Scroll($(document.body)).start(0, sc.top);<br />
+ }<br />
+ else if (sc.top + sc.height > wc.top + wc.height)<br />
+ {<br />
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);<br />
+ }<br />
+ }<br />
+ }<br />
}<br />
});<br />
});<br />
</source><br />
<br />
==Erläuterungen zur Verbesserung==<br />
<br />
Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.<br />
<br />
Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wird, nicht bei jedem Klick auf einen Toggler ('''var''' ''maybeScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.<br />
<br />
Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1 und das entsprechende Element wird geöffnet. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.<br />
<br />
Das Cookie wird im Event ''onComplete'' gelöscht bzw. neu gesetzt, abhängig davon, ob das Element geöffnet ist (Toggler hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.<br />
<br />
Schließlich wird im Block ''if (maybeScroll == 'xxx')'' geprüft, ob das Element bereits sichtbar ist und, falls nicht, wird das Element und sein Toggler (die Bereichsüberschrift im BE) weich/animiert in Sicht gerollt. Die länglichen Berechnungen sorgen dafür, dass das Element nur gerade eben sichtbar wird (+20px oben/unten). War es ganz oder teilweise unterhalb des sichtbaren Bereichs, dann kommt es von unten herein, bis seine Unterkante sichtbar wird. War es ganz oder teilweise oberhalb, kommt es von oben, bis seine Oberkante sichtbar wird. Ist das Element höher als die Höhe des sichtbaren Bereichs, dann wird jedenfalls die Oberkante sichtbar.<br />
<br />
Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.<br />
<br />
--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/Fullsize_Background_mit_MooTools_MooSizerFullsize Background mit MooTools MooSizer2011-06-15T17:40:37Z<p>Manitougs: Forenthread verlinkt</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.<br /><br />
So kann pro Seite ein Hintergrundbild auswählt werden und dieses wird automatisch als Fullsize Bild verwendet.<br />
<br />
=Beispiel=<br />
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:<br />
[http://www.we-are.cc We-are.cc]<br />
<br />
=Voraussetzung=<br />
Das Modul [http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages] muss installiert sein.<br /><br />
Ein Backgroundbild 2560px x 1600px wegen der automatischen Anpassung von Contao am besten über FTP uploaden ([http://lexikon.martinvogel.de/wqxga.html Hilfe zur Größe]).<br />
<br />
=Einrichten von PageImages=<br />
Als erstes erstellt man eine neue Seitenbildkategorie in PageImages; zu finden im Backend-Menü unter Inhalte -> Titelbilder.<br />
<br />
[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]<br />
<br />
Im nächste Schritt fügt man sein Background-Image ein.<br />
* Add page image(s)<br />
<br />
[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]<br />
<br />
# Seitenbild(er) - Das hochgeladene Bild auswählen<br />
# Seiten - Hier wird auswählt, auf welcher Seite das Coverimage angezeigt werden soll<br />
# Alt - Definiet den Alternativ Text (wichtig für SEO)<br />
# Seitenbilder nicht vererben - Das heißt, das dieses Bild nur auf diese Seite angezeigt wird und nicht auf den Unterseiten, die sich in dieser befinden.<br />
# Speichern<br />
<br />
Wenn man mehrere Bilder eingefügt hat, sollt es so aussehen:<br />
<br />
[[Datei:CoverImage_3.jpg|Eingebundene Seitenbilder|frame|center]]<br />
<br />
=moo_moosize.tpl erstellen und einstellen=<br />
Als nächsten, wichtigen Schritt [[Templates_bearbeiten|erstellt]] man ein eigenes Template für das MooSize-Script.<br />
<br />
Dazu geht man auf Layout -> Templates<br />
<br />
[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]<br />
<br />
# Neues Templates - Hier wählt man ein Template, welches mit moo_ beginnt.<br />
# Danach auf bearbeiten gehen und den Namen auf moo_moosize ändern.<br />
# Als nächster Schritt bearbeitet man den Code des Templates. Dazu klickt man auf das 2 Symbol von rechts.<br />
# Anschliessend '''ersetzt''' man den vorhandenen Code mit dem nachstehenden:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<br />
/*<br />
MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin<br />
<br />
License:<br />
MIT-style license.<br />
<br />
Credits:<br />
Original jQuery supersized script By Sam Dunn ( <http://buildinternet.com> / <http://onemightyroar.com> )<br />
found here: <http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/><br />
rewritten for Mootools 1.2 by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1<br />
*/<br />
<br />
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);<br />
<br />
var mooSizer = new Class({<br />
<br />
Implements: [Options, Events],<br />
options: {<br />
startwidth: 640, <br />
startheight: 480,<br />
minsize: .5,<br />
slideshow: 1,<br />
slideinterval: 5000,<br />
bgElement: ''<br />
},<br />
<br />
initialize: function(options){ //if(DEBUG==1)console.log("class initialised");<br />
this.setOptions(options);<br />
<br />
//Define image ratio & minimum dimensions<br />
var minwidth = this.options.minsize*(this.options.startwidth); //if(DEBUG==1)console.log("minwidth "+minwidth );<br />
var minheight = this.options.minsize*(this.options.startheight); //if(DEBUG==1)console.log("minheight "+minheight );<br />
var ratio = this.options.startheight/this.options.startwidth; //if(DEBUG==1)console.log("ratio "+ratio );<br />
<br />
this.resizenow(minwidth,minheight,ratio);<br />
<br />
window.addEvent('resize', function(){ //if(DEBUG==1)console.log("resizenow event fired");<br />
this.resizenow(minwidth,minheight,ratio);<br />
}.bind(this));<br />
<br />
},<br />
<br />
resizenow: function(minwidth,minheight,ratio) { // if(DEBUG==1)console.log("resizenow called");<br />
<br />
//Gather browser and current image size<br />
var imagesize = $(this.options.bgElement).getSize();<br />
var imagewidth = imagesize.x; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
var imageheight = imagesize.y; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
var clientsize = window.getSize();<br />
var browserwidth = clientsize.x; //if(DEBUG==1)console.log("browserwidth "+browserwidth );<br />
var browserheight = clientsize.y; //if(DEBUG==1)console.log("browserheight "+browserheight );<br />
<br />
//Check for minimum dimensions<br />
if ((browserheight < minheight) && (browserwidth < minwidth)){ //if(DEBUG==1)console.log("within minimum dimensions");<br />
//$(this).height(minheight);<br />
$(this.options.bgElement).setStyle('height',minheight);<br />
//$(this).width(minwidth);<br />
$(this.options.bgElement).setStyle('width',minwidth);<br />
}<br />
else{ <br />
//When browser is taller <br />
if (browserheight > browserwidth){ //if(DEBUG==1)console.log("browserheight > browserwidth");<br />
imageheight = browserheight;<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
<br />
if (browserwidth > imagewidth){ //if(DEBUG==1)console.log("browserheight > imagewidth");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
}<br />
} <br />
//When browser is wider<br />
if (browserwidth >= browserheight){ //if(DEBUG==1)console.log("browserwidth >= browserheight");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
<br />
if (browserheight > imageheight){ //if(DEBUG==1)console.log("browserheight > imageheight");<br />
imageheight = browserheight; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
}<br />
}<br />
}<br />
}<br />
<br />
});<br />
<br />
/*************************************************************/<br />
<br />
document.addEvent('domready', function(){<br />
<br />
moosizer = new mooSizer({ bgElement:'supersize' });<br />
<br />
});<br />
<br />
</script><br />
</source><br />
<br />
Im Anschluss muss dieses Template auch im Seitenlayout aktiviert werden:<br />
# Dazu geht man auf Layout -> Themes -> Seitenlayouts -> Dann sein Layout bearbeiten<br />
# Im Abschnitt ''Skript-Einstellungen'' bei MooTools-Templates den Haken bei dem zuvor erstellten Template ''moo_moosize.tpl'' setzen.<br />
# Speichern<br />
<br />
[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]<br />
<br />
=Modul für die Einbettung von PageImages erstellen=<br />
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".<br />
<br />
[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]<br />
<br />
# Titel - Background<br />
# Modultyp - Seitenbilder<br />
# Page image template - pageimages_default<br />
# Seitenbilderkategorie - Hier wird die Kategorie gewählt, die zuvor unter [[#Einrichten_von_PageImages|Einrichten von PageImages]] erstellt wurde.<br />
# Speichern<br />
Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> sein Layout bearbeiten und in das Layout einfügen.<br />
<br />
[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]<br />
<br />
In dieser Anleitung wurde es in den "Footer" gepackt (Fußzeile), aber ist egal, an welcher Stelle es eingebunden wird.<br />
<br />
=PageImages Templates anpassen=<br />
Nun geht man auf Layout -> Templates und erstellt 2 neue Templates:<br />
* pageimagesimage.tpl<br />
* pageimages_default.tpl<br />
<br />
In "pageimagesimage.tpl" kommt nun dieser Code:<br />
<br />
<source lang="php"><br />
<div id="passepartout"><br />
<div id="supersize"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>><br />
<?php if ($this->href): ?><br />
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><br />
<?php endif; ?><br />
<img class="activeslide" src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><br />
<?php if ($this->href): ?><br />
</a><br />
<?php endif; ?><br />
<?php if ($this->caption): ?><br />
<div class="caption"><?php echo $this->caption; ?></div><br />
<?php endif; ?><br />
</div><br />
</div><br />
</source><br />
<br />
In "pageimages_default.tpl" kommt dieser Code:<br />
<br />
<source lang="php"><br />
<!-- indexer::stop --><br />
<br />
<?php echo($this->pageimage); ?><br />
<br />
<!-- indexer::continue --><br />
</source><br />
<br />
{{Achtung|Speichern nicht vergessen ;)}}<br />
<br />
=CSS einstellen=<br />
Man kann die folgenden CSS-Anweisungen in einer existierenden CSS hinzufügen, oder man [[CSS|erstellt]] eine eigene CSS-Datei (z.B. moosizer)-<br />
<br />
Diese Formatierungen kommt in diese CSS-Datei.<br />
<br />
<source lang="css"><br />
#passepartout<br />
{<br />
height:100%;<br />
position:relative;<br />
display:block;<br />
}<br />
#supersize<br />
{<br />
top:0;<br />
left:0;<br />
position:fixed;<br />
z-index: -1;<br />
}<br />
#supersize img,<br />
#supersize a<br />
{<br />
width:100%;<br />
height:100%;<br />
display:none;<br />
}<br />
#supersize .activeslide,<br />
#supersize .activeslide img<br />
{<br />
display:inline;<br />
}<br />
</source><br />
<br />
Sollte man eine eigene CSS-Datei erstellt haben, darf nicht vergessen werden, diese zum Schluß unter Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets zu aktivieren (Hacken setzen) und speichern.<br />
<br />
Bei Fragen zu dieser Anleitung kann der Autor [http://www.contao-community.de/member.php?5598-Messa Messa] kontaktiert werden.<br /><br />
Ein Diskussionsthread zu dieser Anleitung ist im deutschen [http://www.contao-community.de/showthread.php?20317-Cover-Image-Fullsize-Background-MooSize Contao-Forum] zu finden.</div>Manitougshttps://de.contaowiki.org/Fullsize_Background_mit_MooTools_MooSizerFullsize Background mit MooTools MooSizer2011-06-15T17:32:28Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.<br /><br />
So kann pro Seite ein Hintergrundbild auswählt werden und dieses wird automatisch als Fullsize Bild verwendet.<br />
<br />
=Beispiel=<br />
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:<br />
[http://www.we-are.cc We-are.cc]<br />
<br />
=Voraussetzung=<br />
Das Modul [http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages] muss installiert sein.<br /><br />
Ein Backgroundbild 2560px x 1600px wegen der automatischen Anpassung von Contao am besten über FTP uploaden ([http://lexikon.martinvogel.de/wqxga.html Hilfe zur Größe]).<br />
<br />
=Einrichten von PageImages=<br />
Als erstes erstellt man eine neue Seitenbildkategorie in PageImages; zu finden im Backend-Menü unter Inhalte -> Titelbilder.<br />
<br />
[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]<br />
<br />
Im nächste Schritt fügt man sein Background-Image ein.<br />
* Add page image(s)<br />
<br />
[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]<br />
<br />
# Seitenbild(er) - Das hochgeladene Bild auswählen<br />
# Seiten - Hier wird auswählt, auf welcher Seite das Coverimage angezeigt werden soll<br />
# Alt - Definiet den Alternativ Text (wichtig für SEO)<br />
# Seitenbilder nicht vererben - Das heißt, das dieses Bild nur auf diese Seite angezeigt wird und nicht auf den Unterseiten, die sich in dieser befinden.<br />
# Speichern<br />
<br />
Wenn man mehrere Bilder eingefügt hat, sollt es so aussehen:<br />
<br />
[[Datei:CoverImage_3.jpg|Eingebundene Seitenbilder|frame|center]]<br />
<br />
=moo_moosize.tpl erstellen und einstellen=<br />
Als nächsten, wichtigen Schritt [[Templates_bearbeiten|erstellt]] man ein eigenes Template für das MooSize-Script.<br />
<br />
Dazu geht man auf Layout -> Templates<br />
<br />
[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]<br />
<br />
# Neues Templates - Hier wählt man ein Template, welches mit moo_ beginnt.<br />
# Danach auf bearbeiten gehen und den Namen auf moo_moosize ändern.<br />
# Als nächster Schritt bearbeitet man den Code des Templates. Dazu klickt man auf das 2 Symbol von rechts.<br />
# Anschliessend '''ersetzt''' man den vorhandenen Code mit dem nachstehenden:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<br />
/*<br />
MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin<br />
<br />
License:<br />
MIT-style license.<br />
<br />
Credits:<br />
Original jQuery supersized script By Sam Dunn ( <http://buildinternet.com> / <http://onemightyroar.com> )<br />
found here: <http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/><br />
rewritten for Mootools 1.2 by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1<br />
*/<br />
<br />
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);<br />
<br />
var mooSizer = new Class({<br />
<br />
Implements: [Options, Events],<br />
options: {<br />
startwidth: 640, <br />
startheight: 480,<br />
minsize: .5,<br />
slideshow: 1,<br />
slideinterval: 5000,<br />
bgElement: ''<br />
},<br />
<br />
initialize: function(options){ //if(DEBUG==1)console.log("class initialised");<br />
this.setOptions(options);<br />
<br />
//Define image ratio & minimum dimensions<br />
var minwidth = this.options.minsize*(this.options.startwidth); //if(DEBUG==1)console.log("minwidth "+minwidth );<br />
var minheight = this.options.minsize*(this.options.startheight); //if(DEBUG==1)console.log("minheight "+minheight );<br />
var ratio = this.options.startheight/this.options.startwidth; //if(DEBUG==1)console.log("ratio "+ratio );<br />
<br />
this.resizenow(minwidth,minheight,ratio);<br />
<br />
window.addEvent('resize', function(){ //if(DEBUG==1)console.log("resizenow event fired");<br />
this.resizenow(minwidth,minheight,ratio);<br />
}.bind(this));<br />
<br />
},<br />
<br />
resizenow: function(minwidth,minheight,ratio) { // if(DEBUG==1)console.log("resizenow called");<br />
<br />
//Gather browser and current image size<br />
var imagesize = $(this.options.bgElement).getSize();<br />
var imagewidth = imagesize.x; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
var imageheight = imagesize.y; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
var clientsize = window.getSize();<br />
var browserwidth = clientsize.x; //if(DEBUG==1)console.log("browserwidth "+browserwidth );<br />
var browserheight = clientsize.y; //if(DEBUG==1)console.log("browserheight "+browserheight );<br />
<br />
//Check for minimum dimensions<br />
if ((browserheight < minheight) && (browserwidth < minwidth)){ //if(DEBUG==1)console.log("within minimum dimensions");<br />
//$(this).height(minheight);<br />
$(this.options.bgElement).setStyle('height',minheight);<br />
//$(this).width(minwidth);<br />
$(this.options.bgElement).setStyle('width',minwidth);<br />
}<br />
else{ <br />
//When browser is taller <br />
if (browserheight > browserwidth){ //if(DEBUG==1)console.log("browserheight > browserwidth");<br />
imageheight = browserheight;<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
<br />
if (browserwidth > imagewidth){ //if(DEBUG==1)console.log("browserheight > imagewidth");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
}<br />
} <br />
//When browser is wider<br />
if (browserwidth >= browserheight){ //if(DEBUG==1)console.log("browserwidth >= browserheight");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
<br />
if (browserheight > imageheight){ //if(DEBUG==1)console.log("browserheight > imageheight");<br />
imageheight = browserheight; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
}<br />
}<br />
}<br />
}<br />
<br />
});<br />
<br />
/*************************************************************/<br />
<br />
document.addEvent('domready', function(){<br />
<br />
moosizer = new mooSizer({ bgElement:'supersize' });<br />
<br />
});<br />
<br />
</script><br />
</source><br />
<br />
Im Anschluss muss dieses Template auch im Seitenlayout aktiviert werden:<br />
# Dazu geht man auf Layout -> Themes -> Seitenlayouts -> Dann sein Layout bearbeiten<br />
# Im Abschnitt ''Skript-Einstellungen'' bei MooTools-Templates den Haken bei dem zuvor erstellten Template ''moo_moosize.tpl'' setzen.<br />
# Speichern<br />
<br />
[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]<br />
<br />
=Modul für die Einbettung von PageImages erstellen=<br />
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".<br />
<br />
[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]<br />
<br />
# Titel - Background<br />
# Modultyp - Seitenbilder<br />
# Page image template - pageimages_default<br />
# Seitenbilderkategorie - Hier wird die Kategorie gewählt, die zuvor unter [[#Einrichten_von_PageImages|Einrichten von PageImages]] erstellt wurde.<br />
# Speichern<br />
Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> sein Layout bearbeiten und in das Layout einfügen.<br />
<br />
[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]<br />
<br />
In dieser Anleitung wurde es in den "Footer" gepackt (Fußzeile), aber ist egal, an welcher Stelle es eingebunden wird.<br />
<br />
=PageImages Templates anpassen=<br />
Nun geht man auf Layout -> Templates und erstellt 2 neue Templates:<br />
* pageimagesimage.tpl<br />
* pageimages_default.tpl<br />
<br />
In "pageimagesimage.tpl" kommt nun dieser Code:<br />
<br />
<source lang="php"><br />
<div id="passepartout"><br />
<div id="supersize"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>><br />
<?php if ($this->href): ?><br />
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><br />
<?php endif; ?><br />
<img class="activeslide" src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><br />
<?php if ($this->href): ?><br />
</a><br />
<?php endif; ?><br />
<?php if ($this->caption): ?><br />
<div class="caption"><?php echo $this->caption; ?></div><br />
<?php endif; ?><br />
</div><br />
</div><br />
</source><br />
<br />
In "pageimages_default.tpl" kommt dieser Code:<br />
<br />
<source lang="php"><br />
<!-- indexer::stop --><br />
<br />
<?php echo($this->pageimage); ?><br />
<br />
<!-- indexer::continue --><br />
</source><br />
<br />
{{Achtung|Speichern nicht vergessen ;)}}<br />
<br />
=CSS einstellen=<br />
Man kann die folgenden CSS-Anweisungen in einer existierenden CSS hinzufügen, oder man [[CSS|erstellt]] eine eigene CSS-Datei (z.B. moosizer)-<br />
<br />
Diese Formatierungen kommt in diese CSS-Datei.<br />
<br />
<source lang="css"><br />
#passepartout<br />
{<br />
height:100%;<br />
position:relative;<br />
display:block;<br />
}<br />
#supersize<br />
{<br />
top:0;<br />
left:0;<br />
position:fixed;<br />
z-index: -1;<br />
}<br />
#supersize img,<br />
#supersize a<br />
{<br />
width:100%;<br />
height:100%;<br />
display:none;<br />
}<br />
#supersize .activeslide,<br />
#supersize .activeslide img<br />
{<br />
display:inline;<br />
}<br />
</source><br />
<br />
Sollte man eine eigene CSS-Datei erstellt haben, darf nicht vergessen werden, diese zum Schluß unter Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets zu aktivieren (Hacken setzen) und speichern.<br />
<br />
Bei Fragen zu dieser Anleitung kann der Autor [http://www.contao-community.de/member.php?5598-Messa Messa] kontaktiert werden.</div>Manitougshttps://de.contaowiki.org/Akkordeons_verschachtelnAkkordeons verschachteln2011-06-15T16:39:38Z<p>Manitougs: Link zu Peter Müllers Buch noch hinzu gefügt</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]<br />
{{AppliesTo<br />
|Version=ab 2.9<br />
}}<br />
<br />
==Einleitung==<br />
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]<br />
<br />
Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:<br />
<br />
Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.<br />
<br />
Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].<br />
<br />
==Editieren im Backend==<br />
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]<br />
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:<br />
<br />
* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement Umschlag Anfang [### ACCORDION WRAPPER START ###] / Inhaltselement Umschlag Ende [### ACCORDION WRAPPER END ###])<br />
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen<br />
* die zweite Akkordeon-Ebene wird ganz normal mit Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Einzelnes Element) oder ebenfalls Umschlag Anfang/Ende, wenn man dazwischen mehrere Inhaltselemente benötigt.<br />
<br />
Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.<br />
<br />
==Code/Template==<br />
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dieses Template statt "moo_accordion.tpl". Der Code des neuen Templates:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<!--//--><![CDATA[//><!--<br />
window.addEvent('domready', function()<br />
{<br />
var heightValue = window.ie6 ? '100%' : '';<br />
<br />
this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
<br />
this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
});<br />
//--><!]]><br />
</script><br />
</source><br />
<br />
==Erläuterungen zum Code==<br />
<br />
Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.<br />
<br />
Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden (gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog]).<br />
<br />
Getestet wurde das in allen gängigen Browsern:<br />
*Opera 11.11 (XP, W7)<br />
*FireFox 3.6.17 (XP)<br />
*FireFox 4.0.1 (W7)<br />
*Safari 5.0.5 (XP, W7)<br />
*Chrome 11.0.696.77 (XP, W7)<br />
*IE 8.0.6001.18702 (XP)<br />
*IE 9.0.8112.16421 (W7)<br />
*Mac<br />
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.<br />
<br />
--[[Benutzer:Deerwood|Deerwood]] 18:16, 9. Jun. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/Video_galerieVideo galerie2011-06-15T16:37:40Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]<br />
{{AppliesTo<br />
|Version=ab 2.9<br />
}}<br />
<br />
Die normale Galerie des Contao-Core kann bereits für (externe) Videos genutzt werden. Dazu legt man für jedes anzuzeigende Video ein Screenshot-Bild ab (z.B. in ".../tl_files/videos/gallery_01/") und erzeugt eine Datei "meta.txt" im gleichen Verzeichnis, die, neben alternativem Text und Bildunterschrift, auch die URL zum Video enthält:<br />
<br />
<source lang="php"><br />
dateiname.endung = Alternativer Text | URL | Bildunterschrift<br />
The_Police_-_Roxanne_live_1979.jpg = The Police - Roxanne, live 1979 | http://www.youtube.com/watch?v=-wpX6drarrs | <p>The (very young) Police at Pinkpop 1979</p><br />
Brazil.jpg = Brazil - Terry Gilliam (1985) | http://video.google.com/videoplay?docid=5752843086186063624# | <p>Brazil - Google Video (2:16:49)</p><br />
</source><br />
<br />
Erzeugt man daraus eine Galerie und aktiviert im Backend die Checkbox "Großansicht/Neues Fenster", dann wird bei einem Klick auf einen Galerie-Screenshot die angegebene URL in einem neuen Browser-Fenster geöffnet und das Video darin abgespielt.<br />
<br />
Schön und gut ... allerdings will man oft die Besucher auf der eigenen Seite halten und ihnen dennoch das Abspielen der Videos gestatten. Peter Müller hat in seinem excellenten Buch "[http://websites-erstellen-mit-contao.de/ Websites erstellen mit CONTAO]" gezeigt, wie man Videos per Link im Text in einer Media/LightBox öffnen kann (Kapitel 10.3.1 "Inhaltselement Text: Ein Link in einer Mediabox"). Das sollte doch auch mit einer Gallerie funktionieren?<br />
<br />
Na klar! In weiser Voraussicht bietet Contao für das Inhalts-Element "Galerie" eine Auswahl des Templates im Backend an. Dort wird normalerweise nur "gallery_default" angeboten. Also muss man eine Kopie dieses Templates im Verzeichnis ".../templates" [[Templates_bearbeiten|erzeugen]], umbenennen und modifizieren.<br />
<br />
Die Änderungen betreffen nur wenige Zeilen, deshalb hier nur das diff:<br />
<br />
<source lang="diff"><br />
--- gallery_default.tpl Fr 27. Mai 23:57:03 2011<br />
+++ gallery_videos.tpl Sa 28. Mai 02:51:13 2011<br />
@@ -1,6 +1,7 @@<br />
<br />
-<table cellspacing="0" cellpadding="0" summary="Image gallery"><br />
+<table class="videos" cellspacing="0" cellpadding="0" summary="Video gallery"><br />
<tbody><br />
+<?php $lightbox_id = rand(10000, 99999); ?><br />
<?php foreach ($this->body as $class=>$row): ?><br />
<tr class="<?php echo $class; ?>"><br />
<?php foreach ($row as $col): ?><br />
@@ -10,7 +11,7 @@<br />
<td class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>;"><br />
<div class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>><br />
<?php if ($col->href): ?><br />
- <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a><br />
+ <a href="<?php echo $col->href; ?>" rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]" title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a><br />
<?php else: ?><br />
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /><br />
<?php endif; ?><br />
</source><br />
<br />
Ganz am Anfang bekommt die Tabelle eine zusätzliche Klasse (optional) und ein angepasstes Attribut "summary".<br />
<br />
Direkt danach wird eine Pseudo-ID erzeugt, die weiter unten im "rel" Attribut verwendet wird. Der Sinn: hat man mehrere Video-Galerien auf einer Seite, dann soll man in der Mediabox zwar von Video zu Video in EINER Galerie schalten, aber nicht zwischen Galerien wechseln können.<br />
<br />
Die wichtigste Änderung gegen Ende:<br />
* "'''<?php echo $col->attributes; ?>'''" wird ersetzt durch<br />
* "''' rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]"'''"<br />
<br />
Damit wird der JavaScript Code von $col->attributes (window.open...) weggeworfen und stattdessen die Mediabox angefordert. Diese erhält, neben der oben erwähnten ID, auch eine Angabe für Breite und Höhe ... das ist die Größe des Original-Bildes, das für die Galerie verwendet wurde (auch wenn das nie gezeigt wird), nicht die Größe des Thumbnails!<br />
<br />
Im Backend muß man nun nur noch das neue Template "gallery_videos" wählen und die Videos erscheinen in einer Mediabox auf der eigenen Seite mit diversen Features:<br />
*man kann von Video zu Video innerhalb einer Galerie schalten und die (streaming) Videos damit "anteasern"<br />
*die Größe der Mediabox passt sich an das Video an (indirekt über die Größe des Original-Bildes)<br />
*schaltet man zwischen den Videos hin und her oder schließt die Mediabox, hält das Abspielen automatisch an. Je nach Video-Lieferant kann das Video auch Fullscreen abgespielt werden (YouTube: ja, Google: nein).</div>Manitougshttps://de.contaowiki.org/Akkordeons_verschachtelnAkkordeons verschachteln2011-06-15T16:22:49Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]<br />
{{AppliesTo<br />
|Version=ab 2.9<br />
}}<br />
<br />
==Einleitung==<br />
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]<br />
<br />
Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:<br />
<br />
Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.<br />
<br />
Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].<br />
<br />
==Editieren im Backend==<br />
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]<br />
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:<br />
<br />
* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement Umschlag Anfang [### ACCORDION WRAPPER START ###] / Inhaltselement Umschlag Ende [### ACCORDION WRAPPER END ###])<br />
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen<br />
* die zweite Akkordeon-Ebene wird ganz normal mit Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Einzelnes Element) oder ebenfalls Umschlag Anfang/Ende, wenn man dazwischen mehrere Inhaltselemente benötigt.<br />
<br />
Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.<br />
<br />
==Code/Template==<br />
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dieses Template statt "moo_accordion.tpl". Der Code des neuen Templates:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<!--//--><![CDATA[//><!--<br />
window.addEvent('domready', function()<br />
{<br />
var heightValue = window.ie6 ? '100%' : '';<br />
<br />
this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
<br />
this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),<br />
{<br />
display: -1,<br />
alwaysHide: true,<br />
opacity: false,<br />
<br />
onActive: function(toggler, element)<br />
{<br />
toggler.addClass('active');<br />
toggler.removeClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().addClass('active');<br />
toggler.getFirst().removeClass('inactive');<br />
}<br />
},<br />
<br />
onBackground: function(toggler, element)<br />
{<br />
toggler.removeClass('active');<br />
toggler.addClass('inactive');<br />
if (toggler.getFirst()) {<br />
toggler.getFirst().removeClass('active');<br />
toggler.getFirst().addClass('inactive')<br />
}<br />
},<br />
<br />
onComplete: function()<br />
{<br />
var element = $(this.elements[this.previous]);<br />
if (element && element.offsetHeight > 0)<br />
{<br />
element.setStyle('height', heightValue);<br />
}<br />
}<br />
});<br />
});<br />
//--><!]]><br />
</script><br />
</source><br />
<br />
==Erläuterungen zum Code==<br />
<br />
Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. Peter Müllers Buch Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.<br />
<br />
Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden (gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog]).<br />
<br />
Getestet wurde das in allen gängigen Browsern:<br />
*Opera 11.11 (XP, W7)<br />
*FireFox 3.6.17 (XP)<br />
*FireFox 4.0.1 (W7)<br />
*Safari 5.0.5 (XP, W7)<br />
*Chrome 11.0.696.77 (XP, W7)<br />
*IE 8.0.6001.18702 (XP)<br />
*IE 9.0.8112.16421 (W7)<br />
*Mac<br />
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.<br />
<br />
--[[Benutzer:Deerwood|Deerwood]] 18:16, 9. Jun. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/Diskussion:Akkordeons_verschachtelnDiskussion:Akkordeons verschachteln2011-06-10T11:08:40Z<p>Manitougs: </p>
<hr />
<div>Vorschlag: Umbennen in Akkordeon, verschachtelt und verschieben nach A.<br />
Vorteil: alle Akkordeon Artikel wäre unter A gelistet (soweit ich gesehen habe)<br />
----<br />
Hi<br />
<br />
Hätte ich eh gemacht, wenn ich den Artikel durchsehe / aufbereite.<br /><br />
Titel hätte ich "Akkordions verschachteln" gewählt.<br /><br />
<br />
PS: Heisst es eigentlich jetzt Akkordion oder Akkordeon?? (In den anderen Artikel wird es mit i geschrieben.)<br />
<br />
--[[Benutzer:Manitougs|Manitougs]] 13:08, 10. Jun. 2011 (CEST)</div>Manitougshttps://de.contaowiki.org/Administrator_Passwort_vergessenAdministrator Passwort vergessen2011-06-09T20:13:53Z<p>Manitougs: </p>
<hr />
<div>[[Category:Installation_und_Updates]]<br />
[[Category:Admin_HOWTOS]]<br />
Wenn man das Administrator-Passwort vergessen hat, benötigt man Zugang zur Datenbank, um es gegen ein neues Passwort zu ersetzen. Zum Bearbeiten der Datenbank ist ein Tool wie phpmyadmin oder MySQLDumper sehr hilfreich. Welches Tool zur Verfügung steht, hängt vom Webhoster ab. Ein Blick in die Hilfeseiten des jeweiligen Webhosters sollte weiter helfen. In dieser Anleitung wird die Beispielwebseite ''Music Academy'' und das Datenbanktool phpmyadmin eingesetzt.<br />
<br />
Hat man Zugriff zur Datenbank der betreffenden Contao-Installation, öffnet man diese und sucht in der linken Spalte die Tabelle ''tl_user'' und klickt darauf.<br />
<br />
[[Datei:adminpwd-tabletluser.png|Tabelle tl_user]]<br />
<br />
Anschließend werden in der Hauptspalte die Datensätze (die User) angezeigt, die in dieser Tabelle verfügbar sind. Erkennbar sind Administratorenkonten - es kann ja durchaus mehrere Admin-Konten geben - daran, dass im Feld ''admin'' eine 1 eingetragen ist. <br />
<br />
[[Datei:adminpwd-userisadmin.png|User ist Admin]]<br />
<br />
Im vorliegenden Beispiel ist der User ''Kevin Jones'' der Administrator. Daher wird dieser Datensatz bearbeitet.<br />
<br />
[[Datei:adminpwd-userlist.png|Datensätze der User]]<br />
<br />
Es folgt eine Auflistung der in dem Datensatz verfügbaren Felder. Für die Neuvergabe eines Passworts ist das Feld ''password'' von Bedeutung.<br />
<br />
Man hat 2 verschiedene Möglichkeiten, wie man das neue Passwort einträgt:<br />
<br />
'''Variante 1''' ist die Eingabe im Klartext. In diesem Fall muss bei der Spalte ''Funktion'' der Wert ''SHA1'' eingetragen werden, damit das Passwort beim Speichern verschlüsselt wird. In der Spalte ''Wert'' trägt man das neue Passwort im Klartext ein (in diesem Fall soll das neue Passwort ''contaowiki'' lauten).<br />
<br />
[[Datei:adminpwd-newpwdv1.png|Neues Passwort eintragen Variante 1]]<br />
<br />
Die neue Eingabe speichert man anschließend am Ende der Seite mit einem Klick auf den Button ''OK'' ab.<br />
<br />
[[Datei:adminpwd-newpwdsave.png|Eingabe speichern]]<br />
<br />
'''Variante 2''' ist die verschlüsselte Eingabe. Hier wird das Passwort vorher mit einem SHA1-Passwort Generator (div. Generatoren sind über Google zu finden) verschlüsselt. Das verschlüsselte Password wird anschließend in der Spalte ''Wert'' eingetragen; das Feld in der Spalte ''Funktion'' bleibt leer.<br /><br />
Der Wert ''8e0107bf1c7fbeef6538dff7173aa458e7dd585e:8c37627a0e2c606189e7765'' entspricht dem Passwort ''reset123''. Anschliessend kann im Contao-Backend bei der Benutzereinstellung einfach ein neues Passwort gesetzt werden.<br />
<br />
[[Datei:adminpwd-newpwdv2.png|Neues Passwort eintragen Variante 2]]<br />
<br />
Die Eingabe speichert man anschließend wie bei Variante 1 mit einem Klick auf den Button ''OK'' ab.<br />
<br />
Das neue Passwort ist somit gesetzt. Jedoch ist es noch sinnvoll, sich 2 weitere Felder anzusehen:<br />
<br />
'''loginCount:''' Das Feld ''loginCount'' zählt die fehlgeschlagenen Anmeldeversuche. Standardmäßig ist der Wert 3 eingetragen. Pro fehlgeschlagenen Anmeldeversuch wird -1 gerechnet, also 3-2-1-0.<br />
<br />
'''locked:''' Das Feld ''locked'' hat als Standardwert 0. Wird das Passwort zum vierten mal falsch eingegeben, wird in diesem Feld die Zeit der falschen Eingabe in [[w:de:Unixzeit|Unixzeit]] gespeichert.<br />
<br />
Bild eines '''nicht''' gesperrten Accounts:<br />
<br />
[[Datei:adminpwd-pwdfalse0.png|Nicht gesperrter Account]]<br />
<br />
Bild eines Accounts nach der '''dritten''' fehlgeschlagenen Passwort-Eingabe:<br />
<br />
[[Datei:adminpwd-pwdfalse3.png|Nach der dritten fehlerhaften Eingabe]]<br />
<br />
Bild eines '''gesperrten''' Accounts nach der '''vierten''' fehlgeschlagenen Passwort-Eingabe:<br />
<br />
[[Datei:adminpwd-pwdfalse4.png|Nach der vierten fehlerhaften Eingabe]]<br />
<br />
Soviel zur Erklärung. Das bedeutet nun soviel, dass die 2 Felder auf die Standard-Belegung gesetzt werden sollten. Dazu bearbeitet man wieder den Datensatz (siehe oben) und ändert (falls notwendig) den Wert des Feldes ''loginCount'' auf 3 und den Wert des Feldes ''locked'' auf 0...<br />
<br />
[[Datei:adminpwd-disablelock.png|Accountsperre aufheben]]<br />
<br />
... und speichert die Eingabe ab.<br />
<br />
Somit ist ein neues Admin-Passwort vergeben und die Sperre des Accounts aufgehoben.</div>Manitougshttps://de.contaowiki.org/SyncCtoSyncCto2011-06-09T20:12:15Z<p>Manitougs: Kategorie "Sonstiges" hinzugefügt</p>
<hr />
<div>[[Category:Extensions]]<br />
[[Category:Sonstiges]]<br />
Mit '''syncCto''' kann der Benutzer im Backend mehrere Contao-Installationen miteinander synchronisieren.<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=ab 2.9<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/syncCto.html<br />
| TrackerLink=http://contao-forge.de/projects/synccto/issues<br />
}}<br />
<br />
==Was ist syncCto?==<br />
<br />
syncCto bietet die Möglichkeit mehrere Contao-Installationen auf Basis einer Grund-Installation zu synchronisieren. Alle Aktionen können bequem im Backend durchgeführt werden. Durch die Integration in das Contao Rechtesystem können auch Redakteure eine Auswahl vorher definierter Datenbank-Tabellen und Dateien synchronisieren.<br />
<br />
Ein integrierter Backup-Manager sichert ausgewählte Datenbank-Tabellen, wahlweise die gesamte Contao-Installation oder nur die persönlichen Daten. Angelegte Backups können durch den Backup-Manager auch wieder importiert werden.<br />
<br />
Durch die Verwendung von syncCto können Redakteure schnell und einfach in einem Preview-System arbeiten und bei Vollendung der Arbeit den aktuellen und freigegebenen Stand zum Live-System synchronisieren.<br />
<br />
==Konfiguration==<br />
<br />
===Systemcheck===<br />
<br />
Für eine reibungslose und fehlerfreie Synchronisation ist es wichtig als erstes alle Installationen zu kontrollieren. Dafür steht der neue Menüpunkt Systemcheck zur Verfügung, denn dort werden alle für syncCto wichtigen Funktionen und Ressourcen des Servers aufgelistet. Sind alle Zellen grün, ist der erste Schritt getan. Sollte dies nicht der Fall sein, kann syncCto womöglich nicht erfolgreich funktionieren.<br />
<br />
===Einstellungen===<br />
<br />
Bevor man die erste Installation synchronisieren kann, muss zwingend bei allen Installationen auf denen syncCto installiert ist, der Menüpunkt Einstellungen (nicht zu verwechseln mit den Contao Einstellungen) aufgerufen und gespeichert werden. Bei diesem Vorgang wird der Verschlüsselungsschlüssel generiert. Der Verschlüsselungsschlüssel aus den Einstellungen des Clients benötigt man später bei der Erstellung des zuvor erwähnten Clients.<br />
<br />
==Clients verwalten==<br />
<br />
Um einen neuen Client anzulegen, klickt man im Menüpunkt Clients einfach auf den Button "Neuer Client".<br />
<br />
* '''Titel:''' z.B. der Kundenname und der Name des Servers<br />
* '''Beschreibung:''' Eine aussagekräftige Beschreibung des Servers<br />
* '''Adresse:''' Der Pfad zum TL_ROOT der Contao Installation, z.B. http://www.example.com<br />
* '''Benutzername:''' Der Benutzername mit dem man sich im Backend einloggt<br />
* '''Passwort:''' Das zum Benutzer zugehörige Passwort (wird verschlüsselt gespeichert)<br />
* '''Verschlüsselungsschlüssel:''' Hier gehört nun der Schlüssel aus den Einstellungen des Clients hinein<br />
<br />
==Synchronisation==<br />
<br />
Um den Client mit dem Server zu synchronisieren, klickt man beim entsprechenden Client auf den rechten Button "Client synchronisieren". Im nächsten Fenster wählt man die Synchronisationsart aus.<br />
<br />
* '''Contao-Installation:''' Die gesamte Contao-Installation, Dateien und Ordner in den tl_files müssen seperat ausgewählt werden<br />
* '''Persönliche Daten:''' Nur ausgewählte Dateien und Ordner im tl_files Ordner. Core-Dateien werden nicht berücksichtigt<br />
<br />
Standardmäßig ist die Option '''Persönliche Daten''' ausgewählt.<br /><br />
Danach kann man die DB-Tabellen auswählen. Man muss in diesem Schritt wissen welche Tabellen welche Daten enthält. Zum Schluss wählt man bei Bedarf noch Dateien und Ordner im tl_files aus und klickt für den Start der Synchronisation auf den Button "Client synchronisieren".<br />
<br />
==Backups==<br />
<br />
Backups können im Backend unter dem Menüpunkt Backups angelegt und wiederhergestellt werden. Alle Backups werden im automatisch angelegten Ordner "syncCto_backups" in den tl_files abgelegt. Datenbanken finden sich im Ordner "database" und Dateien im Ordner "files". Wenn man Backups wieder einspielen möchte, klickt man im Menüpunkt auf Backups und wählt die Art der Wiederherstellung. Im nächsten Schritt wählt man die entsprechende Datei aus und klickt auf "Wiederherstellen". Die Dateien oder die Datenbank auf dem Server werden danach mit den Daten aus dem Backup überschrieben.<br />
<br />
===Backups automatisiert löschen===<br />
<br />
Ab der Version 1.1.0 liegen der Extension zwei neue Cronjobs bei. Die Cronjobs löschen in Verbindung mit der Extension [http://www.contao.org/erweiterungsliste/view/cron.html Cron] automatisiert die Backups aus dem jeweiligen Ordner. Bei der Konfiguration der Cronjobs muss man den Link zum PHP-Script eingeben und den Intervall einstellen.<br />
<br />
Zur Verfügung stehen folgende zwei PHP-Skripte:<br />
<br />
* '''SyncCtoDeleteDbBackups.php''' Löscht alle Datenbank-Backups<br />
* '''SyncCtoDeleteFileBackups.php''' Löscht alle Datei-Backups<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs.jpg|Konfiguration der Cronjobs|frame|center]]<br />
<br />
Die Backups werden mit dieser Einstellung alle 7 Tage um genau 0:00 gelöscht. Möchte man den Zeitraum erhöhen, muss man */7 einfach gegen die Zahl austauschen. */14 löscht die Backups beispielsweise alle 14 Tage.<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs-2.jpg|Konfiguration zum Ausführen der Cronjobs|frame|center]]<br />
<br />
Nach Fertigstellung könnten die Cronjobs folgendermaßen aussehen:<br />
<br />
[[Datei:SyncCto-Cronjob.jpg|Übersicht Cronjobs|frame|center]]<br />
<br />
==Anwendungsfall 1==<br />
<br />
Auf dem Webserver laufen zwei Contao-Installationen.<br />
<br />
* Die Adresse der 1. Webseite heißt ''<nowiki>http://192.168.0.100/server/</nowiki>''<br />
* Die Adresse der 2. Webseite heißt ''<nowiki>http://192.168.0.100/client/</nowiki>''<br />
<br />
Der Server, bei syncCto, beschreibt immer die Installation die alle Informationen hat, die man auf eine andere Installation übertragen will. Dieses Ziel wird bei syncCto als Client beschrieben. Server und Client laufen also auf der gleichen Maschine auf den gleichen Webserver. <br />
<br />
==Anwendungsfall 2==<br />
<br />
Es gibt 2 Seiten die auf zwei verschiedenen Maschinen laufen. Beide Maschinen sind verbunden; egal ob nun im lokalen Netzwerk oder über das Internet. Dabei ist es wichtig das der Server den Client erreichen kann. Der Server kann lokal zuhause auf dem internen Webserver laufen. Der Client allerdings muss von außen erreichbar sein.<br />
<br />
* Server läuft lokal zuhause die Adresse ist ''<nowiki>http://192.168.0.100/server</nowiki>''<br />
* Der Client liegt im Internet und hat die Adresse ''<nowiki>http://www.example.com</nowiki>''<br />
<br />
So wird im Server für den Client einfach die Adresse ''<nowiki>http://www.example.com</nowiki>'' eingetragen.<br />
<br />
==Mögliche Problemfälle==<br />
<br />
Der SMH ist keine Lösung da die Daten via HTTP versendet werden. Ein ordentlich konfigurierter Server ist daher Pflicht.<br />
<br />
Sollten trotz eines guten [[#Systemcheck|Systemchecks]] und richtiger Schreibrechte eine Fehlermeldung kommen, hat man die Möglichkeit den Debugmodus zu aktivieren. In der config.php den Eintrag '''SYNCCTO_DEBUG''' von 0 auf 1 stellen. Es sollte nun eine debug.txt im Ordner syncCto_backups/debug erstellt werden. Diese kann unter Umständen einige Fragen lösen.</div>Manitougshttps://de.contaowiki.org/Administrator_Passwort_vergessenAdministrator Passwort vergessen2011-06-09T20:10:34Z<p>Manitougs: </p>
<hr />
<div>[[Category:Installation_und_Updates]]<br />
[[Category:Admin_HOWTOS]]<br />
Wenn man das Administrator-Passwort vergessen hat, benötigt man Zugang zur Datenbank, um es gegen ein neues Passwort zu ersetzen. Zum Bearbeiten der Datenbank ist ein Tool wie phpmyadmin oder MySQLDumper sehr hilfreich. Welches Tool zur Verfügung steht, hängt vom Webhoster ab. Ein Blick in die Hilfeseiten des jeweiligen Webhosters sollte weiter helfen. In dieser Anleitung wird die Beispielwebseite ''Music Academy'' und das Datenbanktool phpmyadmin eingesetzt.<br />
<br />
Hat man Zugriff zur Datenbank der betreffenden Contao-Installation, öffnet man diese und sucht in der linken Spalte die Tabelle ''tl_user'' und klickt darauf.<br />
<br />
[[Datei:adminpwd-tabletluser.png|Tabelle tl_user]]<br />
<br />
Anschließend werden in der Hauptspalte die Datensätze (die User) angezeigt, die in dieser Tabelle verfügbar sind. Erkennbar sind Administratorenkonten - es kann ja durchaus mehrere Admin-Konten geben - daran, dass im Feld ''admin'' eine 1 eingetragen ist. <br />
<br />
[[Datei:adminpwd-userisadmin.png|User ist Admin]]<br />
<br />
Im vorliegenden Beispiel ist der User ''Kevin Jones'' der Administrator. Daher wird dieser Datensatz bearbeitet.<br />
<br />
[[Datei:adminpwd-userlist.png|Datensätze der User]]<br />
<br />
Es folgt eine Auflistung der in dem Datensatz verfügbaren Felder. Für die Neuvergabe eines Passworts ist das Feld ''password'' von Bedeutung.<br />
<br />
Man hat 2 verschiedene Möglichkeiten, wie man das neue Passwort einträgt:<br />
<br />
'''Variante 1''' ist die Eingabe im Klartext. In diesem Fall muss bei der Spalte ''Funktion'' der Wert ''SHA1'' eingetragen werden, damit das Passwort beim Speichern verschlüsselt wird. In der Spalte ''Wert'' trägt man das neue Passwort im Klartext ein (in diesem Fall soll das neue Passwort ''contaowiki'' lauten).<br />
<br />
[[Datei:adminpwd-newpwdv1.png|Neues Passwort eintragen Variante 1]]<br />
<br />
Die neue Eingabe speichert man anschließend am Ende der Seite mit einem Klick auf den Button ''OK'' ab.<br />
<br />
[[Datei:adminpwd-newpwdsave.png|Eingabe speichern]]<br />
<br />
'''Variante 2''' ist die verschlüsselte Eingabe. Hier wird das Passwort vorher mit einem SHA1-Passwort Generator (div. Generatoren sind über Google zu finden) verschlüsselt. Das verschlüsselte Password wird anschließend in der Spalte ''Wert'' eingetragen; das Feld in der Spalte ''Funktion'' bleibt leer.<br />
Der Wert ''8e0107bf1c7fbeef6538dff7173aa458e7dd585e:8c37627a0e2c606189e7765'' entspricht dem Passwort ''reset123''. Anschliessend kann im Contao-Backend bei der Benutzereinstellung einfach ein neues Passwort gesetzt werden.<br />
<br />
[[Datei:adminpwd-newpwdv2.png|Neues Passwort eintragen Variante 2]]<br />
<br />
Die Eingabe speichert man anschließend wie bei Variante 1 mit einem Klick auf den Button ''OK'' ab.<br />
<br />
Das neue Passwort ist somit gesetzt. Jedoch ist es noch sinnvoll, sich 2 weitere Felder anzusehen:<br />
<br />
'''loginCount:''' Das Feld ''loginCount'' zählt die fehlgeschlagenen Anmeldeversuche. Standardmäßig ist der Wert 3 eingetragen. Pro fehlgeschlagenen Anmeldeversuch wird -1 gerechnet, also 3-2-1-0.<br />
<br />
'''locked:''' Das Feld ''locked'' hat als Standardwert 0. Wird das Passwort zum vierten mal falsch eingegeben, wird in diesem Feld die Zeit der falschen Eingabe in [[w:de:Unixzeit|Unixzeit]] gespeichert.<br />
<br />
Bild eines '''nicht''' gesperrten Accounts:<br />
<br />
[[Datei:adminpwd-pwdfalse0.png|Nicht gesperrter Account]]<br />
<br />
Bild eines Accounts nach der '''dritten''' fehlgeschlagenen Passwort-Eingabe:<br />
<br />
[[Datei:adminpwd-pwdfalse3.png|Nach der dritten fehlerhaften Eingabe]]<br />
<br />
Bild eines '''gesperrten''' Accounts nach der '''vierten''' fehlgeschlagenen Passwort-Eingabe:<br />
<br />
[[Datei:adminpwd-pwdfalse4.png|Nach der vierten fehlerhaften Eingabe]]<br />
<br />
Soviel zur Erklärung. Das bedeutet nun soviel, dass die 2 Felder auf die Standard-Belegung gesetzt werden sollten. Dazu bearbeitet man wieder den Datensatz (siehe oben) und ändert (falls notwendig) den Wert des Feldes ''loginCount'' auf 3 und den Wert des Feldes ''locked'' auf 0...<br />
<br />
[[Datei:adminpwd-disablelock.png|Accountsperre aufheben]]<br />
<br />
... und speichert die Eingabe ab.<br />
<br />
Somit ist ein neues Admin-Passwort vergeben und die Sperre des Accounts aufgehoben.</div>Manitougshttps://de.contaowiki.org/SyncCtoSyncCto2011-06-09T19:41:24Z<p>Manitougs: /* Mögliche Problemfälle */ Typo</p>
<hr />
<div>[[Category:Extensions]]<br />
Mit '''syncCto''' kann der Benutzer im Backend mehrere Contao-Installationen miteinander synchronisieren.<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=ab 2.9<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/syncCto.html<br />
| TrackerLink=http://contao-forge.de/projects/synccto/issues<br />
}}<br />
<br />
==Was ist syncCto?==<br />
<br />
syncCto bietet die Möglichkeit mehrere Contao-Installationen auf Basis einer Grund-Installation zu synchronisieren. Alle Aktionen können bequem im Backend durchgeführt werden. Durch die Integration in das Contao Rechtesystem können auch Redakteure eine Auswahl vorher definierter Datenbank-Tabellen und Dateien synchronisieren.<br />
<br />
Ein integrierter Backup-Manager sichert ausgewählte Datenbank-Tabellen, wahlweise die gesamte Contao-Installation oder nur die persönlichen Daten. Angelegte Backups können durch den Backup-Manager auch wieder importiert werden.<br />
<br />
Durch die Verwendung von syncCto können Redakteure schnell und einfach in einem Preview-System arbeiten und bei Vollendung der Arbeit den aktuellen und freigegebenen Stand zum Live-System synchronisieren.<br />
<br />
==Konfiguration==<br />
<br />
===Systemcheck===<br />
<br />
Für eine reibungslose und fehlerfreie Synchronisation ist es wichtig als erstes alle Installationen zu kontrollieren. Dafür steht der neue Menüpunkt Systemcheck zur Verfügung, denn dort werden alle für syncCto wichtigen Funktionen und Ressourcen des Servers aufgelistet. Sind alle Zellen grün, ist der erste Schritt getan. Sollte dies nicht der Fall sein, kann syncCto womöglich nicht erfolgreich funktionieren.<br />
<br />
===Einstellungen===<br />
<br />
Bevor man die erste Installation synchronisieren kann, muss zwingend bei allen Installationen auf denen syncCto installiert ist, der Menüpunkt Einstellungen (nicht zu verwechseln mit den Contao Einstellungen) aufgerufen und gespeichert werden. Bei diesem Vorgang wird der Verschlüsselungsschlüssel generiert. Der Verschlüsselungsschlüssel aus den Einstellungen des Clients benötigt man später bei der Erstellung des zuvor erwähnten Clients.<br />
<br />
==Clients verwalten==<br />
<br />
Um einen neuen Client anzulegen, klickt man im Menüpunkt Clients einfach auf den Button "Neuer Client".<br />
<br />
* '''Titel:''' z.B. der Kundenname und der Name des Servers<br />
* '''Beschreibung:''' Eine aussagekräftige Beschreibung des Servers<br />
* '''Adresse:''' Der Pfad zum TL_ROOT der Contao Installation, z.B. http://www.example.com<br />
* '''Benutzername:''' Der Benutzername mit dem man sich im Backend einloggt<br />
* '''Passwort:''' Das zum Benutzer zugehörige Passwort (wird verschlüsselt gespeichert)<br />
* '''Verschlüsselungsschlüssel:''' Hier gehört nun der Schlüssel aus den Einstellungen des Clients hinein<br />
<br />
==Synchronisation==<br />
<br />
Um den Client mit dem Server zu synchronisieren, klickt man beim entsprechenden Client auf den rechten Button "Client synchronisieren". Im nächsten Fenster wählt man die Synchronisationsart aus.<br />
<br />
* '''Contao-Installation:''' Die gesamte Contao-Installation, Dateien und Ordner in den tl_files müssen seperat ausgewählt werden<br />
* '''Persönliche Daten:''' Nur ausgewählte Dateien und Ordner im tl_files Ordner. Core-Dateien werden nicht berücksichtigt<br />
<br />
Standardmäßig ist die Option '''Persönliche Daten''' ausgewählt.<br /><br />
Danach kann man die DB-Tabellen auswählen. Man muss in diesem Schritt wissen welche Tabellen welche Daten enthält. Zum Schluss wählt man bei Bedarf noch Dateien und Ordner im tl_files aus und klickt für den Start der Synchronisation auf den Button "Client synchronisieren".<br />
<br />
==Backups==<br />
<br />
Backups können im Backend unter dem Menüpunkt Backups angelegt und wiederhergestellt werden. Alle Backups werden im automatisch angelegten Ordner "syncCto_backups" in den tl_files abgelegt. Datenbanken finden sich im Ordner "database" und Dateien im Ordner "files". Wenn man Backups wieder einspielen möchte, klickt man im Menüpunkt auf Backups und wählt die Art der Wiederherstellung. Im nächsten Schritt wählt man die entsprechende Datei aus und klickt auf "Wiederherstellen". Die Dateien oder die Datenbank auf dem Server werden danach mit den Daten aus dem Backup überschrieben.<br />
<br />
===Backups automatisiert löschen===<br />
<br />
Ab der Version 1.1.0 liegen der Extension zwei neue Cronjobs bei. Die Cronjobs löschen in Verbindung mit der Extension [http://www.contao.org/erweiterungsliste/view/cron.html Cron] automatisiert die Backups aus dem jeweiligen Ordner. Bei der Konfiguration der Cronjobs muss man den Link zum PHP-Script eingeben und den Intervall einstellen.<br />
<br />
Zur Verfügung stehen folgende zwei PHP-Skripte:<br />
<br />
* '''SyncCtoDeleteDbBackups.php''' Löscht alle Datenbank-Backups<br />
* '''SyncCtoDeleteFileBackups.php''' Löscht alle Datei-Backups<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs.jpg|Konfiguration der Cronjobs|frame|center]]<br />
<br />
Die Backups werden mit dieser Einstellung alle 7 Tage um genau 0:00 gelöscht. Möchte man den Zeitraum erhöhen, muss man */7 einfach gegen die Zahl austauschen. */14 löscht die Backups beispielsweise alle 14 Tage.<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs-2.jpg|Konfiguration zum Ausführen der Cronjobs|frame|center]]<br />
<br />
Nach Fertigstellung könnten die Cronjobs folgendermaßen aussehen:<br />
<br />
[[Datei:SyncCto-Cronjob.jpg|Übersicht Cronjobs|frame|center]]<br />
<br />
==Anwendungsfall 1==<br />
<br />
Auf dem Webserver laufen zwei Contao-Installationen.<br />
<br />
* Die Adresse der 1. Webseite heißt ''<nowiki>http://192.168.0.100/server/</nowiki>''<br />
* Die Adresse der 2. Webseite heißt ''<nowiki>http://192.168.0.100/client/</nowiki>''<br />
<br />
Der Server, bei syncCto, beschreibt immer die Installation die alle Informationen hat, die man auf eine andere Installation übertragen will. Dieses Ziel wird bei syncCto als Client beschrieben. Server und Client laufen also auf der gleichen Maschine auf den gleichen Webserver. <br />
<br />
==Anwendungsfall 2==<br />
<br />
Es gibt 2 Seiten die auf zwei verschiedenen Maschinen laufen. Beide Maschinen sind verbunden; egal ob nun im lokalen Netzwerk oder über das Internet. Dabei ist es wichtig das der Server den Client erreichen kann. Der Server kann lokal zuhause auf dem internen Webserver laufen. Der Client allerdings muss von außen erreichbar sein.<br />
<br />
* Server läuft lokal zuhause die Adresse ist ''<nowiki>http://192.168.0.100/server</nowiki>''<br />
* Der Client liegt im Internet und hat die Adresse ''<nowiki>http://www.example.com</nowiki>''<br />
<br />
So wird im Server für den Client einfach die Adresse ''<nowiki>http://www.example.com</nowiki>'' eingetragen.<br />
<br />
==Mögliche Problemfälle==<br />
<br />
Der SMH ist keine Lösung da die Daten via HTTP versendet werden. Ein ordentlich konfigurierter Server ist daher Pflicht.<br />
<br />
Sollten trotz eines guten [[#Systemcheck|Systemchecks]] und richtiger Schreibrechte eine Fehlermeldung kommen, hat man die Möglichkeit den Debugmodus zu aktivieren. In der config.php den Eintrag '''SYNCCTO_DEBUG''' von 0 auf 1 stellen. Es sollte nun eine debug.txt im Ordner syncCto_backups/debug erstellt werden. Diese kann unter Umständen einige Fragen lösen.</div>Manitougshttps://de.contaowiki.org/SyncCtoSyncCto2011-06-09T19:40:40Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Extensions]]<br />
Mit '''syncCto''' kann der Benutzer im Backend mehrere Contao-Installationen miteinander synchronisieren.<br />
{{ExtInfo<br />
| DevSite=http://www.men-at-work.de<br />
| ExtVersion=1.0.0<br />
| Version=ab 2.9<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/syncCto.html<br />
| TrackerLink=http://contao-forge.de/projects/synccto/issues<br />
}}<br />
<br />
==Was ist syncCto?==<br />
<br />
syncCto bietet die Möglichkeit mehrere Contao-Installationen auf Basis einer Grund-Installation zu synchronisieren. Alle Aktionen können bequem im Backend durchgeführt werden. Durch die Integration in das Contao Rechtesystem können auch Redakteure eine Auswahl vorher definierter Datenbank-Tabellen und Dateien synchronisieren.<br />
<br />
Ein integrierter Backup-Manager sichert ausgewählte Datenbank-Tabellen, wahlweise die gesamte Contao-Installation oder nur die persönlichen Daten. Angelegte Backups können durch den Backup-Manager auch wieder importiert werden.<br />
<br />
Durch die Verwendung von syncCto können Redakteure schnell und einfach in einem Preview-System arbeiten und bei Vollendung der Arbeit den aktuellen und freigegebenen Stand zum Live-System synchronisieren.<br />
<br />
==Konfiguration==<br />
<br />
===Systemcheck===<br />
<br />
Für eine reibungslose und fehlerfreie Synchronisation ist es wichtig als erstes alle Installationen zu kontrollieren. Dafür steht der neue Menüpunkt Systemcheck zur Verfügung, denn dort werden alle für syncCto wichtigen Funktionen und Ressourcen des Servers aufgelistet. Sind alle Zellen grün, ist der erste Schritt getan. Sollte dies nicht der Fall sein, kann syncCto womöglich nicht erfolgreich funktionieren.<br />
<br />
===Einstellungen===<br />
<br />
Bevor man die erste Installation synchronisieren kann, muss zwingend bei allen Installationen auf denen syncCto installiert ist, der Menüpunkt Einstellungen (nicht zu verwechseln mit den Contao Einstellungen) aufgerufen und gespeichert werden. Bei diesem Vorgang wird der Verschlüsselungsschlüssel generiert. Der Verschlüsselungsschlüssel aus den Einstellungen des Clients benötigt man später bei der Erstellung des zuvor erwähnten Clients.<br />
<br />
==Clients verwalten==<br />
<br />
Um einen neuen Client anzulegen, klickt man im Menüpunkt Clients einfach auf den Button "Neuer Client".<br />
<br />
* '''Titel:''' z.B. der Kundenname und der Name des Servers<br />
* '''Beschreibung:''' Eine aussagekräftige Beschreibung des Servers<br />
* '''Adresse:''' Der Pfad zum TL_ROOT der Contao Installation, z.B. http://www.example.com<br />
* '''Benutzername:''' Der Benutzername mit dem man sich im Backend einloggt<br />
* '''Passwort:''' Das zum Benutzer zugehörige Passwort (wird verschlüsselt gespeichert)<br />
* '''Verschlüsselungsschlüssel:''' Hier gehört nun der Schlüssel aus den Einstellungen des Clients hinein<br />
<br />
==Synchronisation==<br />
<br />
Um den Client mit dem Server zu synchronisieren, klickt man beim entsprechenden Client auf den rechten Button "Client synchronisieren". Im nächsten Fenster wählt man die Synchronisationsart aus.<br />
<br />
* '''Contao-Installation:''' Die gesamte Contao-Installation, Dateien und Ordner in den tl_files müssen seperat ausgewählt werden<br />
* '''Persönliche Daten:''' Nur ausgewählte Dateien und Ordner im tl_files Ordner. Core-Dateien werden nicht berücksichtigt<br />
<br />
Standardmäßig ist die Option '''Persönliche Daten''' ausgewählt.<br /><br />
Danach kann man die DB-Tabellen auswählen. Man muss in diesem Schritt wissen welche Tabellen welche Daten enthält. Zum Schluss wählt man bei Bedarf noch Dateien und Ordner im tl_files aus und klickt für den Start der Synchronisation auf den Button "Client synchronisieren".<br />
<br />
==Backups==<br />
<br />
Backups können im Backend unter dem Menüpunkt Backups angelegt und wiederhergestellt werden. Alle Backups werden im automatisch angelegten Ordner "syncCto_backups" in den tl_files abgelegt. Datenbanken finden sich im Ordner "database" und Dateien im Ordner "files". Wenn man Backups wieder einspielen möchte, klickt man im Menüpunkt auf Backups und wählt die Art der Wiederherstellung. Im nächsten Schritt wählt man die entsprechende Datei aus und klickt auf "Wiederherstellen". Die Dateien oder die Datenbank auf dem Server werden danach mit den Daten aus dem Backup überschrieben.<br />
<br />
===Backups automatisiert löschen===<br />
<br />
Ab der Version 1.1.0 liegen der Extension zwei neue Cronjobs bei. Die Cronjobs löschen in Verbindung mit der Extension [http://www.contao.org/erweiterungsliste/view/cron.html Cron] automatisiert die Backups aus dem jeweiligen Ordner. Bei der Konfiguration der Cronjobs muss man den Link zum PHP-Script eingeben und den Intervall einstellen.<br />
<br />
Zur Verfügung stehen folgende zwei PHP-Skripte:<br />
<br />
* '''SyncCtoDeleteDbBackups.php''' Löscht alle Datenbank-Backups<br />
* '''SyncCtoDeleteFileBackups.php''' Löscht alle Datei-Backups<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs.jpg|Konfiguration der Cronjobs|frame|center]]<br />
<br />
Die Backups werden mit dieser Einstellung alle 7 Tage um genau 0:00 gelöscht. Möchte man den Zeitraum erhöhen, muss man */7 einfach gegen die Zahl austauschen. */14 löscht die Backups beispielsweise alle 14 Tage.<br />
<br />
[[Datei:SyncCto-konfiguration-cronjobs-2.jpg|Konfiguration zum Ausführen der Cronjobs|frame|center]]<br />
<br />
Nach Fertigstellung könnten die Cronjobs folgendermaßen aussehen:<br />
<br />
[[Datei:SyncCto-Cronjob.jpg|Übersicht Cronjobs|frame|center]]<br />
<br />
==Anwendungsfall 1==<br />
<br />
Auf dem Webserver laufen zwei Contao-Installationen.<br />
<br />
* Die Adresse der 1. Webseite heißt ''<nowiki>http://192.168.0.100/server/</nowiki>''<br />
* Die Adresse der 2. Webseite heißt ''<nowiki>http://192.168.0.100/client/</nowiki>''<br />
<br />
Der Server, bei syncCto, beschreibt immer die Installation die alle Informationen hat, die man auf eine andere Installation übertragen will. Dieses Ziel wird bei syncCto als Client beschrieben. Server und Client laufen also auf der gleichen Maschine auf den gleichen Webserver. <br />
<br />
==Anwendungsfall 2==<br />
<br />
Es gibt 2 Seiten die auf zwei verschiedenen Maschinen laufen. Beide Maschinen sind verbunden; egal ob nun im lokalen Netzwerk oder über das Internet. Dabei ist es wichtig das der Server den Client erreichen kann. Der Server kann lokal zuhause auf dem internen Webserver laufen. Der Client allerdings muss von außen erreichbar sein.<br />
<br />
* Server läuft lokal zuhause die Adresse ist ''<nowiki>http://192.168.0.100/server</nowiki>''<br />
* Der Client liegt im Internet und hat die Adresse ''<nowiki>http://www.example.com</nowiki>''<br />
<br />
So wird im Server für den Client einfach die Adresse ''<nowiki>http://www.example.com</nowiki>'' eingetragen.<br />
<br />
==Mögliche Problemfälle==<br />
<br />
Der SMH ist keine Lösung da die Daten via HTTP versendet werden. Ein ordentlich konfigurierter Server ist daher Pflicht.<br />
<br />
Sollten trotz eines guten [[#Systemchecks|Systemcheck]] und richtiger Schreibrechte eine Fehlermeldung kommen, hat man die Möglichkeit den Debugmodus zu aktivieren. In der config.php den Eintrag '''SYNCCTO_DEBUG''' von 0 auf 1 stellen. Es sollte nun eine debug.txt im Ordner syncCto_backups/debug erstellt werden. Diese kann unter Umständen einige Fragen lösen.</div>Manitougshttps://de.contaowiki.org/FacebookFacebook2011-06-02T13:38:45Z<p>Manitougs: Aufbereitung</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
=Einleitung=<br />
Diese Anleitung soll dazu dienen, Facebook Plugins (Kommentare, Share, Like, ...) in eine Contao Seite einzubauen. Die Beispiele basieren auf dem Nachrichtensystem von Contao (kann jedoch auch einfach auf ein anderes Modul geändert werden - e.g Events).<br />
<br />
=Facebook Plugins via eigener Facebook App=<br />
Zuerst muss auf Facebook eine sog. Facebook App erstellt werden - diese kann man, sofern man sich als "Entwickler" bestätigt hat (kann via SMS vorgenommen werden), mit seinem Facebook Benutzerprofil erstellen.<br />
==Facebook==<br />
===Facebook App===<br />
Auf der [http://www.facebook.com/developers/createapp.php Facebook Entwicklerseite] folgt man den Anweisungen von Facebook (siehe Bilder).<br />
<br />
[[Datei:Fb-app-erstellen-001.jpg|Facebook Anwendung erstellen - Generelle Info|frame|center]]<br />
<br />
[[Datei:Fb-app-erstellen-002.jpg|Facebook Anwendung erstellen - Info|frame|center]]<br />
<br />
[[Datei:Fb-app-erstellen-003.jpg|Facebook Anwendung erstellen - Webseite|frame|center]]<br />
<br />
===Abschluss (seitens Facebook)===<br />
Nun hat man seine Facebook App erstellt und einige Informationen bekommen, welche man in Contao "verbauen" muss - hier eine Übersicht mit allen benötigten Informationen.<br />
<br />
<source lang="html4strict"><br />
<meta property="fb:app_id" content="......"/> (Facebook App ID - siehe Bild 3, rote Zahl)<br />
<meta property="fb:admins" content=""/> (deiner Benutzer ID vo Facebook - siehe Bild 2, zweite rote Beschriftung)<br />
</source><br />
<br />
Das wäre es vorerst von der Facebook Seite. Nun muss man das Ganze in Contao einbauen.<br />
<br />
==Contao CMS==<br />
Damit die Facebook Plugins richtig eingebunden werden können, müssen Templates angepasst und das Seitenlayout erweitert werden.<br />
<br />
===fe_page.tpl===<br />
Beim Template sollte der Doctype angepasst werden (u.a wegen Internet Explorer). Dazu [[Templates_bearbeiten|erstellt]] man im Backend ein neues "fe_page.tpl" Template. Der Name ist frei wählbar, muss jedoch mit ''fe_'' beginnen - in diesem Beispiel wird das Template "fe_page_facebook.tpl" benannt.<br />
<source lang="php"><br />
<?php echo $this->doctype; ?><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"><br />
</source><br />
muss geändert werden zu<br />
<source lang="php"><br />
<?php echo $this->doctype; ?><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?> xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/"><br />
</source><br />
<br />
Zusätzlich wurden noch folgende [http://developers.facebook.com/docs/opengraph/ Open Graph Tags] von Facebook in das Template eingetragen, welche dann mit den vorhanden Informationen ausgestattet werden (vor </head> Abschluss)<br />
<br />
<source lang="html4strict"><br />
<meta property="og:title" content="<?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?>"/><br />
<meta property="og:type" content="blog"/> (Art der Seite - blog, news, ...)<br />
<meta property="og:site_name" content="..."/> (Seitenname)<br />
<meta property="og:description" content="<?php echo $this->description; ?>"/><br />
</source><br />
<br />
===Seitenlayout===<br />
Bevor man die anderen [[Templates_bearbeiten|Templates]] bearbeitet, sollte das Seitenlayout mit den Facebook Informationen ([[Facebook#Abschluss_.28seitens_Facebook.29|2.1.2 Abschluss (seitens Facebook]]) befüllt werden.<br />
<br />
'''Zusätzliche <head>-Tags'''<br />
<source lang="html4strict"><br />
<meta property="fb:app_id" content="......"/><br />
<meta property="fb:admins" content=""/><br />
</source><br />
<br />
'''Eigener JavaScript-Code'''<br />
<source lang="html4strict"><br />
<!-- // Facebook App und JS - Start // --><br />
<div id="fb-root"></div> <br />
<script src="http://connect.facebook.net/en_US/all.js"></script> <br />
<script type="text/javascript"> <br />
<!--//--><![CDATA[//><!--<br />
FB.init({<br />
appId : '......', (Facebook App ID - siehe Bild X, Position Y)<br />
status : true, // check login status<br />
cookie : true, // enable cookies to allow the server to access the session<br />
xfbml : true // parse XFBML<br />
});<br />
//--><!]]><br />
</script> <br />
<!-- // Facebook App und JS - Ende // --><br />
</source><br />
<br />
===absolute Pfade für die Bilder via Modul===<br />
Wenn eine Seite auf Facebook "geteilt" wird, besteht die Möglichkeit ein Thumbnail auszuwählen. Facebook benötigt dazu (damit man ein Bild auswählen kann) absolute Pfade.<br />
Dazu benötigt man das Modul "wna_facebook" ([http://contao.silvanogiacomello.ch/module/wna_facebook/wna_facebook.zip Download hier]) (ist <s>noch</s> nicht im ER!).<br />
Sobald das Modul hochgeladen wurde, ist es aktiv und man kann, wenn man einen Link bei Facebook teilt, das Thumbnail auswählen.<br />
<br />
====Installation====<br />
Sobald man die folgenden Anpassungen ([[Facebook#Anpassungen_in_der_Datei_MyFacebookHack.php|2.2.3.2 Anpassungen in der Datei MyFacebookHack.php]]) getätigt hat, lädt man den komletten Ordner "wna_facebook" in seine Contao Installation unter ''system/modules'' hoch.<br />
<br />
====Anpassungen in der Datei MyFacebookHack.php====<br />
Folgende Anpassungen müssen gemacht werden, damit das Modul funktioniert:<br />
<br />
'''Falls man nicht das fe_page Template benutzt:'''<br />
<source lang="html4strict">if ($strTemplate != 'fe_page')<br />
</source><br />
<br />
'''Falls man den Ordner (tl_files) unbenannt hat:'''<br />
<source lang="html4strict">$arrSearch = array ( '="tl_files/', );<br />
</source><br />
<br />
'''den Pfad zum tl_files Ordner'''<br />
<source lang="html4strict">$arrReplace = array<br />
(<br />
'="http://www.domain.tld/tl_files/',<br />
);<br />
</source><br />
<br />
====Überprüfung der Funktion====<br />
Am einfachsten kann man die Thumbnail Funktion (resp. das Modul) überprüfen in dem man den [http://developers.facebook.com/tools/lint/ URL Linter] von Facebook verwendet. Eine URL eintragen und bei der Überprüfung sollte bei "Image" ein Bild angezeigt werden.<br />
<br />
===Facebook Plugin via HTML Modul einbinden===<br />
Die Facebook Plugins müssen nicht zwingend in die Templates eingebaut werden. Es können auch Module angelegt werden - so zum Beispiel ein HTML Modul. Wichtig dafür ist, das der jeweilige Tag von Facebook (<fb:comments> ; <fb:like> ; <fb:send> ; ...) im BE bei den "Einstellungen" unter "Erlaubte HTML-Tags" ("System" > "Einstellungen" > "Erlaubte HTML-Tags" ; Kategorie "Sicherheitseinstellungen") eingetragen wird, da sonst beim Speichern das HTML Modul leer bleibt, weil Contao es als nicht erlaubter HTML Tag betrachtet.<br />
<br />
==Facebook Kommentar Plugin==<br />
===Code===<br />
<source lang="html4strict"><br />
(...)<br />
<?php endif; ?><br />
<br />
<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments><br />
<br />
</div><br />
</source><br />
<br />
Sieht man sich das Kommentar Plugin etwas genauer an:<br />
<br />
{| border="1" cellspacing="0" cellpadding="5"<br />
! Code !! Beschreibung<br />
|-<br />
| <source lang="html4strict"><fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche als Link erscheint (auf dem eigenen Facebook Profil - Pinwand), wenn ein Kommentar geschrieben wurde (und die Option "Post to Facebook" aktivier ist beim Kommentarfeld).<br />
|-<br />
| <source lang="html4strict"><br />
(...) num_posts="10" (...)<br />
</source> || Wie viele Beiträge sollen als Standard angezeigt werden. Es wird am Ende eine "Box" angezeigt, um alle vorhandenen Kommentare anzuzeigen.<br />
|-<br />
| <source lang="html4strict"><br />
(...) width="600"></fb:comments><br />
</source> || Die Breite des kompletten Plugins.<br />
|}<br />
<br />
<br />
===komplettes Nachrichrichtenleser Template mit Kommentar Plugin===<br />
<source lang="html4strict"><br />
<div class="layout_full block<?php echo $this->class; ?>"><br />
<br />
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a><br />
<?php if ($this->hasMetaFields): ?><br />
<br />
<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p><br />
<?php endif; ?><br />
<?php if ($this->hasSubHeadline): ?><br />
<br />
<h2><?php echo $this->subHeadline; ?></h2><br />
<?php endif; ?><br />
<br />
<div class="ce_text"><br />
<?php if (!$this->addBefore): ?><br />
<br />
<?php echo $this->text; ?><br />
<?php endif; ?><br />
<?php if ($this->addImage): ?><br />
<br />
<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>><br />
<?php if ($this->href): ?><br />
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><br />
<?php endif; ?><br />
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><br />
<?php if ($this->href): ?><br />
</a><br />
<?php endif; ?><br />
<?php if ($this->caption): ?><br />
<div class="caption"><?php echo $this->caption; ?></div><br />
<?php endif; ?><br />
</div><br />
<?php endif; ?><br />
<?php if ($this->addBefore): ?><br />
<br />
<?php echo $this->text; ?><br />
<?php endif; ?><br />
<br />
</div><br />
<?php if ($this->enclosure): ?><br />
<br />
<div class="enclosure"><br />
<?php foreach ($this->enclosure as $enclosure): ?><br />
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p><br />
<?php endforeach; ?><br />
</div><br />
<?php endif; ?><br />
<br />
<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments><br />
<br />
</div><br />
</source><br />
<br />
====Anpassungen im Template für die Seite ====<br />
Folgende Stellen muss man im Code auf seine Seite anpassen:<br />
<br />
<source lang="html4strict"><br />
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source><br />
<br />
<source lang="html4strict"><br />
<fb:comments href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" num_posts="10" width="600"></fb:comments><br />
</source><br />
(siehe [[Facebook#Code_2|2.4.1 Code]] für Erklärung der Optionen)<br />
<br />
==Like resp. Send Plugin==<br />
===Code===<br />
<source lang="html4strict"><br />
(...)<br />
<h1><?php echo $this->newsHeadline; ?></h1><br />
<?php if ($this->hasMetaFields): ?><br />
<br />
<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p><br />
<?php endif; ?><br />
<?php if ($this->hasSubHeadline): ?><br />
<br />
<h2><?php echo $this->subHeadline; ?></h2><br />
<?php endif; ?><br />
<br />
<fb:like href="http://domain-zur-contao-installation.tld<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like><br />
<br />
<div class="ce_text"><br />
<?php if (!$this->addBefore): ?><br />
(...)<br />
</source><br />
<br />
Sieht man sich die Like resp. Send Funktion etwas genauer an:<br />
<br />
{| border="1" cellspacing="0" cellpadding="5"<br />
! Code !! Beschreibung<br />
|-<br />
| <source lang="html4strict"><fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche "geliked" und/oder "gesendet" werden soll - direkte Adresse zum Beitrag<br />
|-<br />
| <source lang="html4strict"><br />
(...) send="true" (...)<br />
</source> || Soll neben "Like" auch die "Send" Funkton aktiviert sein<br />
|-<br />
| <source lang="html4strict"><br />
(...) width="450"> (...)<br />
</source> || Breite des ganzen Facebook Plugin in Pixel<br />
|-<br />
| <source lang="html4strict"><br />
(...) show_faces="false" (...)<br />
</source> || Ob bei einem "like" das Profilbild des jeweiligen "likers" angezeigt werden soll<br />
|-<br />
| <source lang="html4strict"><br />
(...) font=""></fb:like> <br />
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana<br />
|}<br />
<br />
===komplettes Nachrichrichtenleser Template mit Like Plugin===<br />
<source lang="html4strict"><br />
<div class="layout_full block<?php echo $this->class; ?>"><br />
<br />
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a><br />
<?php if ($this->hasMetaFields): ?><br />
<br />
<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p><br />
<?php endif; ?><br />
<?php if ($this->hasSubHeadline): ?><br />
<br />
<h2><?php echo $this->subHeadline; ?></h2><br />
<?php endif; ?><br />
<br />
<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like><br />
<br />
<div class="ce_text"><br />
<?php if (!$this->addBefore): ?><br />
<br />
<?php echo $this->text; ?><br />
<?php endif; ?><br />
<?php if ($this->addImage): ?><br />
<br />
<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>><br />
<?php if ($this->href): ?><br />
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><br />
<?php endif; ?><br />
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><br />
<?php if ($this->href): ?><br />
</a><br />
<?php endif; ?><br />
<?php if ($this->caption): ?><br />
<div class="caption"><?php echo $this->caption; ?></div><br />
<?php endif; ?><br />
</div><br />
<?php endif; ?><br />
<?php if ($this->addBefore): ?><br />
<br />
<?php echo $this->text; ?><br />
<?php endif; ?><br />
<br />
</div><br />
<?php if ($this->enclosure): ?><br />
<br />
<div class="enclosure"><br />
<?php foreach ($this->enclosure as $enclosure): ?><br />
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['title']; ?>" class="mime_icon" /> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p><br />
<?php endforeach; ?><br />
</div><br />
<?php endif; ?><br />
<br />
</div><br />
</source><br />
<br />
====Anpassungen im Template für seine Seite ====<br />
Folgende Stellen muss man im Code auf seine Seite anpassen:<br />
<br />
<source lang="html4strict"><br />
<a href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" title=""><h1><?php echo $this->newsHeadline; ?></h1></a></source><br />
<br />
<br />
<source lang="html4strict"><br />
<fb:like href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" send="true" width="450" show_faces="false" font=""></fb:like><br />
</source><br />
(siehe [[Facebook#Code|2.3.1 Code]] für Erklärung der Optionen) <br />
<br />
==andere Facebook Plugins==<br />
Auf das Einbinden der Plugins wird nicht weiter eingegangen - die obigen beiden Beispiele sollten reichen - daher wird ab hier (Punkte X.X) nur noch der Facebook Code gezeigt.<br />
===Facebook Send Plugin===<br />
====Code====<br />
<source lang="html4strict"><br />
<fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" font=""></fb:send><br />
</source><br />
<br />
Sieht man sich das Send Plugin etwas genauer an:<br />
<br />
{| border="1" cellspacing="0" cellpadding="5"<br />
! Code !! Beschreibung<br />
|-<br />
| <source lang="html4strict"><fb:send href="http://domain-zur-contao-installation.tld/<?php echo $this->link; ?>" (...)</source> || Pfad respektive Internetadresse der Seite, welche als Link erscheint (in der Nachricht)<br />
|-<br />
| <source lang="html4strict"><br />
(...) font=""></fb:send><br />
</source> || Schriftart des Facebook Plugins. Folgende Schriftarten werden seitens Facebook unterstützt: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana<br />
|}<br />
===weitere Plugins===<br />
Das Einbinden sowie der Code der Facebook Plugins sind untereinander sehr identisch - daher wird darauf verzichtet, alle Facebook Plugins hier zu erwähnen. Es gibt noch weitere [https://developers.facebook.com/docs/plugins/ Facebook Plugins].<br />
<br />
[https://developers.facebook.com/docs/reference/plugins/like/ Like Button], [https://developers.facebook.com/docs/reference/plugins/send/ Send Button], [https://developers.facebook.com/docs/reference/plugins/comments/ Comments], [https://developers.facebook.com/docs/reference/plugins/activity/ Activity Feed], [https://developers.facebook.com/docs/reference/plugins/recommendations/ Recommendations], [https://developers.facebook.com/docs/reference/plugins/like-box/ Like Box], [https://developers.facebook.com/docs/reference/plugins/facepile/ Faccepile], [https://developers.facebook.com/docs/reference/plugins/live-stream/ Live Stream]<br />
<br />
Die Plugins [https://developers.facebook.com/docs/plugins/registration/ Registration] und [https://developers.facebook.com/docs/reference/plugins/login/ Login Button] werden in diesem Wiki Eintrag nicht erwähnt, da diese nicht "einfach so" eingebunden werden können.<br />
<br />
=andere Facebook Plugins (ohne eigene Facebook App)=<br />
==Facebook Like Button==<br />
Wie man generell einen Likebutton integriert, findet man in den [http://developers.facebook.com/docs/reference/plugins/like/ Facebook Developer Docs]. Aber um diesen Button '''korrekt''' einzubinden benötigt man ein wenig mehr, sogenannte [http://developers.facebook.com/docs/opengraph/ Open Graph Tags], die im Headbereich eingebunden werden. Diese Angaben liefern Facebook die gewünschten Informationen. So kann man die Darstellung auf Facebook gut kontrollieren.<br />
<br />
'''Folgende Werte sind quasi Pflichtangaben.'''<br />
<source lang="html4strict"><br />
<meta property="og:title" content=""/> <br />
<meta property="og:type" content=""/><br />
<meta property="og:url" content=""/><br />
<meta property="og:site_name" content=""/><br />
<meta property="og:image" content=""/><br />
<meta property="fb:admins" content=""/> (Benutzer IDs von Admins der Fanpage) oder <meta property="fb:app_id" content=""/><br />
</source><br />
<br />
Es empfiehlt sich grundsätzlich immer auch noch description mitzugeben.<br />
<source lang="html4strict"><br />
<meta property="og:description" content=""/> <br />
</source><br />
<br />
Alle Felder bis auf og:image können im Seitentemplate leicht via [http://www.contao.org/inserttags.html Inserttags] befüllt werden. Aber gerade beim Imagetag ist es wichtig korrekt zu befüllen, da Facebook sonst irgendein Bild der Seite, meistens das Falsche, oder auch gar keins nimmt. Beide Fälle sind nicht sonderlich schön. Man muss also aus den globalen Variablen das Vorschaubild z.B. für News auslesen. <br />
<br />
Folgender Code muss ganz oben in das Readertemplate (per Default news_full.tpl).<br />
<br />
<source lang="php"><br />
<?php $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->singleSRC.'" />'; ?> <br />
</source><br />
<br />
Damit wird das Bild, welches bei der News im Backend gewählt wurde, als Thumbnail für Facebook ausgegeben. <br />
<br />
Das Ganze funktioniert übrigens auch bei allen anderen Readertemplates z.B. Catalog. In diesem Fall kann der Pfad zur Bildvariable anders sein. Dies kann man aber in der Ausgabe von $globals nachsehen.<br />
<br />
Am Ende man mit dem [http://developers.facebook.com/tools/lint/ Linter] testen wie Facebook die Seite parsen würde.<br />
<br />
Einen Diskussionsbeitrag im Forum findet man [http://www.contao-community.de/showthread.php?18218-Ausgaben-im-Headbereich-Meta-Tags-f%FCr-Facebook&p=130301 hier].<br />
<br />
=bekannte Probleme=<br />
==Fallback Sprache ==<br />
Wenn man einen Link teilen möchte und es erscheint oft nur der Text und kein Bild dazu, kann es sein, das man beim Startpunkt seiner Seite im BE den Hacken "Sprachen-Fallback" (Kategorie "DNS-Einstellungen") nicht aktiviert hat.</div>Manitougshttps://de.contaowiki.org/Wartungsmodus_mit_exclusiven_ZugriffWartungsmodus mit exclusiven Zugriff2011-06-02T12:23:37Z<p>Manitougs: Erweiterung "Maintenance" erwähnt</p>
<hr />
<div>[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]{{AppliesTo<br />
|TLVersion=ab 2.7<br />
|Version=ab 2.9<br />
}}<br />
Diese Anleitung beschreibt, wie man einen Wartungsmodus erstellt und trotzdem Kunden und sich selbst Zugang zur Seite bietet.<br />
<br />
Befindet sich eine Seite online im Aufbau und ein Kunde soll sich Anpassungen anschauen können, jedoch normale Besucher und Suchmaschinen nicht, ist es durch diese kleinen Anpassungen möglich, dies zu verwirklichen.<br />
<br />
Aufbau einer geheimen Landingpage, die ein Cookie im Browser setzt. Diese kann zusätzlich noch via htaccess-Passwort geschützt werden.<br />
<br />
<source lang="php"><br />
<?php setcookie('gesicherteSeite', 'halloWelt'); ?><br />
<html><br />
<br />
Ihr <a href="http://example.com">Zugang zu example.com</a> wurde gewaehrt!<br />
Sobald Sie Ihren Browser schliessen, sind Sie wieder abgemeldet.<br />
<br />
</html><br />
</source><br />
<br />
Man kann dem Kunden nun diesen Link mitteilen. Wird diese Seite dann aufgerufen, wird ein Cookie im Browser gesetzt.<br />
<br />
Jetzt nur noch in der fe_page.tpl eine kleine Anpassung in der ersten Zeile:<br />
<br />
<source lang="php"><br />
<?php if ($_COOKIE["gesicherteSeite"] != "halloWelt") $this->redirect("http://www.contao.org"); ?><br />
</source><br />
<br />
Somit wird beim Aufruf der eigentlichen Webseite (des Frontends) kontrolliert, ob das Cookie gesetzt ist. Wenn ja, geht alles normal weiter und der Kunde kann die normale Webseite sehen. Ist das Cookie nicht vorhanden, wird direkt auf eine andere Seite umgeleitet, in diesem Falle auf contao.org. Das Backend ist unbetroffen ... bis man die Frontend-Vorschau aufruft, dann muß ebenfalls das Cookie gesetzt sein.<br />
<br />
{{msgInfo|Das Cookie sollte auch noch die Domain enthalten (damit das Cookie garantiert nur an die zu schützende Domain example.com geliefert wird) und es könnte auch eine Verfallszeit haben. Dies ist hier nicht gezeigt. Nachzulesen hier : http://php.net/manual/de/function.setcookie.php}}<br />
<br />
=Erweiterung "Maintenance"=<br />
Es gibt mittlerweile eine eigene Erweiterung namens "[[Maintenance]]", mit der man eine Seite in einen Wartungsmodus stellen und selektierten Mitgliedern mittels Login trotzdem Zugriff auf die Seite gewähren kann.</div>Manitougs