TYPO-Script.de | News Feed https://www.typo-script.de/ Blog aus den Bereichen Webdesign, TYPO3, Programmierung de © Typo-Script.de Fri, 22 Nov 2019 02:50:27 +0100 Fri, 22 Nov 2019 02:50:27 +0100 TYPO3 news-144 Wed, 28 Nov 2018 23:25:18 +0100 Bootply Bootstrap Migration Tool http://upgrade-bootstrap.bootply.com/ Das Bootstrap Migration Tool von Bootply.com hilft jedem der vor einen Update bisheriger Bootstrap Versionen steht. Web Links news-143 Wed, 28 Nov 2018 23:07:28 +0100 Pexels Free Stock Photos https://www.pexels.com/ Ein interessante Quelle für Bilder jeglicher Art. Alle Fotos auf Pexels können kostenlos für private und kommerzielle Zwecke verwendet werden. Web Links news-142 Mon, 26 Nov 2018 12:28:59 +0100 CKEditor - WYSIWYG HTML Editor https://www.typo-script.de/software/ckeditor-wysiwyg-html-editor/ Einblick in den freien webbasierten WYSIWYG HTML-Editor CKEditor Der WYSIWYG HTML-Editor CKEditor lässt sich ganz einfach auf die erforderlichen Bedürfnisse anpassen. Es besteht die Wahl zwischen verschiedenen vorgefertigten Paketen oder einer individuellen Zusammenstellung von Plugins.

CKEditor package

Der CKEditor wird u.a. ab der TYPO3 Version 8, als neuer RTE mitgeliefert und soll damit den bisherigen HTML-Editor htmlArea RTE (rtehtmlarea) ablösen.

Spache: Multilingual - Typ: Freeware

Downlaod und Konfiguration des CKEditor

]]>
Software
news-141 Sat, 04 Mar 2017 15:27:00 +0100 TYPO3 Wartung und Pflege https://www.typo-script.de/blog/typo3-wartung-und-pflege/ Regelmäßige Pflege eines TYPO3 Systems schließt Sicherheitslücken, beseitigt Fehlfunktionen und garantiert eine optimale Lauffähigkeit aller Komponenten Gerade ein neues TYPO3 Projekt veröffentlicht, die Seite wird gut angenommen und die Besucherzahlen steigen. Was will man mehr.

Häufig tritt im weiteren Seitenbetrieb die TYPO3 Wartung in den Hintergrund und man läuft Gefahr, das sich im TYPO3 Projekt Sichheitslücken auftun oder die Seite an verschiedenen Stellen Anzeige- oder Ausnahmefehler erzeugt.

Ein unzureichend oder gar nicht gewartetes TYPO3 System ist anfällig für ungewollte Zugriffe von außen. Wurde eine potentielle Sicherheitslücke entdeckt, steht der Manipulation oder Löschung von Daten nichts mehr im Wege.

Um diesem Szenario entgegenzuwirken, ist es wichtig entsprechende Maßnahmen zu ergreifen. Ein durchdachter TYPO3 Support bestehend aus regelmäßigen TYPO3 Updates, der Aktualisierung von TYPO3 Erweiterungen und der Sicherung von Daten und Datenbanken, bietet ein Höchstmaß an Sicherheit.

TYPO3 ist ein beliebtes CMS mit einer großen Entwicklergemeinde, das ständig optimiert und weiterentwickelt wird. Man sollte daher bei der Veröffentlichung eines neuen TYPO3 Projekts immer im Hinterkopf behalten, das alle nötigen TYPO3 Support und Wartungsarbeiten erbracht werden.

Weitere Informationen zur TYPO3 Betreuung gibt es auf der Seite TYPO3 Support. Die Kosten für einen TYPO3 Wartungsvertrag können in den TYPO3 Preisen, bei der TYPO3 Wartung eingesehen werden.

]]>
Blog
news-140 Sat, 25 Feb 2017 16:35:00 +0100 Bootstrap Grid System https://www.typo-script.de/html-und-css/bootstrap-grid-system/ Mit dem Bootstrap-Framework (v3.3.7) ein Bootstrap Grid erstellen und als Bootstrap Template Vorlage verwenden und erweitern Bei der Erstellung von Bootstrap Templates kann es hilfreich sein, das im Vorfeld ein wenig mit dem Bootstrap Grid (Raster) experimentiert wird. Um dafür ohne größere Umstände eine HTML5 Bootstrap Template zu erschaffen, bietet es sich an, das von MaxCDN bereit gestellte Bootstrap CDN (Content Delivery Network) zu verwenden. Im folgenden Bootstrap Template Beispiel, wird der Grundaufbau des Bootstrap Grid Systems verdeutlicht und soll zeigen, wie einfach die Handhabung eines Bootstrap Grid Templates ist.

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>Bootstrap Grid Beispiel</title>

        <!-- MaxCDN CDN Bootstrap Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- MaxCDN CDN Bootstrap Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- MaxCDN CDN Bootstrap Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjmdfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- CSS Formatierung zur besseren Bootstrap Grid Visualisierung -->
        <style>
            div.row { border-bottom: 1px solid lightgrey; }
            div.row div { padding-bottom: 5px; }
            div.row div h4 { padding-top: 10px; }
            div.row div h5 { border-top: 5px solid lightgreen; padding-top: 10px; font-weight: 600;}
            div.row div:nth-child(2) > h5 { border-top-color: bisque; }
            div.row div:nth-child(3) > h5 { border-top-color: lightcoral; }
            div.row div:nth-child(4) > h5 { border-top-color: lightblue; }
        </style>
    </head>
    <body>
    <!-- Die Bootstrap CSS Klasse ".container", umschliesst alle Zeilen (rows) -->
    <div class="container">
        <div class="row">
            <div class="col-md-12"><h4>Es folgt eine Zeile mit 4 gleichbreiten Spalten</h4></div>
        </div>
        <div class="row">
            <div class="col-md-3"><h5>Spalte 1</h5>25% Breite - padding links und rechts 15px</div>
            <div class="col-md-3"><h5>Spalte 2</h5>25% Breite - padding links und rechts 15px</div>
            <div class="col-md-3"><h5>Spalte 3</h5>25% Breite - padding links und rechts 15px</div>
            <div class="col-md-3"><h5>Spalte 4</h5>25% Breite - padding links und rechts 15px</div>
        </div>
        <div class="row">
            <div class="col-md-12"><h4>Und weitere Zeilen mit unterschiedlich breiten Spalten</h4></div>
        </div>
        <div class="row">
            <div class="col-md-6"><h5>Spalte 1</h5>50% Breite - padding links und rechts 15px</div>
            <div class="col-md-6"><h5>Spalte 2</h5>50% Breite - padding links und rechts 15px</div>
        </div>
        <div class="row">
            <div class="col-md-8"><h5>Spalte 1</h5>66.5% Breite - padding links und rechts 15px</div>
            <div class="col-md-4"><h5>Spalte 2</h5>33.5% Breite - padding links und rechts 15px</div>
        </div>
        <div class="row">
            <div class="col-md-3"><h5>Spalte 1</h5>25% Breite - padding links und rechts 15px</div>
            <div class="col-md-6"><h5>Spalte 2</h5>50% Breite - padding links und rechts 15px</div>
            <div class="col-md-3"><h5>Spalte 3</h5>25% Breite - padding links und rechts 15px</div>
        </div>
    </div>
    </body>
