{{AppliesTo
|Version=Alle Versionen}}
[[Category:CSS HOWTOS]]
[[Datei:Css-pagination.png]]
Dieses Beispiel zeigt die Formatierung einer Pagination mit einem Trenner zwischen den Nummern. In diesem Fall ein &middot; "·". Der schwierige Teil ist wahrscheinlich das Ansprechen der ersten Nummer.
<source lang="css">
.pagination ul,
.pagination li {
margin: 0;
padding: 0;
list-style: none;
}
.pagination li {
float: left;
}
/* alle Items */
.pagination a,
.pagination span {
display: block;
padding: 5px;
}
/* alle Nummern */
.pagination a.link,
.pagination span {
padding-left: 10px;
position: relative;
}
.pagination a.link:before,
.pagination span:before {
content: "·"; /* · */
position: absolute;
left: 0;
}
/* erste Nummer wieder zurücksetzen */
.pagination li[class] + li a.link,
.pagination li:first-child a.link,
.pagination li[class] + li span,
.pagination li:first-child span {
padding-left: 5px;
}
.pagination li[class] + li a.link:before,
.pagination li:first-child a.link:before,
.pagination li[class] + li span:before,
.pagination li:first-child span:before {
display: none;
}
</source>
--[[Benutzer:Andreas|Andreas Burg]] 14:54, 15. Apr. 2014 (CEST)

CSS für pagination

2014-04-15T12:54:15Z

Diskussion:Die erste Webseite - Header und Footer

2014-02-12T11:35:34Z

Andreas:

Eigentlich ging es mir in diesem Artikel genau darum insbesondere Anfänger davon abzuhalten eigenen HTML-Code in Module zu schreiben, so wie man es leider auch in der Contao-Demo "Music Academy" findet. Unter anderem und vor allem auch deshalb weil damit sicher gestellt ist, dass der HTML-Code immer fehlerfrei ist und den neuesten Standards entspricht. Deshalb finde ich den hinzugefügten Punkt "Alternativer Header" nicht so gut.

Wenn nichts dagegen spricht, werde ich den Teil demnächst wieder entfernen.

--[[Benutzer:Andreas|Andreas Burg]] 00:55, 12. Feb. 2014 (CET)

'''Da bin ich konform''' - vielleicht erbarmt sich allerdings jemand und schiebt den Schnipsel für den Header mach Snippets? Ist ja nicht falsch, nur eben nicht am richtigen Ort.

--[[Benutzer:Lucina|Lucina]] 08:51, 12. Feb. 2014 (CET)

Dann möchte ich ciaobello darum bitten das zu tun.

--[[Benutzer:Andreas|Andreas Burg]] 12:35, 12. Feb. 2014 (CET)

Diskussion:Die erste Webseite - Header und Footer

2014-02-12T11:35:21Z

Andreas:

Eigentlich ging es mir in diesem Artikel genau darum insbesondere Anfänger davon abzuhalten eigenen HTML-Code in Module zu schreiben, so wie man es leider auch in der Contao-Demo "Music Academy" findet. Unter anderem und vor allem auch deshalb weil damit sicher gestellt ist, dass der HTML-Code immer fehlerfrei ist und den neuesten Standards entspricht. Deshalb finde ich den hinzugefügten Punkt "Alternativer Header" nicht so gut.

Wenn nichts dagegen spricht, werde ich den Teil demnächst wieder entfernen.

--[[Benutzer:Andreas|Andreas Burg]] 00:55, 12. Feb. 2014 (CET)

'''Da bin ich konform''' - vielleicht erbarmt sich allerdings jemand und schiebt den Schnipsel für den Header mach Snippets? Ist ja nicht falsch, nur eben nicht am richtigen Ort.

--[[Benutzer:Lucina|Lucina]] 08:51, 12. Feb. 2014 (CET)

Dann möchte ich ciaobello darum bitten das zu tun.
--[[Benutzer:Andreas|Andreas Burg]] 12:35, 12. Feb. 2014 (CET)

Diskussion:Die erste Webseite - Header und Footer

2014-02-11T23:55:51Z

Andreas: Nicht zufrieden mit Änderung

Die erste Webseite - Header und Footer

2014-02-11T23:48:48Z

Andreas:

[[Category:Erste Schritte]]
{{AppliesTo
|Version=Alle Versionen}}
--[[Benutzer:Andreas|Andreas Burg]] 00:48, 12. Feb. 2014 (CET)
== Einleitung ==
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.

