Contao Community Documentation - Benutzerbeiträge [de]

Device-Detection

2015-04-01T15:07:09Z

Ainschy: /* Module Template auswählen */

'''Ausgaben von Modulen/Inhaltselementen anhand der Erweiterung: mobiledetection steuern'''
== mobiledetection installieren ==

Bugbuster aka Glen Langer hat auf GitHub die Erweiterung [https://github.com/BugBuster1701/mobiledetection mobiledetection] für Contao entwickelt.
Hiermit werden dem <body> Tag die Klassen phone, tablet oder computer hinzugefügt, per CSS kann anschließend darauf reagieren.

Möchte man jedoch einzelne Elemente oder Module auf einem Smartphone erst gar nicht laden, oder wie im meinem Fall nur auf dem Computer ausgeben, Stichwort Hintergrund-Video so brauchen wir eine Anpassung auf Template Ebene.

Die oben genannte Erweiterung von BugBuster bietet hierzu zwei Funktionen an.

== Das Template mod_html anpassen ==
In unserem Beispiel wird die mod_html angepasst und für die spätere Anwendung unter einem anderen Namen gespeichert. Legt im Backend unter Layout->Templates ein Kopie des ''mod_html.html5'' Templates an. Benennt diese z.B. in ''mod_html_computer_only'' um, und ändert den Programmcode wie folgt.
<source><?php
use Detection\MobileDetect;
$detect = new MobileDetect();
if (!$detect->isMobile() && !$detect->isTablet()) :
echo $this->html;
endif;
?></source>
Als erstes wird das Module aufgerufen und eine neue Instanz erzeugt. Anschließend wird über eine Abfrage geprüft ob das Endgerät der Kategorie Mobile oder Tablet gehört, trifft dies beides nicht zu, muss es ein computer sein und die Ausgabe erfolgt.

== Module Template auswählen ==
Legt ein neues Module vom Typ HTML an und wählt als Individuelles Template unser zuvor angelegtes mod_html_computer_only aus. Der Inhalt des HTML Modules wird nun nur noch auf den computer Device ausgegeben.
Die Angabe eines Individuellen Templates wurde in Contao 3.3 eingeführt und steht der Module-Konfiguration und den Inhaltselementen zur Verfügung. Zuvor war dieses nur über eine Erweiterung [https://contao.org/en/extension-list/view/template_override.10010049.en.html template_override] ab Contao 2.11 möglich.

Ich hoffe die Anleitung ist für euch hilfreich.

Viele Grüße Oliver Willmes aka [[Benutzer:Ainschy|Ainschy]] ([[Benutzer Diskussion:Ainschy|Diskussion]]) 17:07, 1. Apr. 2015 (CEST)

Device-Detection

2015-04-01T15:05:05Z

Ainschy: Die Seite wurde neu angelegt: „'''Ausgaben von Modulen/Inhaltselementen anhand der Erweiterung: mobiledetection steuern''' == mobiledetection installieren == Bugbuster aka Glen Langer hat a…“

Hintergrund Video

2015-03-31T21:47:49Z

Ainschy: /* j_mediaelement anpassen */

'''Wie ihr mit dem <video>-Element in HTML5 Hintergrund-Videos realisiert'''
== Der HTML-Code ==
Um ein Hintergrund-Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<source><body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...></source>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<source><video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video></source>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

== Der CSS Code ==

<source>
#bgvideo {
bottom:0;
left:0;
right:0;
top:0;
position:fixed;
overflow:hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
#bgvideo video {
min-width:100%;
min-height:100%;
left:50%;
top:50%;
position:absolute;
display:inline-block;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</source>

== j_mediaelement anpassen ==
Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe
<source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source>
wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.

<source>
...
<script>
(function($) {
$(document).ready(function() {
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
// Put custom options here
videoWidht: '100%',
videoHeight: '100%',
pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
flashName: 'legacy/flashmediaelement.swf',
silverlightName: 'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>
...
</source>

Hintergrund Video

2015-03-31T21:46:33Z

Ainschy:

'''Wie ihr mit dem <video>-Element in HTML5 Hintergrund-Videos realisiert'''
== Der HTML-Code ==
Um ein Hintergrund-Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<source><body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...></source>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<source><video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video></source>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

== Der CSS Code ==

<source>
#bgvideo {
bottom:0;
left:0;
right:0;
top:0;
position:fixed;
overflow:hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
#bgvideo video {
min-width:100%;
min-height:100%;
left:50%;
top:50%;
position:absolute;
display:inline-block;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</source>

== j_mediaelement anpassen ==
Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe <source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source> wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.

<source>
...
<script>
(function($) {
$(document).ready(function() {
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
// Put custom options here
videoWidht: '100%',
videoHeight: '100%',
pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
flashName: 'legacy/flashmediaelement.swf',
silverlightName: 'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>
...
</source>

Hintergrund Video

2015-03-31T21:45:49Z

Ainschy: /* j_mediaelement anpassen */

'''Wie ihr mit dem <video> Element in HTML5 Hintergrund Videos realisiert'''
== Der HTML-Code ==
Um ein Hintergrund Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<source><body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...></source>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<source><video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video></source>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

== Der CSS Code ==

<source>
#bgvideo {
bottom:0;
left:0;
right:0;
top:0;
position:fixed;
overflow:hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
#bgvideo video {
min-width:100%;
min-height:100%;
left:50%;
top:50%;
position:absolute;
display:inline-block;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</source>

== j_mediaelement anpassen ==
Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe <source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source> wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.

<source>
...
<script>
(function($) {
$(document).ready(function() {
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
// Put custom options here
videoWidht: '100%',
videoHeight: '100%',
pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
flashName: 'legacy/flashmediaelement.swf',
silverlightName: 'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>
...
</source>

Hintergrund Video

2015-03-31T21:42:02Z

Ainschy: Wie ein Hintergrund Video voll flächig einsetzt wird.

'''Wie ihr mit dem <video> Element in HTML5 Hintergrund Videos realisiert'''
== Der HTML-Code ==
Um ein Hintergrund Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<source><body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...></source>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<source><video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video></source>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

== Der CSS Code ==

<source>
#bgvideo {
bottom:0;
left:0;
right:0;
top:0;
position:fixed;
overflow:hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
#bgvideo video {
min-width:100%;
min-height:100%;
left:50%;
top:50%;
position:absolute;
display:inline-block;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</source>

== j_mediaelement anpassen ==
Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% z.B. das Inhaltselement Youtube wird auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund Video ist hingeben die Angabe <source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source> wichtig, da die Klassen Anweisung im Video Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund Video ignoriert.

<source>
...
<script>
(function($) {
$(document).ready(function() {
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
// Put custom options here
videoWidht: '100%',
videoHeight: '100%',
pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
flashName: 'legacy/flashmediaelement.swf',
silverlightName: 'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>
...
</source>

Datei:Subdomain angeben.png

2015-03-21T11:23:36Z

Ainschy: Ainschy lud eine neue Version von „Datei:Subdomain angeben.png“ hoch

Subdomain eintragen

Kostenfreies SSL Zertifikat in Contao nutzen

2015-03-20T20:19:41Z

Ainschy:

'''Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anpasst'''
== Registrieren und ein E-Mail Zertifikat erstellen ==

Als ersten Schritt registriert Ihr euch. Hierzu müsst Ihr eure echten Daten angeben, diese müssen mit den Daten der Domain übereinstimmen!
Ihr erhaltet ein Browser Zertifikat zur Authentifizierung bei startssl.com. Exportiert dieses Zertifikat (mit Passwort Verschlüsselung!) an einen sicheren Ort. Dieses Zertifikat könnt ihr auch für signierte und verschlüsselte E-Mails verwenden.
Meldet euch anschließend bei startssl.com mit Hilfe des Zertifikats an. Sollte es hierbei zu einer Fehlermeldung kommen, so re-importiert ihr das zuvor exportierte Zertifikat in den Browser (zumindest beim Chrome war das die Lösung).

== Domain Validieren ==

[[Datei:Enter Domain.PNG]]

Nach der Anmeldung wechselt ihr in das '''Control Panel''' und wählt den '''Validation Wizard'''. Als ''Type'' wählt ihr '''Domain Name Validation''' und geht auf ''Continue''.
Trag die '''Top-Level Domain''' ein, von der ihr der <u>Eigentümer</u> seid! Das heißt eure Anmeldung bei startssl.com muss die gleichen Angaben enthalten wie des Domain-Inhabers.

[[Datei:Postfach-auswählen.png]]

Anschließend werdet ihr aufgefordert eine von drei möglichen E-Mail Adressen der Domain auszuwählen. Zur Auswahl stehen:
* postmaster@DEINE-DOMAIN.tld
* hostmaster@DEINE-DOMAIN.tld
* webmaster@DEINE-DOMAIN.tld
Daraufhin erhaltet ihr eine E-Mail mit einem Verification Code. Tragt diesen Code auf der sich öffnenden Seite ein. Die Validierung ist 30 Tage gültig.

[[Datei:Certificates Wizard.png]]

== Domain Zertifikat erstellen ==

Geht auf '''Certificates Wizard''' und wählt dort '''Web Server SSL/TLS Certificate''' aus und generiert den Private Key. Tragte ein sicheres zwischen 10 und 32 Zeichen langes Passwort ein, das ihr euch merkt. ''Keysize ''und den ''Secure Hash Algorithm'' kann wie voreingestellt übernommen werden.

[[Datei:Certificates Wizard Key-Password.png]]

Anschließend erhaltet ihr den '''Privaten RSA Key''', diesen kopiert ihr in einen Editor (nicht Office!) und speichert diesen anschließend im ASCII Format.

[[Datei:RSA ssl.key.png]]

Weiter mit Continue und zur Auswahl der Domain.
Wählt eine der zuvor validierten Domains aus und geht auf Continue.

[[Datei:Key-einer-Domain-zuweisen.png]]

Als Subdomain bietet sich hier die www an.

[[Datei:Subdomain angeben.png]]

Der Zertifikat wird nun für die Domain inkl. Subdomain erstellt.

Noch einmal alles kontrollieren und das Zertifikat erstellen lassen, dieses ist nun ein Jahr gültig. Speichert das Zertifikat wie angegeben als Plain Text im ASCII Format. Für die Installation auf einem Webserver wie Uberspace.de solltet ihr euch '''auch''' das '''intermediate''' und '''root''' CA wie angegeben sichern.

[[Datei:Save-Certificate ssl.crt.png]]

== Zertifikat bei All-inkl.com in KAS einbinden. ==

Nachdem Login ins KAS wählt ihr die entsprechende Domain aus und geht in die Bearbeitung. Dort auf SSL Schutz bearbeiten und fügt die Zertifikate ein.

[[Datei:Eingetragenes-Zertifikat-bei-All-inkl..PNG]]

== Die htaccess im Root Ordner von Contao anpassen ==

In der Zeile nach "RewriteBase /" tragt ihr folgendes zwei Zeilen ein.

<source>RewriteCond %{SERVER_PORT} 80
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]</source>

Damit werden die Anfragen auf Port 80 (http) auf https = ssl umgeleitet. Überprüft ob im weiten Verlauf der htaccess noch RewriteRules existieren die noch auf http://... umleiten und passt diese ebenfalls aus https:// an.

Kostenfreies SSL Zertifikat in Contao nutzen

2015-03-20T20:06:54Z

Ainschy:

Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anpasst
# Registrieren bei startssl.com
# Domain validieren
# Domain Zertifikat erstellen
# All-inkl.com – Zertifikat einbinden
# htaccess anpassen

'''1.) Registrieren und ein E-Mail Zertifikat erstellen'''

Als ersten Schritt registriert Ihr euch. Hierzu müsst Ihr eure echten Daten angeben, diese müssen mit den Daten der Domain übereinstimmen!
Ihr erhaltet ein Browser Zertifikat zur Authentifizierung bei startssl.com. Exportiert dieses Zertifikat (mit Passwort Verschlüsselung!) an einen sicheren Ort. Dieses Zertifikat könnt ihr auch für signierte und verschlüsselte E-Mails verwenden.
Meldet euch anschließend bei startssl.com mit Hilfe des Zertifikats an. Sollte es hierbei zu einer Fehlermeldung kommen, so re-importiert ihr das zuvor exportierte Zertifikat in den Browser (zumindest beim Chrome war das die Lösung).

'''2.) Domain Validieren'''

[[Datei:Enter Domain.PNG]]

Nach der Anmeldung wechselt ihr in das '''Control Panel''' und wählt den '''Validation Wizard'''. Als ''Type'' wählt ihr '''Domain Name Validation''' und geht auf ''Continue''.
Trag die '''Top-Level Domain''' ein, von der ihr der <u>Eigentümer</u> seid! Das heißt eure Anmeldung bei startssl.com muss die gleichen Angaben enthalten wie des Domain-Inhabers.

[[Datei:Postfach-auswählen.png]]

Anschließend werdet ihr aufgefordert eine von drei möglichen E-Mail Adressen der Domain auszuwählen. Zur Auswahl stehen:
* postmaster@DEINE-DOMAIN.tld
* hostmaster@DEINE-DOMAIN.tld
* webmaster@DEINE-DOMAIN.tld
Daraufhin erhaltet ihr eine E-Mail mit einem Verification Code. Tragt diesen Code auf der sich öffnenden Seite ein. Die Validierung ist 30 Tage gültig.

[[Datei:Certificates Wizard.png]]

'''3.) Domain Zertifikat erstellen'''

Geht auf '''Certificates Wizard''' und wählt dort '''Web Server SSL/TLS Certificate''' aus und generiert den Private Key. Tragte ein sicheres zwischen 10 und 32 Zeichen langes Passwort ein, das ihr euch merkt. ''Keysize ''und den ''Secure Hash Algorithm'' kann wie voreingestellt übernommen werden.

[[Datei:Certificates Wizard Key-Password.png]]

Anschließend erhaltet ihr den '''Privaten RSA Key''', diesen kopiert ihr in einen Editor (nicht Office!) und speichert diesen anschließend im ASCII Format.

[[Datei:RSA ssl.key.png]]

Weiter mit Continue und zur Auswahl der Domain.
Wählt eine der zuvor validierten Domains aus und geht auf Continue. Als Subdomain bietet sich hier die www an.

[[Datei:Key-einer-Domain-zuweisen.png]]

Der Zertifikat wird nun für die Domain inkl. Subdomain erstellt.

[[Datei:Subdomain angeben.png]]

Noch einmal alles kontrollieren und das Zertifikat erstellen lassen, dieses ist nun ein Jahr gültig. Speichert das Zertifikat wie angegeben als Plain Text im ASCII Format. Für die Installation auf einem Webserver wie Uberspace.de solltet ihr euch '''auch''' das '''intermediate''' und '''root''' CA wie angegeben sichern.

[[Datei:Save-Certificate ssl.crt.png]]

4.) Zertifikat bei All-inkl.com in KAS einbinden.

Nachdem Login ins KAS wählt ihr die entsprechende Domain aus und geht in die Bearbeitung. Dort auf SSL Schutz bearbeiten und fügt die Zertifikate ein.

[[Datei:Eingetragenes-Zertifikat-bei-All-inkl..PNG]]

5.) Die htaccess im Root Ordner von Contao anpassen

In der Zeile nach "RewriteBase /" tragt ihr folgendes zwei Zeilen ein.
<nowiki>
RewriteCond %{SERVER_PORT} 80
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</nowiki>
Damit werden die Anfragen auf Port 80 (http) auf https = ssl umgeleitet. Überprüft ob im weiten Verlauf der htaccess noch RewriteRules existieren die noch auf http://... umleiten und passt diese ebenfalls aus https:// an.

Kostenfreies SSL Zertifikat in Contao nutzen

2015-03-20T19:56:45Z

Ainschy:

'''Kostenfreies SSL Zertifikat in Contao nutzen'''

Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anpasst

# Registrieren bei startssl.com
# Domain validieren
# Domain Zertifikat erstellen
# All-inkl.com – Zertifikat einbinden
# htaccess anpassen

'''1.) Registrieren und ein E-Mail Zertifikat erstellen'''

Als ersten Schritt registriert Ihr euch. Hierzu müsst Ihr eure echten Daten angeben, diese müssen mit den Daten der Domain übereinstimmen!
Ihr erhaltet ein Browser Zertifikat zur Authentifizierung bei startssl.com. Exportiert dieses Zertifikat (mit Passwort Verschlüsselung!) an einen sicheren Ort. Dieses Zertifikat könnt ihr auch für signierte und verschlüsselte E-Mails verwenden.
Meldet euch anschließend bei startssl.com mit Hilfe des Zertifikats an. Sollte es hierbei zu einer Fehlermeldung kommen, so re-importiert ihr das zuvor exportierte Zertifikat in den Browser (zumindest beim Chrome war das die Lösung).

'''2.) Domain Validieren'''

[[Datei:Enter Domain.PNG]]

Nach der Anmeldung wechselt ihr in das '''Control Panel''' und wählt den '''Validation Wizard'''. Als ''Type'' wählt ihr '''Domain Name Validation''' und geht auf ''Continue''.
Trag die '''Top-Level Domain''' ein, von der ihr der <u>Eigentümer</u> seid! Das heißt eure Anmeldung bei startssl.com muss die gleichen Angaben enthalten wie des Domain-Inhabers.

[[Datei:Postfach-auswählen.png]]

Anschließend werdet ihr aufgefordert eine von drei möglichen E-Mail Adressen der Domain auszuwählen. Zur Auswahl stehen:
* postmaster@DEINE-DOMAIN.tld
* hostmaster@DEINE-DOMAIN.tld
* webmaster@DEINE-DOMAIN.tld
Daraufhin erhaltet ihr eine E-Mail mit einem Verification Code. Tragt diesen Code auf der sich öffnenden Seite ein. Die Validierung ist 30 Tage gültig.

[[Datei:Certificates Wizard.png]]

'''3.) Domain Zertifikat erstellen'''

Geht auf '''Certificates Wizard''' und wählt dort '''Web Server SSL/TLS Certificate''' aus und generiert den Private Key. Tragte ein sicheres zwischen 10 und 32 Zeichen langes Passwort ein, das ihr euch merkt. ''Keysize ''und den ''Secure Hash Algorithm'' kann wie voreingestellt übernommen werden.

[[Datei:Certificates Wizard Key-Password.png]]

Anschließend erhaltet ihr den '''Privaten RSA Key''', diesen kopiert ihr in einen Editor (nicht Office!) und speichert diesen anschließend im ASCII Format.

[[Datei:RSA ssl.key.png]]

Weiter mit Continue und zur Auswahl der Domain.
Wählt eine der zuvor validierten Domains aus und geht auf Continue. Als Subdomain bietet sich hier die www an.

[[Datei:Key-einer-Domain-zuweisen.png]]

Der Zertifikat wird nun für die Domain inkl. Subdomain erstellt.

[[Datei:Subdomain angeben.png]]

Noch einmal alles kontrollieren und das Zertifikat erstellen lassen, dieses ist nun ein Jahr gültig. Speichert das Zertifikat wie angegeben als Plain Text im ASCII Format. Für die Installation auf einem Webserver wie Uberspace.de solltet ihr euch '''auch''' das '''intermediate''' und '''root''' CA wie angegeben sichern.

[[Datei:Save-Certificate ssl.crt.png]]

4.) Zertifikat bei All-inkl.com in KAS einbinden.

Nachdem Login ins KAS wählt ihr die entsprechende Domain aus und geht in die Bearbeitung. Dort auf SSL Schutz bearbeiten und fügt die Zertifikate ein.

[[Datei:Eingetragenes-Zertifikat-bei-All-inkl..PNG]]

Kostenfreies SSL Zertifikat in Contao nutzen

2015-03-20T19:52:38Z

Ainschy:

'''Kostenfreies SSL Zertifikat in Contao nutzen'''

Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anpasst

# Registrieren bei startssl.com
# Domain validieren
# Domain Zertifikat erstellen
# All-inkl.com – Zertifikat einbinden
# htaccess anpassen

'''1.) Registrieren und ein E-Mail Zertifikat erstellen'''

Als ersten Schritt registriert Ihr euch. Hierzu müsst Ihr eure echten Daten angeben, diese müssen mit den Daten der Domain übereinstimmen!

Ihr erhaltet ein Browser Zertifikat zur Authentifizierung bei startssl.com. Exportiert dieses Zertifikat (mit Passwort Verschlüsselung!) an einen sicheren Ort. Dieses Zertifikat könnt ihr auch für signierte und verschlüsselte E-Mails verwenden.

Meldet euch anschließend bei startssl.com mit Hilfe des Zertifikats an. Sollte es hierbei zu einer Fehlermeldung kommen, so re-importiert ihr das zuvor exportierte Zertifikat in den Browser (zumindest beim Chrome war das die Lösung).

'''2.) Domain Validieren'''

[[Datei:Enter Domain.PNG]]

Nach der Anmeldung wechselt ihr in das '''Control Panel''' und wählt den '''Validation Wizard'''. Als ''Type'' wählt ihr '''Domain Name Validation''' und geht auf ''Continue''.

Trag die '''Top-Level Domain''' ein, von der ihr der <u>Eigentümer</u> seid! Das heißt eure Anmeldung bei startssl.com muss die gleichen Angaben enthalten wie des Domain-Inhabers.

[[Datei:Postfach-auswählen.png]]

Anschließend werdet ihr aufgefordert eine von drei möglichen E-Mail Adressen der Domain auszuwählen. Zur Auswahl stehen:

* postmaster@DEINE-DOMAIN.tld
* hostmaster@DEINE-DOMAIN.tld
* webmaster@DEINE-DOMAIN.tld

Daraufhin erhaltet ihr eine E-Mail mit einem Verification Code. Tragt diesen Code auf der sich öffnenden Seite ein. Die Validierung ist 30 Tage gültig.

[[Image:]]

'''3.) Domain Zertifikat erstellen'''

Geht auf '''Certificates Wizard''' und wählt dort '''Web Server SSL/TLS Certificate''' aus und generiert den Private Key. Tragte ein sicheres zwischen 10 und 32 Zeichen langes Passwort ein, das ihr euch merkt. ''Keysize ''und den ''Secure Hash Algorithm'' kann wie voreingestellt übernommen werden.

[[Image:]]

Anschließend erhaltet ihr den '''Privaten RSA Key''', diesen kopiert ihr in einen Editor (nicht Office!) und speichert diesen anschließend im ASCII Format.

[[Image:]]
Weiter mit Continue und zur Auswahl der Domain.

Wählt eine der zuvor validierten Domains aus und geht auf Continue. Als Subdomain bietet sich hier die www an.

[[Image:]]

Der Zertifikat wird nun für die Domain inkl. Subdomain erstellt.

[[Image:]]

Noch einmal alles kontrollieren und das Zertifikat erstellen lassen, dieses ist nun ein Jahr gültig. Speichert das Zertifikat wie angegeben als Plain Text im ASCII Format. Für die Installation auf einem Webserver wie Uberspace.de solltet ihr euch '''auch''' das '''intermediate''' und '''root''' CA wie angegeben sichern.

[[Image:]]

4.) Zertifikat bei All-inkl.com in KAS einbinden.

Nachdem Login ins KAS wählt ihr die entsprechende Domain aus und geht in die Bearbeitung. Dort auf SSL Schutz bearbeiten und fügt die Zertifikate ein.

[[Image:]]

Datei:Eingetragenes-Zertifikat-bei-All-inkl..PNG

2015-03-20T19:47:11Z

Ainschy: Bei den Domain SSL Schutz Einstellungen in der All-inkl Domain Verwaltung einfügen.

Bei den Domain SSL Schutz Einstellungen in der All-inkl Domain Verwaltung einfügen.

Datei:Save-Certificate ssl.crt.png

2015-03-20T19:46:03Z

Ainschy: Das generierte öffentliche (Public) Zertifikat speichern.

Das generierte öffentliche (Public) Zertifikat speichern.

Datei:Subdomain angeben.png

2015-03-20T19:44:42Z

Ainschy: Subdomain eintragen

Subdomain eintragen

Datei:Key-einer-Domain-zuweisen.png

2015-03-20T19:43:52Z

Ainschy: den generieten Key nun einer Domain zuweisen

den generieten Key nun einer Domain zuweisen

Datei:RSA ssl.key.png

2015-03-20T19:41:10Z

Ainschy: Den generierten privaten Schlüssel sichern

Den generierten privaten Schlüssel sichern

Datei:Certificates Wizard Key-Password.png

2015-03-20T19:39:56Z

Ainschy: Passwort für den Privaten Key eingeben

Passwort für den Privaten Key eingeben

Datei:Certificates Wizard.png

2015-03-20T19:39:02Z

Ainschy: Ein Zertifikat erstellen

Ein Zertifikat erstellen

Datei:Postfach-auswählen.png

2015-03-20T19:37:40Z

Ainschy: Postfach zum bestätigen auswählen

Postfach zum bestätigen auswählen

Datei:Enter Domain.PNG

2015-03-20T19:35:40Z

Ainschy: Domain bei startssl.com validieren

Domain bei startssl.com validieren

Kostenfreies SSL Zertifikat in Contao nutzen

2015-03-20T19:33:04Z

Ainschy: Die Seite wurde neu angelegt: „'''Kostenfreies SSL Zertifikat in Contao nutzen''' Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anp…“

'''Kostenfreies SSL Zertifikat in Contao nutzen'''

Wie ihr bei startssl.com ein Domain Zertifikat bekommt, es bei All-inkl.com einbindet und die .htaccess anpasst

# Registrieren bei startssl.com
# Domain validieren
# Domain Zertifikat erstellen
# All-inkl.com – Zertifikat einbinden
# htaccess anpassen

'''1.) Registrieren und ein E-Mail Zertifikat erstellen'''

Als ersten Schritt registriert Ihr euch. Hierzu müsst Ihr eure echten Daten angeben, diese müssen mit den Daten der Domain übereinstimmen!

Ihr erhaltet ein Browser Zertifikat zur Authentifizierung bei startssl.com. Exportiert dieses Zertifikat (mit Passwort Verschlüsselung!) an einen sicheren Ort. Dieses Zertifikat könnt ihr auch für signierte und verschlüsselte E-Mails verwenden.

Meldet euch anschließend bei startssl.com mit Hilfe des Zertifikats an. Sollte es hierbei zu einer Fehlermeldung kommen, so re-importiert ihr das zuvor exportierte Zertifikat in den Browser (zumindest beim Chrome war das die Lösung).

'''2.) Domain Validieren'''

[[Image:]]Nach der Anmeldung wechselt ihr in das '''Control Panel''' und wählt den '''Validation Wizard'''. Als ''Type'' wählt ihr '''Domain Name Validation''' und geht auf ''Continue''.

Trag die '''Top-Level Domain''' ein, von der ihr der <u>Eigentümer</u> seid! Das heißt eure Anmeldung bei startssl.com muss die gleichen Angaben enthalten wie des Domain-Inhabers.

[[Image:]]

Anschließend werdet ihr aufgefordert eine von drei möglichen E-Mail Adressen der Domain auszuwählen. Zur Auswahl stehen:

* postmaster@DEINE-DOMAIN.tld
* hostmaster@DEINE-DOMAIN.tld
* webmaster@DEINE-DOMAIN.tld

Daraufhin erhaltet ihr eine E-Mail mit einem Verification Code. Tragt diesen Code auf der sich öffnenden Seite ein. Die Validierung ist 30 Tage gültig.

[[Image:]]

'''3.) Domain Zertifikat erstellen'''

Geht auf '''Certificates Wizard''' und wählt dort '''Web Server SSL/TLS Certificate''' aus und generiert den Private Key. Tragte ein sicheres zwischen 10 und 32 Zeichen langes Passwort ein, das ihr euch merkt. ''Keysize ''und den ''Secure Hash Algorithm'' kann wie voreingestellt übernommen werden.

[[Image:]]

Anschließend erhaltet ihr den '''Privaten RSA Key''', diesen kopiert ihr in einen Editor (nicht Office!) und speichert diesen anschließend im ASCII Format.

[[Image:]]
Weiter mit Continue und zur Auswahl der Domain.

Wählt eine der zuvor validierten Domains aus und geht auf Continue. Als Subdomain bietet sich hier die www an.

[[Image:]]

Der Zertifikat wird nun für die Domain inkl. Subdomain erstellt.

[[Image:]]

Noch einmal alles kontrollieren und das Zertifikat erstellen lassen, dieses ist nun ein Jahr gültig. Speichert das Zertifikat wie angegeben als Plain Text im ASCII Format. Für die Installation auf einem Webserver wie Uberspace.de solltet ihr euch '''auch''' das '''intermediate''' und '''root''' CA wie angegeben sichern.

[[Image:]]

4.) Zertifikat bei All-inkl.com in KAS einbinden.

Nachdem Login ins KAS wählt ihr die entsprechende Domain aus und geht in die Bearbeitung. Dort auf SSL Schutz bearbeiten und fügt die Zertifikate ein.

[[Image:]]

Zeit und Datum Ausgabe anpassen

2012-06-01T15:15:01Z

Ainschy: Die Seite wurde neu angelegt: „Gerade in der Event Darstellung möchte man oft eine ansprechende Ausgabe der Zeit und Datumangaben. Neben der Möglichkeit die uns Contao unter Einstellungen bi…“

Gerade in der Event Darstellung möchte man oft eine ansprechende Ausgabe der Zeit und Datumangaben.

Neben der Möglichkeit die uns Contao unter Einstellungen bietet steht und die Anpassung über die Templates offen.
Mit Hilfe der date() Funktin lässt sich der Timestamp in ein ansprechendes Format bringen. Jedoch mit der Einschränkung auf die englische Schreibweise bei der Monats- und Tagesbezeichnung.

Die Contao Funktion parseDate() schafft hier Abhilfe und greift bei der Generierung auf die Sprachdateien zurück.