</html>

Die Kombination der Spaltenbreiten können beliebig variiert werden. Zeilen und Spalten lassen sich ineinander verschachteln (Bootstrap Nesting columns). Zu beachten wäre, das beim Ergebnis der Spalten-Addition im Bootstrap Grid, immer 12 als Summe erwartet wird. Beispiel: col-md- 2+7+3 oder col-md- 5+3+4. Hat man erst einmal ein Grundverständnis für das Bootstrap Grid entwickelt, ist die weitere Arbeit damit ein Kinderspiel.

Bootstrap breakpoints (CSS media query)

Das oben gezeigt Beispiel verwendet zur Spaltenteilung einzig die .col-md-# CSS Klasse. Es lassen sich im Bootstrap Grid aber noch 3 weitere Breakpoints (Umbrüche) setzen. Die CSS Klassen .col-xs-#, .col-sm-#, .col-md-# und .col-lg-#, werden mittels CSS media queries gesteuert und haben die Funktion, auf unterschieldiche Bildschirmauflösungen zu reagieren.

Sehr kleine Geräte Handys (<768px) Kleine Geräte Tablets (≥768px) Mittelgroße Geräte Desktops (≥992px) Größere Geräte Desktops (≥1200px)
Raster verhalten Anzeige immer Horizontal Nebeneinander, horizontale Anzeige nach gesetzten breakpoints
Container-Breite keine (automatisch) 750px 970px 1170px
CSS Klasse .col-xs- .col-sm- .col-md- .col-lg-
Anzahl Spalten 12
Spaltenbreite Auto ~62px ~81px ~97px
Spaltenabstand 30px (15px auf beiden Seiten der Spalte)
Verschachtelbar Ja
Spalten versetzbar Ja
Spaltensortierung Ja

Quelle: Bootstrap Grid options

Wie die Tabelle zeigt, lassen sich mit dem Bootstrap Grid, sehr komfortabel Responsive Templates realisieren. Die mitgelieferten CSS Media Queries decken dabei ein größes Spektrum an Ausgabegeräten ab und das Bootstrap Template wird immer optimal präsentiert.

Bootstrap offset Spalten

Um Spalten innerhalb einer Zeile (.row) im Bootstrap-Raster nach rechts zu versetzten, steht die CSS Klasse .col-md-offset-# zur Verfügung. In diesem Beispiel wird die zweite Spalte, um 6 Spalten nach rechts verschoben.

<div class="container">
    <div class="row">
        <div class="col-md-3"><h5>Spalte 1</h5>25% Breite ohne .offset CSS Klasse - padding links und rechts 15px</div>
        <div class="col-md-3 col-md-offset-6"><h5>Spalte 2</h5>25% Breite - 50% (6 Spalten) nach rechts - padding links und rechts 15px</div>
    </div>
</div>

Die Offset-Variationen (Bootstrap Offsetting columns) sind in diesem Bootstrap Grid, auch wieder flexibel veränderbar. Mit den Media Query Breakpoint CSS Klassen können obendrein verschiedene Endgeräte angesteuert werden.

Bootstrap pull und push

Mit den Bootstrap .pull und .push CSS Klassen, wird die Reihenfolge der Spalten beim jeweiligen Display-Breakpoint festgelegt.

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-push-6"><h5>Spalte 1</h5>50% Breite mit .col-md-push-6 CSS Klasse - padding links und rechts 15px</div>
        <div class="col-md-6 col-md-pull-6"><h5>Spalte 2</h5>50% Breite mit .col-md-pull-6 CSS Klasse - padding links und rechts 15px</div>
    </div>
</div>