== Neue Seite RESOURCES ==
Als erstes erstellt man eine neue Seite "RESOURCES", welche '''nicht''' veröffentlicht wird.
[[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]]

== Artikel "Header" ==
Unter Inhalte --> Artikel sieht man, dass automatisch ein Artikel "RESOURCES" erstellt wurde.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel.png|Artikel - Contao 2.9.3|frame|center]]
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.

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".
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel_Header.png|Artikel umbenennen - Contao 2.9.3|frame|center]]
Den Artikelalias "resources" entfernt man, damit beim Speichern automatisch der Artikelalias "header" erzeugt wird.

=== Header Inhalt ===
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.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_CE_Header.png|CE Typ Text für den Header - Contao 2.9.3|frame|center]]

===Alternativer Header (Eigener HTML-Code)===
<source lang="php">

---------------------------

<h1><a href="{{env::path}}">{{page::rootTitle}}</a></h1>


CSS
------------------------------
#header h1 {
width:0px;
height:0px;
}

#header h1 a {
display:block;
width:inherit;
height:inherit;
text-indent:-99999px;
background:#fff url(../images/logo.jpg) no-repeat center center;
}

</source>

== Artikel "Footer" ==
In der Artikelübersicht erstellt man jetzt unterhalb des Artikels "Header" einen zweiten Artikel "Footer".
[[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]]
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Artikel_Footer.png|Artikel "Footer" benennen und veröffentlichen - Contao 2.9.3|frame|center]]

=== Footer Inhalt ===
Wieder wird in dem Artikel ein CE vom Typ ''Text'' erstellt. Diesmal mit dem Inhalt für den Footer.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_CE_Footer.png|CE Typ Text für den Footer - Contao 2.9.3|frame|center]]

== Module erstellen ==
Bis hierhin hat man jetzt eine unveröffentlichte 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.

Ü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.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Module.png|2 neue Module vom Typ "Eigener HTML-Code" - Contao 2.9.3|frame|center]]
In dem Feld "HTML-Code" benutzt man [[Insert-Tags]] um die entsprechenden Artikel auszugeben. Einmal insert_article::header und einmal insert_article::footer.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Modul_Header.png|Hier wird ein Artikel über einen Inserttag ausgegeben - Contao 2.9.3|frame|center]]
Um den Header und den Footer von der Contao-Suche auszuschließen gibt man am besten folgendes ein.
<source lang="html4strict">

{{insert_article::header}}



{{insert_article::footer}}

</source>
{{msgWarning|Ab Contao 3.1.3 kann man den Alias eines Artikels nicht mehr "header" bzw. "footer" nennen. Es wird automatisch "article-" davor geschrieben. Hier der Code für Contao ab 3.1.3
<source lang="html4strict">

{{insert_article::article-header}}



{{insert_article::article-footer}}

</source>
}}

== Module ausgeben ==
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.
Gleichzeitig ändert man noch die Höhe von Header und Footer, da diese in der Beispielseite ein wenig zu niedrig ausgefallen sind.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Layout.png|Das Standard-Layout wird verändert - Contao 2.9.3|frame|center]]

== Resultat ==
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.
[[Datei:Die_erste_Webseite_-_Header_und_Footer_-_Resultat.png|Ergebnis im FE - Contao 2.9.3|frame|center]]

Akkordeon horizontal

2013-12-07T04:46:34Z

Andreas: /* Version 2 (Text gedreht) */

{{AppliesTo
|Version=3.2.1}}
[[Category:Admin HOWTOS]]