Die Order (Bootstrap Column ordering) der Spalten bei einer Bildschirmauflösung zwischen 992px und 1200px, ist hier umgekehrt. Als ersten wird in dieser Zeile "Spalte 2" und danach "Spalte 1" angezeigt.

]]>
HTML und CSS
news-139 Sat, 18 Feb 2017 17:34:00 +0100 Sublime Text - Profi Editor https://www.typo-script.de/software/sublime-text-profi-editor/ Der Text-Editor Sublime Text, ist wunderbar schnell, flexibel erweiterbar und bietet tolle Funktionen. Sublime Text ist ein universeller Texteditor mit Entiwckler-Funktionen wie Syntax-Highlighting oder Code-Vervollständigung. Eines der hervorstechenden Features ist aber sicher die Multiple Auswahl Funktion, mit der sich auf einen Schlag mehrere Zeilen oder Wörter/Variablen verändern lassen. Im allgemeinen kann fast alles bei Sublime Text nach seinen Bedürfnissen angepasst und erweitert werden. Es kann eine Lizenz für Sublime Text für derzeit USD $70 erworben werden. Oder man verwendet den Editor ohne Lizensierung.

Spache: Englisch - Typ: Freeware (ohne Lizenz)

Home: Sublime Text

]]>
Software
news-138 Sat, 11 Feb 2017 11:46:00 +0100 PHP array als stdClass Object https://www.typo-script.de/php-script/php-array-als-stdclass-object/ PHP array in ein stdClass Object konvertieren. Prüfen eines PHP stdClass Object und zugreifen auf ein stdClass Object. Um ein PHP Array in ein Object (stdClass) zu konvertieren, gibt es verschiedene Varianten, die zum Ziel führen. Das erste Beispiel zeigt eine PHP Funktion convertArrayToObject(), die beim Aufruf ein PHP Array rekursiv, in ein Objekt konvertiert. D.h. es werden hier auch alle Arrays innerhalb eines Arrays in ein stdClass Object überführt. Die kleine Funktion "array_debug()", dient hier lediglich zur besseren Visualisierung der Ausgabe.

<?php
    // debug array input - visual helper function
    function array_debug($input){
        echo '<pre>';
        print_r($input);
        echo '</pre>';
    }

    // recursive convert array to object function
    function convertArrayToObject($array) {
        $object = new stdClass();
        foreach ($array as $key => $value) {
            if (is_array($value)) {
                $value = convertArrayToObject($value);
            }
            $object->$key = $value;
        }
        return $object;
    }

    // array example
    $array_personen = array(
        'person_1' => array('vorname' => 'Peer', 'nachname' => 'Stamml', 'alter' => 23),
        'person_2' => array('vorname' => array('Hans', 'Peter'), 'nachname' => 'Bossel', 'alter' => 62),
        'person_3' => array('vorname' => 'Nina', 'nachname' => 'Klokke', 'alter' => 37),
        'person_4' => array('vorname' => 'Anne', 'nachname' => 'Brusta', 'alter' => 34),
        'person_5' => array('vorname' => 'Suse', 'nachname' => 'Mohein', 'alter' => 28,
            array('kinder' => 2)
        )
    );

    // output the converted object array with debug function
    array_debug(
        convertArrayToObject($array_personen)
    );
?>

Die Konvertierung eins PHP Arrays, in ein stdClass Object, läßt sich auch ganz einfach mit der Notation object() umsetzten.

<?php
    // automatically converted array to stdClass with (object)
    $array_person = array(
        'alter' => 62, 'nachname' => 'Bossel', 'vorname' => 'Hans'
    );

    // turn array into PHP stdClass Object
    $show_person = (object) $array_person;

    // output the converted object array
    echo $show_person->nachname . ', ';
    echo $show_person->vorname . ' (Alter: ';
    echo $show_person->{'alter'} . ')';
?>

Um auf das stdClass Object zugreifen zu können, das in der $show_person Variable gespeichert ist, gibt es noch weitere Schreibweisen, wie z.B. $obj->{'name'}.

]]>
PHP Script
news-137 Sat, 04 Feb 2017 10:25:00 +0100 MySQL Insert Into Datensätze einfügen https://www.typo-script.de/mysql-script/mysql-insert-into-datensaetze-einfuegen/ Verwendung der MySQL INSERT INTO Funktion für das anlegen neuer Datensätze in einer MySQL Tabelle Sowohl MySQL, als auch SQL bieten die Funktion INSERT INTO (insert = einfügen), mit der sich neue Datensätze in einer Datenbanktabelle speichern lassen. Es gibt dabei zwei Schreibweisen für den INSERT INTO SQL Befehl. Die kurze Syntax für die MySQL INSERT INTO Anweisung, sieht im folgenden so aus.

INSERT INTO tabelle_kunden VALUES ('Paul', 'Meier', '21');
INSERT INTO tabelle_kunden VALUES ('Melissa', 'Müller', '29')

Bei der zweite Schreibweise, die für das einfügen neuer MySQL Datensätze verwendet findet, wird zusätzlich der Name der Tabellenspalte angegeben, in der der Wert gespeichert werden soll. So wird "Paul" hier explizit in der Tabellenspalte "spalte_name" abgelegt.

INSERT INTO tabelle_kunden (spalte_name, spalte_nachname, spalte_alter)
VALUES ('Paul', 'Meier', '21');
INSERT INTO tabelle_kunden (spalte_name, spalte_nachname, spalte_alter)
VALUES ('Melissa', 'Müller', '29')

Beim einfügen mehrerer Datensätzte, werden bei beiden Schreibweisen, Semikolons als Trennzeichen für die einzelnen Datensätze gebraucht. Existieren in einer Tabelle Spalten mit auto increment Werten (z.B. eine ID-Spalte), wird dafür ein leerer VALUE (Wert) vergeben ('').

INSERT INTO tabelle_kunden (auto_id, spalte_name, spalte_nachname, spalte_alter)
VALUES ('', 'Hans', 'Wurst', '55');
]]>
MySQL Script
news-136 Sat, 28 Jan 2017 15:00:00 +0100 TYPO3 Fluid if else Condition https://www.typo-script.de/typoscript/typo3-fluid-if-else-condition/ TYPO3 Fluid IF Viewhelper zur Prüfung von IF ELSE Bedingungen mit TypoScript Praxisbeispiel Alle möglichen Arten eines String-Vergleichs oder die Auswertung von Fluid IF / ELSE Conditions, werden dabei über den TYPO3 Fluid IF Viewhelper geleitet.
Die einfachste Form einer TYPO3 Fluid Condition (Bedingung), kann folgendermaßen realisiert werden.

<f:if condition="{bedingung}">
    Ist die "{bedingung}" TRUE / erfüllt, dann zeige diesen Text an.
</f:if>

Etwas "spektakulärer" wird es, wenn die if-Bedingung um eine else-Anweisung erweitert wird. Das bedeutet: if (wenn) Condition erfüllt, then (dann) mach das. Und falls die Bedingung nicht zutrifft, mach was else, also anderes.

<f:if condition="{bedingung}">
    <f:then>
        Wenn "{bedingung}" TRUE, also erfüllt, dann das anzeigen.
    </f:then>
    <f:else>
        Wenn "{bedingung}" FALSE, dann das hier anzeigen.
    </f:else>
</f:if>

Die Abfragen für die Bedingungen lassen sich auch ineinander verschachteln, wie das nächste Beispiel zeigt.

<f:if condition="{bedingungEins}">
    <f:then>
        <f:if condition="{bedingungZwei}">
            <f:then>
                Wenn "{bedingungEins}" UND "{bedingungZwei}" TRUE, dann das anzeigen.
            </f:then>
            <f:else>
                Wenn "{bedingungEins}" TRUE aber "{bedingungZwei}" FALSE, dann das anzeigen.
            </f:else>
        </f:if>
    </f:then>
    <f:else>
        Wenn "{bedingungEins}" FALSE, dann kommt das.
    </f:else>
</f:if>

Ein TypoScript Praxisbeispiel

Ein sinnvoller Ansatz für eine Fluid ViewHelper IF ELSE Bedingung, wäre die Prüfung auf ein existierendes Inhaltselement, das über ein FLUID-Template angezeigt werden soll.
Mit dem TypoScript-Objekt FLUIDTEMPLATE, werden hier alle Komponenten für das FLUID-Template eingebunden. Über die variables, werden dann die Template-Sektionen zugwiesen.

page.10 = FLUIDTEMPLATE
page.10 {
    file = fileadmin/templates/fluid/template.html
    partialRootPath = fileadmin/templates/fluid/partials/
    layoutRootPath = fileadmin/templates/fluid/layouts/
    variables {
        // Header-Bereich
        contentHeader < styles.content.get
        contentHeader.select.where = colPos = 0
        contentHeader.if.isTrue {
            numRows < styles.content.get
            select.where = colPos = 0
        }
        // Inhalts-Bereich
        contentMain < styles.content.get
        contentMain.select.where = colPos = 1
        contentMain.if.isTrue {
            numRows < styles.content.get
            select.where = colPos = 1
        }
        // Footer-Bereich
        contentFooter < styles.content.get
        contentFooter.select.where = colPos = 2
        contentFooter.if.isTrue {
            numRows < styles.content.get
            select.where = colPos = 2
        }
    }
}

Der Trick hier ist, das mittels der TypoScript-Funktion numRows geprüft wird, ob es ein Inhalselement (Content Element) in der jeweiligen colPos 0, 1 oder 2 der Seite gibt.
Die Fluidtemplate-Variable, kann nun auch gleich für die TYPO3 Fluid IF-Bedingung benutzt werden.

<f:if condition="{contentMain}">
    Dieser Text wird angezeigt, wenn auf dieser Seite
    ein Inhaltselement mit einer Referenz auf
    Spalte 1 existiert.
    Mit dem TYPO3 Fluid format Viewhelper,
    wird das Content Element dann auch gleich angezeigt.
    <f:format.html parseFuncTSPath="">{contentMain}</f:format.html>
</f:if>
]]>
TypoScript
news-135 Thu, 19 Jan 2017 12:00:00 +0100 Fluid cObject Records https://www.typo-script.de/typoscript/fluid-cobject-records/ Inhaltselemente (Content Elements) in Fluid über das TypoScript RECORDS Object laden Sehr oft benötigt man in einem TYPO3 Fluid-Template ein Inhaltselement, das an geeigneter Stelle ausgegeben / geladen werden soll. Ein gute Möglichkeit dafür, ist das TYPO3 cObject RECORDS, mit dem das im Handumdrehen bewerkstelligen kann. Der TypoScript Code dafür wäre folgender.

lib.fluidLoadRecord = RECORDS
lib.fluidLoadRecord {
    source.data = current:1
    source.intval = 1
    dontCheckPid = 1
    tables = tt_content
}

Das Besondere an dieser Variante besteht darin, das die ID des zu ladenden Datensatzes über den Fluid-ViewHelper data-Parameter, direkt im Fluid-Template notiert wird.