= Horizontales Akkordeon mit Boardmitteln (MooTools) =
Livevorschau auf Codepen:<br />
[http://codepen.io/Aybee/pen/yrDBo codepen.io Version 1]<br />
[http://codepen.io/Aybee/pen/eqkCJ codepen.io Version 2 (Text gedreht)]

Anm.:<br />
Das hier unten sind nur Vorschaubilder.<br />
[[Datei:Akkordeon-horizontal.png|Version 1]]<br />
[[Datei:Akkordeon-horizontal-rotate.png|Version 2 (Text gedreht)]]<br />

== Ziel ==

Hohe schmale Akkordeon-Reiter stehen vertikal nebeneinander, und die Inhalte öffnen sich horizontal nach rechts.

Gestestet auf '''Windows XP''' mit
* FF 25.0.1
* Chrome 31.0
* Opera 12.16
* Safari 5.1.7
* IE7/8

== Umsetzung ==

Template '''moo_accordion_horizontal.html5''' als Kopie von '''moo_accordion.html5''' erstellen und im Layout anstatt moo_accordion auswählen.
CSS-Datei '''accordion.css''' erstellen und im Layout einbinden.

== Das Template ==

MooTools' '''Fx.Accordion''' bietet von Haus aus die Möglichkeit, anstatt der Höhe, die Breite der sich öffnenden Inhaltscontainer zu animieren. Dies wird hier genutzt.

Dazu werden die Optionen im Template geändert von
<source lang="javascript">
...
opacity: false,
alwaysHide: true,
...
</source>
nach
<source lang="javascript">
...
display: 0, // open first content element
opacity: false, // do not animate opacity (maybe there's a bug, as opacity is animated anyway)
alwaysHide: false, // don't close all content elements, it may look ugly for horizontal accordions
width: true, // animate the width
height: false, // don't animate the height
fixedWidth: 777, // set the width of the opening content element
...
</source>
Hier das komplette angepasste Template für Contao 3.2.1
<source lang="javascript">

<script>
(function($) {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
display: 0,
opacity: false,
alwaysHide: false,
width: true,
height: false,
fixedWidth: 777,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>

</source>

== CSS ==

Das CSS enthält jeweils 3 Blöcke (Zum Testen kann ein Block durch entfernen des letzten Slashes "/" in der Überschrift deaktiviert werden).
Dabei bedeutet:
* '''mandatory''' = Pflicht
* '''recommended''' = empfohlen
* '''custom''' = eigenes Design

Im endgültigen CSS sollten die Selektoren zusammengefasst werden, z.B. die ".toggler". Sie sind hier nur wegen ihrer unterschiedlichen Wichtigkeit separiert.

Um die Größenverhältnisse anzupassen finden sich im CSS folgende Werte
* '''Gesamthöhe''' = 333px
* '''Togglerbreite''' = 55px
* '''Inhaltsbreite''' = 777px

Wo man diese Werte findet muss man sie mit seinen eigenen Größen ersetzen (auch bei transform: matrix...). Im Template muss man für die Option '''fixedWidth''' den Wert der '''Inhaltsbreite''' angeben.

Das CSS beschränkt sich auf moderne Browser, damit es übersichtlicher und leichter nachzuvollziehen ist. Unter den Punkten '''Alte Browser''' findet man das CSS, welches für Browser bis runter zu IE7 zusätzlich geladen werden muss.

=== Version 1 ===

Anm.:
'''box-sizing''' wird von FF 25.0.1 noch nicht unterstützt. Deswegen hier der Präfix '''-moz-'''.
<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
height: 333px;
float: left;
overflow: hidden;
}
.toggler {
position: absolute;
width: 55px;
height: 333px;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.toggler {
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 333px;
background: linear-gradient(to right, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ie7 .toggler {
margin-left: -55px;
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: -webkit-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(left, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=1);
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

=== Version 2 (Text gedreht) ===

Anm.:
FF 25.0.1 unterstützt noch kein '''box-sizing''' ohne Präfix '''-moz-'''.
Chrome 31 unterstützt noch kein '''transform''' ohne Präfix '''-webkit-'''.
Deswegen hier Präfixe.
<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
float: left;
height: 333px;
min-width: 55px;
}
.toggler {
position: absolute;
width: 333px;
height: 55px;
-webkit-transform: matrix(0, -1, 1, 0, 0, 333);
transform: matrix(0, -1, 1, 0, 0, 333);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 55px;
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: linear-gradient(to bottom, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
-webkit-transform: matrix(0, -1, 1, 0, 0, 333);
-moz-transform: matrix(0, -1, 1, 0, 0px, 333px);
-ms-transform: matrix(0, -1, 1, 0, 0, 333);
-o-transform: matrix(0, -1, 1, 0, 0, 333);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
outline: none;
}
.ie7 .toggler {
margin-left: -55px;
noFocusLine: expression(this.onFocus=this.blur());
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
height: 293px; /* height (333) - 2 x padding (40) */
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: #333;
background: -webkit-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(top, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=0);
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>
--[[Benutzer:Andreas|Andreas Burg]] 01:35, 7. Dez. 2013 (CET)

2013-12-07T00:44:26Z

Andreas: /* CSS */

{{AppliesTo
|Version=3.2.1}}
[[Category:Admin HOWTOS]]

= Horizontales Akkordeon mit Boardmitteln (MooTools) =

[[Datei:Akkordeon-horizontal.png|Version 1]]
[[Datei:Akkordeon-horizontal-rotate.png|Version 2 (Text gedreht)]]

== Ziel ==

Hohe schmale Akkordeon-Reiter stehen vertikal nebeneinander, und die Inhalte öffnen sich horizontal nach rechts.

== Umsetzung ==

Template '''moo_accordion_horizontal.html5''' als Kopie von '''moo_accordion.html5''' erstellen und im Layout anstatt moo_accordion auswählen.
CSS-Datei '''accordion.css''' erstellen und im Layout einbinden.

== Das Template ==

MooTools' '''Fx.Accordion''' bietet von Haus aus die Möglichkeit, anstatt der Höhe, die Breite der sich öffnenden Inhaltscontainer zu animieren. Dies wird hier genutzt.

Dazu werden die Optionen im Template geändert von
<source lang="javascript">
...
opacity: false,
alwaysHide: true,
...
</source>
nach
<source lang="javascript">
...
display: 0, // open first content element
opacity: false, // do not animate opacity (maybe there's a bug, as opacity is animated anyway)
alwaysHide: false, // don't close all content elements, it may look ugly for horizontal accordions
width: true, // animate the width
height: false, // don't animate the height
fixedWidth: 777, // set the width of the opening content element
...
</source>
Hier das komplette angepasste Template für Contao 3.2.1
<source lang="javascript">

<script>
(function($) {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
display: 0,
opacity: false,
alwaysHide: false,
width: true,
height: false,
fixedWidth: 777,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>

</source>

== CSS ==

Das CSS enthält jeweils 3 Blöcke (Zum Testen kann ein Block durch entfernen des letzten Slashes "/" in der Überschrift deaktiviert werden).
Dabei bedeutet:
* '''mandatory''' = Pflicht
* '''recommended''' = empfohlen
* '''custom''' = eigenes Design

Im endgültigen CSS sollten die Selektoren zusammengefasst werden, z.B. die ".toggler". Sie sind hier nur wegen ihrer unterschiedlichen Wichtigkeit separiert.

Um die Größenverhältnisse anzupassen finden sich im CSS folgende Werte
* '''Gesamthöhe''' = 333px
* '''Togglerbreite''' = 55px
* '''Inhaltsbreite''' = 777px

Wo man diese Werte findet muss man sie mit seinen eigenen Größen ersetzen (auch bei transform: matrix...). Im Template muss man für die Option '''fixedWidth''' den Wert der '''Inhaltsbreite''' angeben.

Das CSS beschränkt sich auf moderne Browser, damit es übersichtlicher und leichter nachzuvollziehen ist. Unter den Punkten '''Alte Browser''' findet man das CSS, welches für Browser bis runter zu IE7 zusätzlich geladen werden muss.

=== Version 1 ===

<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
height: 333px;
float: left;
overflow: hidden;
}
.toggler {
position: absolute;
width: 55px;
height: 333px;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.toggler {
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
box-sizing: border-box;
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 333px;
background: linear-gradient(to right, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ie7 .toggler {
margin-left: -55px;
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: -webkit-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(left, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=1);
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

=== Version 2 (Text gedreht) ===

<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
float: left;
height: 333px;
min-width: 55px;
}
.toggler {
position: absolute;
width: 333px;
height: 55px;
transform: matrix(0, -1, 1, 0, 0, 333);
transform-origin: 0 0;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 55px;
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
box-sizing: border-box;
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: linear-gradient(to bottom, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
-webkit-transform: matrix(0, -1, 1, 0, 0, 333);
-moz-transform: matrix(0, -1, 1, 0, 0px, 333px);
-ms-transform: matrix(0, -1, 1, 0, 0, 333);
-o-transform: matrix(0, -1, 1, 0, 0, 333);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
outline: none;
}
.ie7 .toggler {
margin-left: -55px;
noFocusLine: expression(this.onFocus=this.blur());
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
height: 293px; /* height (333) - 2 x padding (40) */
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: #333;
background: -webkit-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(top, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=0);
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>
--[[Benutzer:Andreas|Andreas Burg]] 01:35, 7. Dez. 2013 (CET)

Datei:Akkordeon-horizontal-rotate.png

2013-12-07T00:37:37Z

Andreas:

Datei:Akkordeon-horizontal.png

2013-12-07T00:36:54Z

Andreas:

Akkordeon horizontal

2013-12-07T00:35:20Z

Andreas: Neue SEite Akkordeon horizontal

{{AppliesTo
|Version=3.2.1}}
[[Category:Admin HOWTOS]]

= Horizontales Akkordeon mit Boardmitteln (MooTools) =

[[Datei:Akkordeon-horizontal.png|Version 1]]
[[Datei:Akkordeon-horizontal-rotate.png|Version 2 (Text gedreht)]]

== Ziel ==

Hohe schmale Akkordeon-Reiter stehen vertikal nebeneinander, und die Inhalte öffnen sich horizontal nach rechts.

== Umsetzung ==

Template '''moo_accordion_horizontal.html5''' als Kopie von '''moo_accordion.html5''' erstellen und im Layout anstatt moo_accordion auswählen.
CSS-Datei '''accordion.css''' erstellen und im Layout einbinden.

== Das Template ==

MooTools' '''Fx.Accordion''' bietet von Haus aus die Möglichkeit, anstatt der Höhe, die Breite der sich öffnenden Inhaltscontainer zu animieren. Dies wird hier genutzt.

Dazu werden die Optionen im Template geändert von
<source lang="javascript">
...
opacity: false,
alwaysHide: true,
...
</source>
nach
<source lang="javascript">
...
display: 0, // open first content element
opacity: false, // do not animate opacity (maybe there's a bug, as opacity is animated anyway)
alwaysHide: false, // don't close all content elements, it may look ugly for horizontal accordions
width: true, // animate the width
height: false, // don't animate the height
fixedWidth: 777, // set the width of the opening content element
...
</source>
Hier das komplette angepasste Template für Contao 3.2.1
<source lang="javascript">

<script>
(function($) {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
display: 0,
opacity: false,
alwaysHide: false,
width: true,
height: false,
fixedWidth: 777,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>

</source>

== CSS ==

Das CSS enthält jeweils 3 Blöcke (Zum Testen kann ein Block durch entfernen des letzten Slashes "/" in der Überschrift deaktiviert werden).
Dabei bedeutet:
* '''mandatory''' = Pflicht
* '''recommended''' = empfohlen
* '''custom''' = eigenes Design

Im endgültigen CSS sollten die Selektoren zusammengefasst werden, z.B. die ".toggler". Sie sind hier nur wegen ihrer unterschiedlichen Wichtigkeit separiert.

Um die Größenverhältnisse anzupassen finden sich im CSS folgende Werte
* '''Gesamthöhe''' = 333px
* '''Togglerbreite''' = 55px
* '''Inhaltsbreite''' = 777px

Wo man diese Werte findet muss man sie mit seinen eigenen Größen ersetzen. Auch im Template muss man für die Option '''fixedWidth''' den Wert der '''Inhaltsbreite''' angeben.

Das CSS beschränkt sich auf moderne Browser, damit es übersichtlicher und leichter nachzuvollziehen ist. Unter den Punkten '''Alte Browser''' findet man das CSS, welches für Browser bis runter zu IE7 zusätzlich geladen werden muss.

=== Version 1 ===

<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
height: 333px;
float: left;
overflow: hidden;
}
.toggler {
position: absolute;
width: 55px;
height: 333px;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.toggler {
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
box-sizing: border-box;
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 333px;
background: linear-gradient(to right, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ie7 .toggler {
margin-left: -55px;
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: -webkit-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(left, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(left, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=1);
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
</source>

=== Version 2 (Text gedreht) ===

<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
float: left;
height: 333px;
min-width: 55px;
}
.toggler {
position: absolute;
width: 333px;
height: 55px;
transform: matrix(0, -1, 1, 0, 0, 333);
transform-origin: 0 0;
}
.accordion {
margin-left: 55px;
}
.accordion > div {
width: 777px;
height: 333px;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
line-height: 55px;
text-align: center;
cursor: pointer;
color: #fff;
background-color: #333;
}
.accordion > div {
padding: 20px;
box-sizing: border-box;
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: linear-gradient(to bottom, #222 1%, #666 25%, #111 100%);
font-family: Arial, 'Trebuchet MS', sans-serif;
font-size: 1.125rem;
font-weight: bold;
}
.accordion {
background: #eee;
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>

==== Alte Browser ====

<source lang="css">
/* ... mandatory (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
-webkit-transform: matrix(0, -1, 1, 0, 0, 333);
-moz-transform: matrix(0, -1, 1, 0, 0px, 333px);
-ms-transform: matrix(0, -1, 1, 0, 0, 333);
-o-transform: matrix(0, -1, 1, 0, 0, 333);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
outline: none;
}
.ie7 .toggler {
margin-left: -55px;
noFocusLine: expression(this.onFocus=this.blur());
}
.safari .ce_accordion {
position: relative;
}
.safari .accordion {
position: relativ;
min-height: 333px;
}
.safari .accordion > div {
position: absolute;
overflow: hidden;
}
/* ... mandatory (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... recommended (rotate) ...
-------------------------------------------------------------------------------------------------*/
.accordion > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ie7 .accordion > div {
width: 737px; /* width (777) - 2 x padding (40) */
height: 293px; /* height (333) - 2 x padding (40) */
}
/* ... recommended (rotate) ... END
-------------------------------------------------------------------------------------------------*/

/* ... custom (rotate) ...
-------------------------------------------------------------------------------------------------*/
.toggler {
background: #333;
background: -webkit-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -moz-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -o-linear-gradient(top, #222 1%, #666 25%, #111 100%);
background: -ms-linear-gradient(top, #222 1%, #666 25%, #111 100%);
font-size: 1.125em;
}
.ie7 .toggler,
.ie8 .toggler {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=0);
}
/* ... custom (rotate) ... END
-------------------------------------------------------------------------------------------------*/
</source>
--[[Benutzer:Andreas|Andreas Burg]] 01:35, 7. Dez. 2013 (CET)

Akkordeons verschachteln 2

2013-11-30T06:14:53Z

Andreas: Bild hinzugefügt

{{AppliesTo
|Version=3.1.5}}
[[Category:Admin HOWTOS]]

= Verschachtelte Akkordeons =
[[Datei:Akkordeons-verschachteln-2.png]]
== Ziel ==
Akkordeons innerhalb von Akkordeons darstellen.

== Einschränkung ==
Bis zu 2 Ebenen. (Weitere Ebenen durch Templateerweiterung möglich.)

== Umsetzung ==
=== MooTools ===
Template moo_accordion_nested.html5 oder -.xhtml erstellen und im Layout anstatt moo_accordion auswählen. Funktioniert auch bei nicht verschachtelten Akkordeons.
=== jQuery ===
Template j_accordion_nested... Sonst wie bei MooTools.

== Näheres ==
Für das Akkordeon in der 2. Ebene muss im Template eine neue Instanz (Javascript) erzeugt werden.

== Das Template ==

Der erste Block des original Templates (Instantiierung) wurde dubliziert, wobei jeweils in der ersten Zeile die Zielelemente (CSS-Selektoren) verändert wurden, so dass jeweils das äußere bzw. das innere Akkordeon (HTML-Code) angesprochen wird.

=== MooTools ===
<source lang="javascript">

<script>
(function($) {
window.addEvent('domready', function() {

// Level 1
new Fx.Accordion($$('div.mod_article > .ce_accordion > div.toggler'), $$('div.mod_article > .ce_accordion > div.accordion'), {
display: 0, // first element open on start
opacity: false, // no opacity animation
alwaysHide: true, // possibility to close all accordions
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});

// Level 2
new Fx.Accordion($$('.ce_accordion .ce_accordion div.toggler'), $$('.ce_accordion .ce_accordion div.accordion'), {
display: -1, // no element open on start
opacity: false,
alwaysHide: true,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});

// Accessibility
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});

});
})(document.id);
</script>

</source>

=== jQuery ===
{{msgImportant| Das jQuery-Template wurde noch nicht erarbeitet.}}

== Formatierung ==
Hier ein wenig CSS für den ersten Testlauf.
<source lang="css">
/* ... Accordion ...
-------------------------------------------------------------------------------------------------*/
.toggler {
cursor: pointer;
margin: 0;
padding: 10px;
color: #fff;
background-image: linear-gradient(to bottom, #fff 0%, #000 50%);
}
.accordion .toggler {
background-image: linear-gradient(to bottom, #fff 0%, #666 50%);
}
.ce_accordion {
background: #eee;
}
.ce_accordion .ce_accordion {
background: #ccc;
margin-left: 50px;
}
/* ... Accordion ... END
-------------------------------------------------------------------------------------------------*/
</source>

--[[Benutzer:Andreas|Andreas Burg]] 07:02, 30. Nov. 2013 (CET)

2013-11-23T00:00:22Z

Andreas:

[[Category:Admin HOWTOs]]
[[Category:Anwender und Redakteure]]
{{AppliesTo
|Version=Alle Versionen
}}
{{msgWarning|
Obwohl für '''Alle Versionen''' angegeben, kann eine leichte Anpassung bei älteren Versionen als Contao 3.2.0 notwendig sein.
}}

=Galerie mit nur einem Vorschaubild=

==Ziel==

Als Ergebnis erhält man im FE eine Galerie, welche das erste Bild als Vorschaubild präsentiert. Bei aktiviertem Javascript wird das Bild in einer ''Lightbox'' geöffnet. In der ''Lightbox'' kann man nun durch alle Bilder der Galerie blättern.

==Umsetzung==

Die Umsetzung erfolg mittels einer einfachen Erstellung, Umbenennung und Anpassung des Templates gallery_default.html5.

==Template==

Hier ist das Template gallery_single_image.html5. Bei einer XHTML-Ausgabe muss das Tag '''figure''' durch '''div''' ersetzt werden.

<source lang="php">
<?php

/**
* @filename gallery_single_image
* @version Contao 3.2.0
* @license LGPL
* @description A gallery template that only loads the first thumb but shows all pics in mediabox or colorbox.
Check 'Full-size view/new window' in your gallery.
Don't forget to load moo_mediabox or j_colorbox in your layout.
*/

?>

<div class="gallery-single-image">
<?php $i = 1; foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<?php if ($i == 1): ?>
<figure class="image_container">
<?php endif; ?>
<?php if ($col->href): ?>
<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><?php if ($i == 1): ?><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"><?php endif; ?></a>
<?php endif; ?>
<?php if ($i == 1): ?>
</figure>
<?php endif; ?>
<?php endif; ?>
<?php $i++; endforeach; ?>
<?php endforeach; ?>
</div>

</source>
[[en:gallery with just one thumb]]
--[[Benutzer:Andreas|Andreas Burg]] 01:00, 23. Nov. 2013 (CET)

Galerie mit nur einem Vorschaubild

2013-11-22T23:43:05Z

Andreas:

[[Category:Admin HOWTOs]]
[[Category:Anwender und Redakteure]]
{{AppliesTo
|Version=Alle Versionen
}}
{{msgWarning|
Obwohl für '''Alle Versionen''' angegeben, kann eine leichte Anpassung bei älteren Versionen als Contao 3.2.0 notwendig sein.
}}

=Galerie mit nur einem Vorschaubild=

==Ziel==

Als Ergebnis erhält man im FE eine Galerie, welche das erste Bild als Vorschaubild präsentiert. Bei aktiviertem Javascript wird das Bild in einer ''Lightbox'' geöffnet. In der ''Lightbox'' kann man nun durch alle Bilder der Galerie blättern.

==Umsetzung==

Die Umsetzung erfolg mittels einer einfachen Erstellung, Umbenennung und Anpassung des Templates gallery_default.html5.

==Template==

Hier ist das Template gallery_single_image.html5. Bei einer XHTML-Ausgabe muss das Tag '''figure''' durch '''div''' ersetzt werden.

<source lang="php">
<?php

/**
* @filename gallery_single_image
* @version Contao 3.2.0
* @license LGPL
* @description A gallery template that only loads the first thumb but shows all pics in mediabox or colorbox.
Check 'Full-size view/new window' in your gallery.
Don't forget to load moo_mediabox or j_colorbox in your layout.
*/

?>

<div class="gallery-single-image">
<?php $i = 1; foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<?php if ($i == 1): ?>
<figure class="image_container">
<?php endif; ?>
<?php if ($col->href): ?>
<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><?php if ($i == 1): ?><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"><?php endif; ?></a>
<?php endif; ?>
<?php if ($i == 1): ?>
</figure>
<?php endif; ?>
<?php endif; ?>
<?php $i++; endforeach; ?>
<?php endforeach; ?>
</div>

</source>
--[[Benutzer:Andreas|Andreas Burg]] 00:32, 23. Nov. 2013 (CET)