# entweder mittels XML-Schreibweise so:
<f:cObject typoscriptObjectPath="lib.fluidLoadRecord">123</f:cObject>

# oder als Fluid Inline Notation:
{f:cObject(typoscriptObjectPath: 'lib.fluidLoadRecord', data: '123')}

In diesem Beispiel, wird der Datensatz mit der ID 123 aus der Tabelle tt_content, im Fluid-Template angezeigt.

]]>
TypoScript
news-132 Sun, 15 Jan 2017 17:00:00 +0100 SQL Abfrage ob ein Feld nicht leer ist https://www.typo-script.de/mysql-script/sql-abfrage-ob-ein-feld-nicht-leer-ist/ Prüfung von MySQL Spalten, ob ein String (Text / Zahl) existiert und nicht NULL oder 0 ist Folgende MySQL Abfrage bietet einen Filter, um leere Felder auszusieben. Die Ausgabe - in dem Fall die "Vor- und Nachnamen" - erfolgt nur, wenn im Feld "nachname" ein Text-String vorliegt. Ist ein Feld in der Tabellen-Spalte leer, NULL oder hat den Wert 0, wird dieser Datensatz nicht angezeigt.

SELECT vorname, nachname FROM personen
    WHERE 1
        AND nachname IS NOT NULL
            AND nachname != ''
                OR nachname != 0;

Die Negation dieser WHERE-Klausel, ist dann entsprechend: SELECT ... WHERE nachname IS NULL and so weiter.

]]>
MySQL Script
news-134 Tue, 10 Jan 2017 14:00:00 +0100 TYPO3 UTF-8 file system SystemLocale not set https://www.typo-script.de/blog/typo3-utf-8-file-system-systemlocale-not-set/ Umgang mit der TYPO3 Meldung System locale not set on UTF-8 file system Hin und wieder passiert es, das folgende Meldung im TYPO3 Install-Tool erscheint: System locale not set on UTF-8 file system. Grund dafür ist, das das "UTF8filesystem" aktiviert wurde aber dazu entweder kein Zeichensatz oder der falsche für das System hinterlegt wurde.

Wenn der Wert für die systemLocale auf "de_DE.UTF-8" oder "en_US.UTF-8" hinterlegt wurde, sollte das auf den meisten Servern bereits funktionieren.

Auf Windows-Servern, sollte die Meldung mit dem Zeichensatz / Wert "de-de" oder "German" verschwinden.

All configuration -> [SYS][systemLocale]: de-de
]]>
Blog
news-133 Thu, 05 Jan 2017 16:00:00 +0100 tx_news Category Image Shortcut Link https://www.typo-script.de/typoscript/tx-news-category-image-shortcut-link/ Fluid Umsetzung zur Anzeige des tx_news Category Image und Link zum tx_news Category Shortcut Die TYPO3 Erweiterung tx_news (News), bietet durch die Benutzung der Fluid-Template Engine tolle Möglichkeiten zur Erweiterung und Individualisierung der auszugebenen Nachrichten. Mit diesem kleinen Fluid-Snippet, wird das Kategorie-Bild (sofern vorhanden) zum Artikel angezeigt und ein Link zum Kategorie-Shortcut erzeugt.

<f:if condition="{newsItem.firstCategory.shortcut}">
    <f:link.page pageUid="{newsItem.firstCategory.shortcut}" title="{newsItem.firstCategory.description}">
        <f:if condition="{newsItem.firstCategory.images}">
            <f:for each="{newsItem.firstCategory.images}" as="categoryImage">
                <f:image src="{categoryImage.originalResource.publicUrl}"></f:image>
            </f:for>
        </f:if>
        <small>
            {newsItem.firstCategory.title}
        </small>
    </f:link.page>
</f:if>
]]>
TypoScript
news-130 Sat, 12 Mar 2016 13:00:00 +0100 Social Share Links mit TypoScript https://www.typo-script.de/typoscript/social-share-links-mit-typoscript/ Einbinden von Sharebuttons für Facebook, Twitter und anderer Social Bookmark Dienste mit TypoScript Wer beginnt in seinen Blog die vorgefertigten API's der zahlreichen Sharing- / Bookmarkdienste einzupflegen, wird schnell feststellen, das von Facebook, Twitter, Google und Co. jede Menge an Code geliefert wird, obwohl man nur einen Share-Link haben möchte. U.u. wird damit die eigene Seite unnötig aufgebläht und verlangsamt. Um diesen Umstand zu vermeiden, gibt es dieses kleine Social Share TypoScript Snippet, welches einen Sharing-Link generiert, auf den der Besucher klicken kann, um einen Artikel zu teilen.

# google
lib.shareLinks_google = TEXT
lib.shareLinks_google {
  wrap = <li>|</li>
  innerWrap = <span class="sprite sprite-share_google"></span><span class="sr-only">|</span>
  value = Share on Google Plus
  typolink {
    title = Share on Google Plus
    ATagParams = class="share_google"
    parameter.cObject = COA
    parameter.cObject {
      10 = TEXT
      10.dataWrap = https://plus.google.com/share?url={$lib.baseURL}|
      10.typolink.parameter.data = TSFE:id
      10.typolink.returnLast = url
      10.typolink.addQueryString = 1
      10.typolink.addQueryString.exclude = id
    }
  }
}

# twitter
lib.shareLinks_twitter = TEXT
lib.shareLinks_twitter {
  wrap = <li>|</li>
  innerWrap = <span class="sprite sprite-share_twitter"></span><span class="sr-only">|</span>
  value = Share on Twitter
  typolink {
    title = Share on Twitter
    ATagParams = class="share_twitter"
    parameter.cObject = COA
    parameter.cObject {
      10 = TEXT
      10.dataWrap = https://twitter.com/share|?
      20 = TEXT
      20.data = page:title
      20.wrap = text=|
      20.rawUrlEncode = 1
    }
  }
}

# main social share lib
lib.shareLinks = COA
lib.shareLinks {
  wrap = <ul class="shareLinks">|</ul>
  10 < lib.shareLinks_google
  20 < lib.shareLinks_twitter
}

Die beiden TypoScript Sharelinks für Twitter und Google, können beliebig erweitert werden, um z.B. eine Facebook-Button oder andere Bookmarkdienste abzubilden. In den "Extra Infos" gibt es dazu nützliche Informationen und Tools.

CSS Sprite sheets mit Stitches An HTML5 sprite sheet generator. Iconset "Miu square shadow social" und andere kostenlose Icons bei Iconfinder. Crunchify Blog: List of Social Sharing URLs for Handy Reference – Social Media Sharing Buttons Without JavaScript. Typoscript Snippet: Share page on Facebook, Twitter or mail in typoscript.

]]>
TypoScript
news-131 Wed, 09 Mar 2016 14:00:00 +0100 Kommentare schreiben im Blog https://www.typo-script.de/blog/kommentare-schreiben-im-blog/ Den eigenen Senf im Typo-Script.de Blog dazu geben, mit der neuen internen Kommentar-Funktion Basierend auf der TYPO3 Extension formhandler, gibt es ab sofort, für jeden der an der einen oder anderen Stelle etwas mitzuteilen hat, die Funktion, eigene Kommentare zu den veröffentlichten Blogbeiträgen abzugeben. Wie zu sehen ist, wird dabei die E-Mail nicht preisgegeben. Wer neben konstruktiven Kommentaren seine eigene Seite promoten möchte, kann seine Internetadresse da lassen, die dann verlinkt wird.

]]>
Blog
news-129 Sat, 05 Mar 2016 13:55:00 +0100 TYPO3 und Bootstrap https://www.typo-script.de/blog/typo3-und-bootstrap/ TYPO3 CMS und das Bootstrap Responsive Framework zum Aufbau eines Responsive Templates nutzen Für den Umsetzung benötigt man erst einmal eine solide TYPO3 Installation (HELLO WORLD!) und das responsive framework Bootstrap. Die Zusammenführung des TYPO3 CMS und Bootstrap zur Gestaltung einer responsiven Webseite, kann dann auch schon starten. Zuerst werden die nötigen CSS (bootstrap.min.css) und JS (bootstrap.min.js) Dateien aus dem Bootstrap Verzeichnis eingebunden. Das geschieht folgendermaßen.

page.includeCSS {
    // Bootstrap CSS Datei
    file_01 = fileadmin/templates/bootstrap/css/bootstrap.min.css
    file_01.media = screen
}

page.includeJSFooterlibs {
    // jQuery api wird für die Bootstrap jQuery Funktionen gebraucht
    file_01 = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    file_01 {
        external = 1
        disableCompression = 1
        excludeFromConcatenation = 1
        forceontop = 1
    }
    // Bootstrap JS Datei
    file_02 = fileadmin/templates/bootstrap/js/bootstrap.min.js
}

Die Grundstein zum Aufbau des Responsive Templates, ist nun bereits erledigt. Wer mehr zum Thema "includeCSS" oder "includeJS" erfahren will, kann in den Beiträgen CSS Dateien einbinden und Javascript in TYPO3 einbinden nachlesen.

Weiter gehts mit der Umsetzung des Bootstrap Responsive Template. Je nach dem was gewünscht ist, kann nun variiert werden. In diesem Beispiel besteht das HTML Template aus Kopf, Inhalt und Footer. Nach diesen Vorgaben, wird nun ein neuer TYPO3 Backend-Layout Datensatz namens "Bootstrap" erstellt, der folgende Struktur haben sollte.

backend_layout {
    colCount = 1
    rowCount = 3
    rows {
        1 {
            columns {
                1 {
                    name = Header
                    colPos = 1
                }
            }
        }
        2 {
            columns {
                1 {
                    name = Content
                    colPos = 0
                }
            }
        }
        3 {
            columns {
                1 {
                    name = Footer
                    colPos = 2
                }
            }
        }
    }
}

Ist die Konfiguration für das Backend-Layout festgelegt und der Datensatz gespeichert, muss dieses Backend-Layout nun auch einer Seite im TYPO3 Seitenbaum zugewiesen werden. Das geschieht über die Seiteneigenschaften -> Erscheinungsbild -> Backend-Layout. Entweder nur für diese Seite oder auch für Unterseiten dieser Seite.

Soweit so gut. Ist die Seite nun mit dem angelegten Backend-Layout "Bootstrap" verknüpft und gespeichert, sollte sich die Aufteilung der Spalten, bei der Seiten-Ansicht im Backend bereits verändert haben. Es kann begonnen werden, die drei Bereiche: Header, Inhalt und Footer mit Inhaltselementen zu befüllen.

Der Abschluß des Tutorials zur Integration von Bootstrap in TYPO3, bildet nun die Zuweisung der Inhalte aus den Spalten, in das Bootstrap Fluid-Template. Dazu einfach eine HTML Datei mit dem Namen "bootstrap-fluid-template.html" in den Ordner: fileadmin/templates/html/ speichern und mit diesem HTML Quelltext ausstatten.

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <f:format.html parseFuncTSPath="">{header}</f:format.html>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">   
      <f:format.html parseFuncTSPath="">{content}</f:format.html>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">   
      <f:format.html parseFuncTSPath="">{footer}</f:format.html>
    </div>
  </div>

</div>

Die Fluid Viewhelper werden nun mit dem Inhalt aus den Spalten mittels des TypoScript Objekts "FLUIDTEMPLATE" gefüllt.

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = FLUIDTEMPLATE
page.10 {
    file = fileadmin/templates/html/bootstrap-fluid-template.html
    partialRootPath = fileadmin/templates/html/partials/
    layoutRootPath = fileadmin/templates/html/layouts/
    variables {

        header < styles.content.get
        header {
            select.where = colPos = 1
            wrap = <div class="header">|</div>
        }

        content < styles.content.get
        content {
            select.where = colPos = 0
            wrap = <div class="content">|</div>
        }

        footer < styles.content.get
        footer {
            select.where = colPos = 2
            wrap = <div class="footer">|</div>
        }

    }
}

Auf dieser Grundlage lassen sich nun für individuelle responsive Templates für TYPO3 erstellen, die nach belieben erweitert und verfeinert werden können. Und nicht vergessen immer schön den TYPO3 Cache zu löschen, damit Veränderungen auch im Frontend stattfinden.

]]>
Blog
news-128 Wed, 02 Mar 2016 13:55:00 +0100 Javascript in TYPO3 einbinden https://www.typo-script.de/typoscript/javascript-in-typo3-einbinden/ Mit TypoScript die Einbindung von Javascript oder dem JS Framework jQuery in TYPO3 erreichen Javascript oder die Javascript Library jQuery, lassen sich mit vordefinierten TypoScript Funktionen recht einfach in das TYPO3 Page Objekt integrieren. Es gibt dafür verschiedene Möglichkeiten, für die Position im Quelltext, in der JS Dateien eingebunden werden. Die TypoScript Funktionen includeJS, includeJSLibs und jsInline, binden Javascript Dateien oder JS Quellcode im <head> Bereich des HTML Dokuments ein. Die Einbindung von Javascript Code am Ende des HTML Dokuments, vor dem schließenden </body> Tag, wird mit den TypoScript Funktionen: includeJSFooter, includeJSFooterlibs und jsFooterInline erreicht. Möchte man erreichen, das der gesamte Javascript Code im Footer eingebunden wird, kann die TypoScript "moveJsFromHeaderToFooter" genutz werden.

page.includeJS {

    // relativer Dateipfad zur Javascript / jQuery Datei
    file_01 = fileadmin/jquery-init.js

    // Weitere Konfigurationen zur Einbindung, für die Javascript oder jQuery Datei
    file_01 {

        // Angabe zum MIME Typ der Javascript oder jQuery Datei (Standard: text/javascript)
        type = application/x-javascript

        // Diese Javascript oder jQuery Datei an erster Stelle laden 0 / 1
        forceOnTop = 1

        // Javascript oder jQuery Datei von der Kompression ausschließen
        // TypoScript: config.compressJs
        disableCompression = 1

        // Die Javascript oder jQuery Datei von der Zusammenfügen mit anderen Dateien ausschließen
        // TypoScript: config.concatenateJs
        excludeFromConcatenation = 1
    }

    // Eine weitere Javascript oder jQuery Datei
    // unter Verwendung einer if else Bedingung einbinden
    file_02 = fileadmn/form-check.js
    file_02 {
        // JS Datei beim Aufruf der Formular-Seite mit der ID 4
        if {
            // Seiten ID
            value = 4
            equals.data = TSFE:id
        }
    }

    // Externer Javascript Dateien einbinden
    file_03 = http://www.seite.tdl/js/share.js
    file_03 {
        // Der external Parameter ermöglicht die Einbindung der JS Datei
        // ohne Prüfung, ob diese existiert
        external = 1
    }

    // weitere Javascript Dateien einbinden
    file_04 = ...

}

Die aufgeführten Parameter für die gezeigte TypoScript Funktion "includeJS", gelten auch für die Funktionen: includeJSLibs, includeJSFooter und includeJSFooterlibs. Die "Libs" werden dabei vorrangig behandelt und zuerst geladen.

Ab dem Einsatz der TYPO3 Version 7.1, gibt es einen weiteren Paramter "async", der die Einbindung von Javascript Dateien asynchron durchführt.

page.includeJSFooterlibs {
    // JavaScript-Dateien asynchron nachladen (ab TYPO3 7.1)
    file_01 = https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
    file_01 {
        async = 1
        external = 1
        disableCompression = 1
        excludeFromConcatenation = 1
    }
}

Ein weitere effektive Variante, um z.B. die Javascript Library jQuery einzubinden, kann mit der Typoscript Funktion "javascriptLibs" umgesetzt werden.

page.javascriptLibs {

    # Include von jQuery
    jQuery = 1

    # Welche Version? (mögliche Werte: latest|1.12.0|…, Standard: latest)
    # Hinweis: falls jQuery.source aus einem CDN wie "google" kommt
    # muss der Parameter jQuery.version auf "latest" stehen
    jQuery.version = latest

    # lokaler Include oder von verschiednen CDNs (mögliche Werte: local|google|jquery|msn, Standard: local)
    jQuery.source = local

    # jQuery Conflict Mode
    jQuery.noConflict = 1

    # Bei aktivem noConflict Mode
    # jQuery mit "TYPO3.###NAMESPACE###(…);" benutzen # (string, Standard: jQuery)
    jQuery.noConflict.namespace = myNamespace

}

Wer wissen möchte, wie sich in TYPO3 CSS Dateien integrieren lassen, kann sich auf der Seite "CSS Dateien einbinden", schlau machen.

]]>
TypoScript
news-127 Sat, 27 Feb 2016 13:55:00 +0100 tt_news Generic Marker https://www.typo-script.de/typoscript/tt-news-generic-marker/ Mit der tt_news Genericmarkers Funktion, eigene Marker für die TYPO3 Erweiterung tt_news entwickeln und befüllen Die TYPO3 Erweiterung tt_news, kennt sicher jeder, der sich bereits mit einem TYPO3 Projekt auseinandergesetzt hat und dafür eine Blog Extension integrieren wollte/mußte. Die Extension tt_news bringt von Hause aus, eine große Vielfalt an Funktionen mit, die für eine News- oder Blogseite benötigt werden. In einigen Fällen reicht das aber nicht und es müssen weitere Funktionen her, die den Vorstellungen genüge tun. Genau für diesen Fall, gibt es bei tt_news bereits eine Schnittstelle, die einfach für eigene Marker genutzt werden darf. Die Funktion nennt sich "Genericmarkers" und wird folgendermaßen verwendet.

plugin.tt_news.genericmarkers {

    // Eine Bezeichnung für den Marker wählen
    // und mit beliebigem Content befüllen: TEXT, CONTENT, RECORDS, IMAGE, usw.
    SINGLEVIEW_MARKER = TEXT
    SINGLEVIEW_MARKER {
        value = Zeig mir den Text aus dem Generic Marker SINGLEVIEW_MARKER
        wrap = <div class="genericmarkers"><p>|</p></div>
    }

}

Da der generische Marker in diesem Beispiel mit SINGLEVIEW gekenntzeichnet ist, kann dieser nun im tt_news Template im Abschnitt "###TEMPLATE_SINGLE###", wie folgt abgerufen werden.

<!-- ###TEMPLATE_SINGLE### begin
    This subpart is used to display single news items
-->

###GENERIC_SINGLEVIEW_MARKER###

... weitere Marker.

<!--TYPO3SEARCH_begin-->
<!-- ###TEMPLATE_SINGLE### end -->

Wichtig beim Aufruf des Genericmarker ist, das dieser am Anfang immer mit ###GENERIC_### gekenntzeichnet wird.

Wer ein weiteres Beispiel sucht, in dem die Extenion tt_news, um einen neuen Reiter mit Datenbankfeld erweitert wird, kann sich dazu den Blogbeitrag "TYPO3: Einsatz von Generic Markers in tt_news", bei Teamgeist Medien ansehen.

]]>
TypoScript
news-126 Wed, 24 Feb 2016 13:55:00 +0100 Bilder lizenzfrei und kostenlos https://www.typo-script.de/blog/bilder-lizenzfrei-und-kostenlos/ Kostenlose Fotos und lizenzfreie Bilder zur Illustration von Blog oder Homepage, gibt es auf der Bilderplattform von StockSnap.io Wer für sein Webprojekt noch Bilder sucht, die zum einen lizenzfrei und dazu noch kostenlos verwendet werden dürfen, sollte sich mal auf der Webseite von StockSnap.io umschauen. Dort kann man sich entweder durch alle lizenzfreien Fotos durchscrollen oder die kostenlosen Bilder mit die Eingabe von Tags ausfindig machen. Es gibt zudem auch die Möglichkeit vordefinierte Filter, wie Anzahl Downloads oder Views, zu nutzen.

stocksnap.io

Die Bilddatenbank StockSnap, ist auch für Betreiber kommerzieller Internetseiten eine gute Quelle für lizenzfreie Fotos. Alle auf der Bildplattform angebotenen Bilder, unterliegen der Creative Commons CCO Lizenz. Das heißt, das die Fotos für kommerzielle Zwecke genutzt, bearbeitet oder kopiert werden dürfen.

Wer also in seinem Bildarchiv nicht die richtigen Fotomotive hat oder sich auf die Suche nach neuem Bildmaterial begeben möchte, sollte sich ruhig mal auf dem Portal von StockSnap umsehen. Einen Webauftritt mit qualitativ hochwertigen Bildern zu präsentieren, bringt für den einen oder anderen Besucher sicher einen Pluspunkt mit sich.

]]>
Blog
news-125 Sat, 20 Feb 2016 13:55:00 +0100 pt_extlist in TypoScript einbinden https://www.typo-script.de/typoscript/pt-extlist-in-typoscript-einbinden/ Die TYPO3 Extbase Erweiterung pt_extlist in ein TypoScript Objekt einbinden Mit der TYPO3 Erweiterung pt_extlist, lassen sich, mit etwas Übung :-), Listen zusammensetzten, die man noch mit Pager, Sortierung, etc., austatten kann. Wenn man sich nun eine Liste angefertigt hat, wird diese über ein TYPO3 Inhaltselement referenziert und im Frontend angezeigt. Möchte man nun aber nicht den Weg über das Inhalselement gehen, kann folgender TypoScript-Auszug weiterhelfen.

page.1 = COA
page.1 {

    10 = USER
    10 {
        userFunc = tx_extbase_core_bootstrap->run
        extensionName = PtExtlist
        pluginName = Pi1

        settings.listIdentifier = meine_liste
    }

}

Über den "listIdentifier", wird den entsprechende Liste angezeigt.

plugin.tx_ptextlist.settings.listConfig.meine_liste {
...
}
]]>
TypoScript