In der neuen TYPO3 7.6.x Version kann es dazu kommen, dass der RTE nicht standardmäßig aktiviert ist!
Ich hatte das Problem, als ich die Ext.: fluid_styled_content installiert habe und die TYPO3 Ext.: css_styled_content deinstalliert, wurde der RTE nicht mehr im textmedia cType angezeigt.
In den Benutzer-Einstellungen könnt Ihr im Reiter: Bearbeiten und erweitere Funktionen hier einen Haken setzten: Rich-Text-Editor aktivieren (falls verfügbar)
Dann sollte der RTE wieder angezeigt werden.
Heute wurde eine neue TYPO3 CMS Version 6.2.22 LTS und 7.6.6 LTS released! Alle wichtigen Infos für die Bugfixed stehen hier auf der TYPO3 Webseite:
https://wiki.typo3.org/TYPO3_CMS_6.2.22
https://wiki.typo3.org/TYPO3_CMS_7.6.6
Download
Dateien-Files findet Ihr wie immer hier:
https://typo3.org/download/ oder via get https://get.typo3.org/.
Da immer mehr im Web gefragt wird, wie man nun in der neuen TYPO3 7.6 das Bild auslesen und ggf. bearbeiten kann, habe ich dazu mal eine neue Anleitung geschrieben.
Wichtig ist hier zu wissen, es gibt eine neue Content-Style-Engine = fluid_styled_content
TYPO3 möchte für die neuen Versionen (TYPO3 8) die Frontend-Ausgaben mit reinem Fluid ausgeben. Damit es später nicht mehr zu Problemen kommt, solltet Ihr in den neuen TYPO3 7 Versionen auch mit fluid_styled_content arbeiten. Den findet Ihr im Extension-Manager und könnt Ihr installieren, wichtig ist hier, Ihr solltet den alten „css_styled_content“ deinstallieren, da sonst dem Redakteur alle Elemente angeboten werden!
Im Root-Template unter „Statische Templates einschließen“ müsst Ihr dann noch „Content Elements (fluid_styled_content)“ laden und „Content Elements (css_styled_content)“ entfernen! Das sollten die „Vorbereitung“ für die neue Fluid-Engine sein.
Wichtig, es gibt nun keine Elemente mehr wie: Bild, Bild mit Text oder Text ! Diese wurden alle zusammengelegt und heißt nun „Text & Medien“ (textmedia). Hier könnt Ihr den TYPO3 7 Change zu dem Thema nachlesen: Migrate CTypes text, image and textpic to textmedia
Bevor Ihr aber nun anfangt die neuen Fluid-Elemente zu bearbeiten, müssen wir via typoscript dem TYPO3 System noch sagen, dass er auch die ausgelagerten Elemente verwenden soll. Schaut Euch dazu auf jeden Fall vorher noch mal die Extension: fluid_styled_content an: /typo3_src-7.6.xx/typo3/sysext/fluid_styled_content/
Im Resources Ordner liegen alle Templates die es im Backend gibt. D.h. wir können diese via Fluid erweitern, bearbeiten, auslesen usw.
Legt Euch dazu in Eurem fileadmin Ordner neue Strukturen an. Ich habe diese hier verwendet: /fileadmin/Templates/FluidStyledContent/Resources/…
Dort kopiere ich aber nicht alles rein, sondern nur wirklich das, was ich verändern/erweitern/bearbeiten möchte! Damit die Daten auch weiterhin aktualisiert werden.
Da ich selber noch nicht so viel damit gemacht habe, hier mal ein kleines Beispiel wie wir nun das Element „Text & Media“ / „textmedia“ bearbeiten können um z.B. nur ein Image auszugeben!
Meine Ordner-Struktur:
– fileadmin
— FluidStyledContent
— Resources
—- Private
—– Layouts
—– Partials
—– Templates
Im Ordner „Templates“ habe ich mir die Datei aus der Extension kopiert: Textmedia.html und die Datei aus dem Ordner Partials: MediaGallery.html
Da sie das Image rendert!
Damit nun der neue Fluid-Content auch geladen wird, müsst Ihr noch im Setup die neuen fluidContent RootPaths eintragen.
Dateien via typoscript auslagern:
# tt_content Fluid Extend
lib {
fluidContent {
templateRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Templates/
}
partialRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Partials/
}
layoutRootPaths {
50 = fileadmin/Templates/FluidStyledContent/Resources/Private/Layouts/
}
}
}
Im TYPO3 Backend unter dem Element: Text & Media haben wir bei dem Tab: Erscheinungsbild die Select-Box: Layout
Mit diesem Selector können wir nun z.B. unterschiedliche Ausgaben aufbauen!
Orginal-Fluid-Template: Textmedia.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="c{data.uid}">
<f:if condition="{gallery.position.noWrap} != 1">
<f:render partial="Header" arguments="{_all}" />
</f:if>
<div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
<div class="ce-bodytext">
<f:if condition="{gallery.position.noWrap}">
<f:render partial="Header" arguments="{_all}" />
</f:if>
<f:format.html>{data.bodytext}</f:format.html>
</div>
<f:if condition="{gallery.position.vertical} == 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
</div>
<f:render partial="Footer" arguments="{_all}" />
</div>
</html>
Jetzt können wir mit der Auswahl vom dem z.B. „Layout 2“ das Template anders aufbauen lassen.
Hier reicht nun schon ein einfaches condition="{data.layout}==2" !
Mit dem debug {data} könnt Ihr euch auch mal alle vorhanden Daten ausgeben lassen. So seht Ihr dann das Feld: layout
Nun habe ich noch die HTML-Datei „MediaGallery.html“ im Ordner Partials kopiert und in „MediaRawImage.html“ benannt.
Dort möchte ich jetzt ein reines Bild ohne Div´s oder Extra-Einstellungen ausgeben:
(Wäre z.B. auch pratisch um einen TYPO3 Image Slider zu programmieren)
Das HTML können wir dann mit einer condition / then / else aufbauen.
Hier frage ich nun das Feld „layout“ ab und sage, wenn „Layout 2“ ausgewählt wurde, dann lade mir das neue HTML/Fluid Template: MediaRawImage
Wenn das nicht ausgewählt ist, dann lade das normale Text & Media Element (MediaGallery.html).
Neues Fluid Textmedia.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{data.layout}==2">
<f:then>
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaRawImage" arguments="{_all}" />
</f:if>
</f:then>
<f:else>
<f:if condition="{gallery.position.vertical} != 'below'">
<f:render partial="MediaGallery" arguments="{_all}" />
</f:if>
</f:else>
</f:if>
</html>
Nun könnt Ihr in der neuen Fluid Image Datei: MediaRawImage.html das Fluid so anpassen wie ihr es haben wollt.
Hier ein Beispiel MediaRawImage.html:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:switch expression="{column.media.type}">
<f:case value="3">
<f:render section="audioType" arguments="{_all}" />
</f:case>
<f:case value="4">
<f:render section="videoType" arguments="{_all}" />
</f:case>
<f:case default="TRUE">
<f:render section="imageType" arguments="{_all}" />
</f:case>
</f:switch>
</f:for>
</f:for>
<f:section name="imageType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="audioType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="videoType">
<f:render section="media" arguments="{_all}" />
</f:section>
<f:section name="media">
<f:media file="{column.media}" width="{column.dimensions.width}" height="{column.dimensions.height}" alt="{column.media.alternative}" title="{column.media.title}" />
</f:section>
</html>
Natürlich könnt Ihr auch die Bereiche wie Audio und Video löschen! 
Aber wichtig, Ihr müsst das f:render behalten, da dort das Image aufgebaut und abgefragt wird!
Das „Label“ könnt Ihr noch umbenennen, dazu in die Seiteneigenschaften von der Root-Seite gehen.
TSconfig:
TCEFORM {
tt_content {
layout {
altLabels {
0 = Standard
2 = Roh Bild
}
}
}
}
Wie geschrieben, bin ich selbst noch nicht so tief in dem neuen fluid-content drin, daher gerne in den Kommentaren ander Wege/Lösungen schreiben! Danke!
Die neue TYPO3 7.6 Extension fluid_styled_content ersetzt die alte css_styled_content und daher beschreibe ich Euch hier wie Ihr eigene Konstanten dort verwenden und übergeben könnt.
Schaut Euch auf jeden Fall mal im sysext Ordner die original Extension an, dort gibt es schon ein paar Constants für die Grund-Einstellungen.
Und genau da können wir unsere eigenen Konstanten mit eintragen! Wir gehen dazu in unser Root-Setup und tragen dort folgende Beispiel TYPOSCRIPT Werte ein.
In meinen Beispiel möchte ich einem neuen IMAGE – Element eigene width und height Werte via typoscript geben:
(hier die Anleitung wie Ihr das TYPO3 Element „Text & Media“ erweitert)
# tt_content Fluid Extend
lib {
fluidContent {
settings {
# neues Bild-Element
mediaSlider {
width = {$styles.content.mediaRawImage.width}
height = {$styles.content.mediaRawImage.height}
}
}
}
}
In Euren Root-Constants tragt Ihr dann folgende typoscript Werte ein:
styles {
content {
mediaRawImage {
width = 360c
height = 144c
}
}
}
Fluid_Content HTML-Template bearbeiten
(hier die Anleitung wie Ihr das TYPO3 Element „Text & Media“ erweitert)
<f:section name="media">
<f:media
file="{column.media}"
width="{settings.mediaSlider.width}"
height="{settings.mediaSlider.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
class="img-responsive"
/>
</f:section>
nun könnt Ihr via typoscript die Höhe und Breite des neuen Element bearbeiten.
Natürlich könnt Ihr auch alle anderen Elemente bearbeiten und um eigenen Konstanten erweitern und um konfigurieren.
Bis vor ein paar Monaten waren die TYPO3 6.2 indexed_search Fluid Version noch etwas am kränkeln und lief noch nicht perfekt. Sollte sich aber mit den neuen TYPO3 7.6 Versionen geändert haben…
Nun möchte ich Euch erst einmal erklären, wie Ihr das HTML Template auslagern und somit auch bearbeiten könnt!
Danach erkläre ich noch, wie Ihr die Search-Box auslagern und in Eurer Template integrieren könnt und die Suchwörter auch an die Such-Seite übergeben werden!
Dazu kopiert von der Ext. indexed_search den Resources Ordner und legt den in Eurer fileadmin-System ab.
Nun trag Ihr in Eurer „Setup“ folgende Werte ein:
# Plugin configuration
plugin {
tx_indexedsearch {
view {
templateRootPaths {
0 = EXT:indexed_search/Resources/Private/Templates/
999 = {$plugin.tx_indexedsearch.view.templateRootPath}
}
partialRootPaths {
0 = EXT:indexed_search/Resources/Private/Partials/
999 = {$plugin.tx_indexedsearch.view.partialRootPath}
}
layoutRootPaths {
0 = EXT:indexed_search/Resources/Private/Layouts/
999 = {$plugin.tx_indexedsearch.view.layoutRootPath}
}
}
}
}
Allgemeine Einstellungen könnt Ihr der Anleitung entnehmen:
https://docs.typo3.org/typo3cms/extensions/indexed_search/latest/Configuration/TypoScript/Index.html
Und dazu die passenden Konstanten (Pfade natürlich anpassen):
plugin {
tx_indexedsearch {
view {
# cat=plugin.tx_indexedsearch/file; type=string; label=Path to template root (FE)
templateRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Templates/
# cat=plugin.tx_indexedsearch/file; type=string; label=Path to template partials (FE)
partialRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Partials/
# cat=plugin.tx_indexedsearch/file; type=string; label=Path to template layouts (FE)
layoutRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Layouts/
}
}
}
Nun könnt Ihr in dem Search Template alles anpassen und die Extension kann weiterhin geupdated werden.
Als nächstes zeige ich Euch, wie Ihr z.B. nur ein Suchfeld auf Eure Webseite einbaut und die Suchwörter an die Such-Seite übermittelt.
Bitte schaut Euch auch mal TYPO3 FLUID FORM einmal genauer an:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Form.html
Dort sind soweit alle Begriffe erklärt, die wir nun in den FORM-Tag einbauen.
Search-Formular mit FLUID nachbauen:
<f:form class="main-search" pageUid="14" method="post" id="tx_indexedsearch" noCacheHash="true" absolute="0" action="search" extensionName="IndexedSearch" pluginName="pi2" controller="Search">
<div class="hidden tx-indexedsearch-hidden-fields">
<input name="tx_indexedsearch_pi2[search][_sections]" value="0" type="hidden">
<input id="tx_indexedsearch_freeIndexUid" name="tx_indexedsearch_pi2[search][_freeIndexUid]" value="_" type="hidden">
<input id="tx_indexedsearch_pointer" name="tx_indexedsearch_pi2[search][pointer]" value="0" type="hidden">
<input name="tx_indexedsearch_pi2[search][ext]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][searchType]" value="1" type="hidden">
<input name="tx_indexedsearch_pi2[search][defaultOperand]" value="0" type="hidden">
<input name="tx_indexedsearch_pi2[search][mediaType]" value="-1" type="hidden">
<input name="tx_indexedsearch_pi2[search][sortOrder]" value="rank_flag" type="hidden">
<input name="tx_indexedsearch_pi2[search][group]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][languageUid]" value="-1" type="hidden">
<input name="tx_indexedsearch_pi2[search][desc]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][numberOfResults]" value="10" type="hidden">
<input name="tx_indexedsearch_pi2[search][extendedSearch]" value="" type="hidden">
</div>
<div class="input-row">
<div class="form-group tx-indexedsearch-form">
<f:form.textfield name="search[sword]" value="" id="tx-indexedsearch-searchbox-sword" class="form-control tx-indexedsearch-searchbox-sword" placeholder="Webseite durchsuchen..." />
</div><!-- /.form-group -->
<div class="form-group tx-indexedsearch-search-submit">
<f:form.button type="submit" class="btn btn-default tx-indexedsearch-searchbox-button" name="search[submitButton]" value="" id="tx-indexedsearch-searchbox-button-submit"><i class="fa fa-search"></i></f:form.button>
</div>
</div>
</f:form>
Ändert noch die „pageUid“ in Eure ID ab, wo das eigentliche indexed_search PlugIn eingebunden ist. (im meinen Fall die ID=14).
Die „hidden“ Fields müsst Ihr an Eure PlugIn Einstellungen anpassen.
Mein Markup habe ich nun mit Bootstrap aufgebaut, dass könnt Ihr natürlich auch anpassen.
Wichtig: Im Backend unter den PlugIn-Einstellungen auch das Indexed-Search FLUID Template auswählen!
Soweit sollte nun alles passen und das Suchwort, sollte dann an die Suchseite übergeben werden.
Gerne in den Kommentaren Infos, Tips oder Fragen schreiben.
Heute kam das neue TYPO3 Update 8.1 Version heraus und steht nun als Download bereit. Zu den vielen neuen Features gab es auch einige Backend-Verbesserungen. Diese TYPO3-BE-Verbessungen wurden auf der vorgestellten TYPO3 User eXperience Week 2016 entwickelt und verbessert. Hier geht es zu dem Vorort T3UXW Bericht.
Die neue TYPO3 8.1 Version bringt folgende Erneuerungen mit sich: PDF TYPO3 8.x – Was ist neu
In der PDF könnt Ihr die neuen Infos nachlesen: Backend User Interface, TSconfig & TypoScript, Änderungen im System, Extbase & Fluid und Veraltete/Entfernte Funktionen.
Hier geht es zum Download der TYPO3 8.1 Version: https://typo3.org/download/
Installation-Anleitung für die TYPO3 8.1 Version: https://github.com/TYPO3/TYPO3.CMS/blob/master/INSTALL.md
Alle Neuigkeiten und Änderungen auf 32 Slides von der Pluswerk AG:
Seit der TYPO3 Version 7.6 funktioniert das FORM Object nun besser und ich verwende es ab und zu via TypoScript. Daher möchte ich Euch eine Grund-Beispiel-Formular zeigen.
Hier gibt es eine grobe TYPO3 FORM Anleitung:
https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Form/Index.html
Hier geht es zum TypoScript Form Beispiel:
lib {
mailformDetail = FORM
mailformDetail {
# https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Form.html
enctype = multipart/form-data
method = post
absolute = 0
addQueryString = 1
argumentsToBeExcludedFromQueryString =
prefix = tx_form
confirmation = 0
no_cache = 0
form {
layout {
containerWrap (
<div class="detail-form-inner-wrap">
<elements />
</div>
)
elementWrap (
<div class="form-group">
<element />
</div>
)
form (
<form>
<containerWrap />
</form>
)
radio (
<label />
<input />
)
textarea (
<label />
<textarea />
)
textline (
<label />
<input />
)
submit (
<label />
<button />
)
error (
<span class="error">
<errorvalue />
</span>
)
}
}
postProcessor {
1 = mail
1 {
recipientEmail = test@domain.de
senderEmail = test@domain.de
subject = Kontaktanfrage
messages {
success = Vielen Dank für Ihre Anfrage! Wir werden uns umgehend mit Ihnen in Verbindung setzen.
error = Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den Kontakt.
}
}
}
10 = TEXTLINE
10 {
label {
value = Vorname, Nachname
}
name = firstLastName
class = form-control framed
size = 15
layout (
<label />
<input />
)
}
20 = TEXTLINE
20 {
type = email
name = email
class = form-control framed
label {
value = E-Mail
specialEval = EMAIL
}
layout (
<label />
<input />
)
}
30 = TEXTAREA
30 {
name = message
rows = 3
class = form-control framed
label {
value = Mitteilung
}
layout (
<label />
<textarea />
)
}
40 = SUBMIT
40 {
name = button
class = btn framed icon
type = submit
value = Absenden
layout (
<label />
<button />
)
}
rules {
1 = required
1 {
showMessage = 1
message = *
error = Bitte ausfüllen!
element = firstLastName
}
2 = email
2 {
showMessage = 1
message =
error = richtige E-Mail!
element = email
}
3 = required
3 {
showMessage = 1
message = *
error = Bitte ausfüllen!
element = email
}
4 = required
4 {
showMessage = 1
message = *
error = Bitte ausfüllen!
element = message
}
}
}
}
So könnt Ihr z.B. auch das Formular via TypoScript in die tx_news Detail-Seite einfügen.
Seit heute gibt es die neuen TYPO3 Content Management System Version 6.2.23 LTS und 7.6.7 LTS als download.
Die neue TYPO3 Version könnt Ihr hier herunterladen: https://typo3.org/download/
Weitere Infos um Release könnt Ihr hier nachlesen:
https://wiki.typo3.org/TYPO3_CMS_6.2.23
https://wiki.typo3.org/TYPO3_CMS_7.6.7
Installation-Infos:
https://github.com/TYPO3/TYPO3.CMS/blob/TYPO3_7-6/INSTALL.md
mit dem standard powermail Formular lassen sich wohl die realurl´s nicht richtig konfigurieren, wenn man den controller/action ausgeschaltet hat.
Hier eine Lösung dazu, wie die URL auch dann richtig aussieht.
realurl.php Datei unter „postVarSets“:
'formular' => array( array( 'GETvar' => 'tx_powermail_pi1[controller]', 'noMatch' => 'bypass' ), array( 'GETvar' => 'tx_powermail_pi1[action]', 'valueMap' => array( 'controller' => 'form', 'form' => 'form', 'absenden' => 'create', 'error' => 'error' ), 'noMatch' => 'bypass' ), ),
und hier der form-Tag unter der form.html:
<f:form
action="{action}"
controller="form"
name="field"
enctype="multipart/form-data"
additionalAttributes="{vh:Validation.EnableParsleyAndAjax(form:form)}"
addQueryString="{settings.misc.addQueryString}"
method="post"
id="form-submit"
class="powermail_form powermail_form_{form.uid} {form.css} {settings.styles.framework.formClasses} {vh:Misc.MorestepClass(activate:settings.main.moresteps)}">
<f:render partial="Misc/FormError" arguments="{_all}" />
<f:for each="{form.pages}" as="page">
<f:render partial="Form/Page" arguments="{_all}" />
</f:for>
<f:form.hidden name="mail[form]" value="{form.uid}" class="powermail_form_uid" />
<f:render partial="Misc/HoneyPod" arguments="{form:form}" />
</f:form>
für weitere Tips und Infos bin ich natürlich Euch dankbar!
Heute wurden drei neue TYPO3 Sicherheitsupdates von der Community heraus gebracht!
6.2.25 LTS, 7.6.9 LTS and 8.1.2 für das TYPO3 Enterprise Content Management System.
Wichtig war heute, dass Ihr mit dem Update einen Tag wartet, weil es heute zu zwei Update Intervallen kam! Dies kommt öfters vor, daher wartet lieber noch mit einem TYPO3 Update.
Folgende TYPO3 CMS Updates stehen nun zur Verfügung:
TYPO3 CMS 6.2.25 LTS
TYPO3 CMS 7.6.9 LTS
TYPO3 CMS 8.1.2
Was hat sich alles geändert:
https://wiki.typo3.org/TYPO3_CMS_6.2.25
https://wiki.typo3.org/TYPO3_CMS_7.6.9
https://wiki.typo3.org/TYPO3_CMS_8.1.2
Warum solltet Ihr TYPO3 Sicherheitsupdates machen oder TYPO3 Relaunch in betracht ziehen?
Immer mehr CMS Systeme bietet der Onlinemarkt für die Programmierer und Webseiten-Betreiber an, doch hat sich ein Content Management System für den Business-Markt hervor gehoben und hat sich mit der Zeit als ein sehr starkes und leistungsfähiges Online Content Management System entwickelt.
TYPO3 wird für den mittelständischen und groß Business-Bereich über die Jahre sehr stark in deutschsprachigen Bereich eingesetzt und daher auch für den Onlinemarkt immer weiter entwickelt. Wir zählen weit über 7.000 kostenlose TYPO3-Erweiterungen und weit über 800.000 TYPO3 Installationen.
Daher sind Sicherheitsupdates enorm wichtig um Sicherheitslücken zu schließen und Angriffe abzublocken. Es werden aber bei einem Update nicht nur Sicherheitslücken geschlossen, sondern auch stetig an dem Grund-TYPO3-System und die Ausarbeitung weiter entwickelt.
Daher ist es auch wichtig, dass Ihr eure Webseiten für die neuen Features und Sicherheiten gut vorbereiten.
Ob Code-Optimierungen, Speed-Optimierungen, Responsive Webentwicklung und viele neue Features im Webbereich, dies alles werden mit den neuen TYPO3 Version weiter ausgebaut und stehen mit jedem Update mehr und mehr kostenlos zur Verfügung.
Nicht immer können Ihr eure vorhandene Webseite updaten, da die TYPO3-Entwicklung stetig weiter entwickelt wird und der Aufbau der Webseite sich immer mehr an die neuen Vorschriften und Optimierungsideen im Netz anpassen, muss hier mit einen kompletten Relaunch der Webseite gearbeitet werden.
Im Suchmaschinen-Umfeld hat sich seit einiges Jahren ein starker Wandel aufgebaut und es reicht leider nicht mehr aus, die Webseiten brach im Netz liegen zu lassen, sondern die Suchmaschinen wünschen sich eine Veränderung und belohnen dies auch mit einem besseren Ranking.
Bei einem Relaunch sollten auf jeden Fall einige Dinge beachtet werden.
Wichtig ist hier, dass genau besprochen wird, was die neue TYPO3-Webseite für Features und Aufgaben haben soll. An Hand dieser Infos lässt sich recht einfach ein neues System erstellen und konfigurieren.
Benötigt Ihr bei einem Relaunch weitere Beratung oder Hilfen, so fragt bei mir nach! Wir können auf jeden Fall weitere Infos und Tipps geben!
Für ein TYPO3-Portal in dem die Extension tx_news eingesetzt wird, wollte wir die Web-URL nicht nur mit dem Seitentitel aufbauen, sondern noch weitere Datenbank-Felder hinzufügen.
www.domain.de/liste/news-name-hier/
sollte geändert werden in:
www.domain.de/liste/news-name-hier-stadtname-20uid/
Um nun in TYPO3 die RealUrl-Config aus mehreren Tabellenspalten aufbauen, müsst Ihr folgendes in der Datei: realurl_config.php an dem tx_news Beispiel ändern:
array(
'GETvar' => 'tx_news_pi1[news]',
'lookUpTable' => array(
'table' => 'tx_news_domain_model_news',
'id_field' => 'uid',
//'alias_field' => 'title',
'alias_field' => "CONCAT(title, '-', town, '-', '20', uid)",
'addWhereClause' => ' AND NOT deleted',
'useUniqueCache' => 1,
'useUniqueCache_conf' => array(
'strtolower' => 1,
'spaceCharacter' => '-',
),
'languageGetVar' => 'L',
'languageExceptionUids' => '',
'languageField' => 'sys_language_uid',
'transOrigPointerField' => 'l10n_parent',
'autoUpdate' => 1,
'expireDays' => 180,
),
),
anstatt den bekannten alias_field mit dem title aufzubauen, müsst Ihr die Ausgabe nun etwas ändern und mit vorhandenen Datenbankfelder bearbeiten:
‚alias_field‘ => „CONCAT(title, ‚-‚, town, ‚-‚, ’20‘, uid)“,
Wir haben in unserer Datenbank: Titel, Town, uid
Zusätzlich haben wir noch die uid um die Zahl 20 erweitert und sieht dann zum Beispiel so aus: www.domain.de/liste/news-name-hier-frankfurt-21375/
Funktioniert soweit auch mit jeder anderen Exension oder Seiten.
Anhand von diesem Beispiel, könnt Ihr für die CMS TYPO3 7.6 Version mit Hilfe von TYPOSCRIPT in dem Text/Media Content Element die Bilder / IMAGE auslesen!
Die Bilder werden im FAL (File Abstraction Layer) abgelegt und können mit Hilfe von „FILE“ neu ausgelesen werden.
lib.contentImage = CONTENT
lib.contentImage {
wrap = |
table = tt_content
select {
languageField = sys_language_uid
where = colPos = 1
orderBy = sorting
pidInList = 12 # SeitenID mit den Bild-Elementen
}
renderObj = COA
renderObj{
wrap = <div class="item">|</div>
10 = FILES
10 {
references {
table = tt_content
uid.data = uid
fieldName = assets
}
renderObj = IMAGE
renderObj {
wrap = <div class="item-image">|</div>
file.import.data = file:current:originalUid
file.width = 1920c
file.height = 600c
}
}
20 = TEXT
20.wrap = <div class="item-text">|</div>
20.field = bodytext
}
}
Vielen Dank an Marc Willmann! Posten in den Kommentaren gerne Eure Beispiele.
Des öfteren benötige ich für GridElement-Templates, Frontend-Templates oder Extension-Templates immer wieder die in TYPO3 Fluid IF-Abfragen als Inline Aufbau. Immer wieder suche im Netz nach passenden Beispielen wenn es darum geht, z.B. inline CSS styles mit einzubinden.
Daher hier ein paar Beispiele der unterschiedlichen Möglichkeiten für Condition:
Gebe „active“ aus, sobald die Variable „true“ ist!
{f:if(condition: ValueNameHere, then: 'active')}
Prüfe die Variable und gebe dann einen Wert aus
{f:if(condition: '{ValueNameHere} == \'Yes\'', then: 'active')}
{f:if(condition: '{ValueNameHere} == "Yes"', then: 'active')}
oder mit einer Zahl eine Variable prüfen.
{f:if(condition: '{ValueNameHere} == 1', then: 'active')}
Mehrere Variablen prüfen:
{f:if(condition: '{0: ValueNameHere, 1: AbfrageText} == {0: \'Yes\', 1: \'Hier kommt der Text\'}', then: 'active')}
Hier noch ein paar weitere Abfragemöglichkeiten als Beispiel:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/If.html
https://wiki.typo3.org/Fluid_Inline_Notation
Gehen wir nun mal davon aus, dass wir einen DIV-Container haben und wollen darin eine Abfrage für eine CSS-Class oder sogar Inline-CSS-Styles aufbauen:
<section class="className {f:if(condition: '{ValueNameHere}', then: 'class-name-2')}" {f:if(condition: '{ValueNameHere}', then: 'style=\"background: url('uploads/{ValueNameHere}\"')')}>
Content
</section>
Wichtig ist dabei, dass Ihr anfang die Anführungszeichen zu escape! Das geht mit dem \ (Backslash)
In meinen Beispiel gebe ich für die GridElemente Extension Inhalte je nach Backend-Auswahl aus, bzw. kann ich im Backend ein Hintergrund-Bild für einen Container hinterlegen:
<section class="columns-1-col-wrap columns-grid-{data.tx_gridelements_backend_layout} {data.flexform_containerbg} {f:if(condition: '{data.flexform_containerbgimage}', then: 'container-bgimage')}" {f:if(condition: '{data.flexform_containerbgimage}', then: 'style="background-image: url(\'uploads/ContentBackground/{data.flexform_containerbgimage}\'")')}>
Content
</section>
Schreibt gerne weitere Beispiel in den Kommentaren!
Wichtige Infos für den Kommunikationskanal für TYPO3: Github soll Forge ersetzen, TYPO3 Slack die Community-Kommunikation verbessern – diese neuen „Standards“ wurden auf den TYPO3 Developer Days in Nürnberg beschlossen. Stefan Busemann von der TYPO3 Association berichtet.
Stefan Busemann ist Vorstandsmitglied der TYPO3 Association und informiert die Community im Diary der TYPO3 Association immer über die aktuellsten Neuigkeiten. Für uns hat er zusammengefasst, welche standardisierten Kommunikations- und Dokumentationswege auf den TYPO3 Developer Days besprochen wurden. Hier den kompletten TYPO3 Artikel lesen.
Hier beschreibe ich Euch wie Ihr die List – und ShowAction der eigenen Extension auf einer Seite einbinden könnt, bzw. mehrere Controller der gleichen Extension auf einer Seite einbindet.
Will man sowohl die List, als auch die ShowAction in einer Seite einbinden, z.B. weil in der Navigation alle Datensätze gelistet sein sollen, stößt man auf ein interessantes Phänomen:
In der Navigation wird die komplette Seite mit allem Drum und Dran erneut ausgegeben. Was natürlich keinen Sinn macht!
Lösen lässt sich dies mittels Flexforms. Hier muss festgelegt werden, welche Action die Extension ausführen soll. Das ganze lässt sich dann beim Einbinden im Backend auswählen.
Hier das oben angeführte Beispiel mit der List– und ShowAction:
<el>
<!-- … weitere Konfigurationseinstellungen -->
<switchableControllerActions>
<TCEforms>
<label>Type</label>
<config>
<type>select</type>
<items type="array">
<numIndex index="1" type="array">
<numIndex index="0">List (dies ist der Titel)</numIndex>
<numIndex index="1">StudyAbroad->list</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Detail</numIndex>
<numIndex index="1">StudyAbroad->show</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</switchableControllerActions>
<!-- … -->
</el>
Diese Code muss zwischen die -Elemente der Flexform. Für mehr Controller könnte man jetzt weitere -Elemente einfügen, wobei man das Index-Attribut erhöhen müsste. Bei der Plugin-Einbindung im Backend unter den „Erweiterungsoptionen“, sieht das ganze nun so aus:
Hier wählt man nun einfach die jeweilige Action und es wird nur noch diese Ausgegeben. In unserem Beispiel also im Header die ListAction und auf der Detailseite die ShowAction.
Für eine Übersichtseite habe ich früher oft den Datensatz: Menü/Sitemap (TYPO3 Menu/Sitemap) verwendet und konnte diesen mit typoscript anpassen und so aufbauen wie es das Layout vorgibt.
Mit TYPO3 7.x und FLUID Content hat sich nun der Aufbau in FLUID ausgelagert.
D.h. wir müssen uns das HTML Template genauer anschauen, auslagern und dann bearbeiten.
Die Datei Menu/Sitemap habe ich hier ausgelagert, als Beispiel habe ich mir die File: Type-4.html kopiert und umbenannt in Type-11.html.
„fileadmin/Templates/FluidStyledContent/Resources/Private/Partials/Menu/Type-11.html“
Auf Eurer „root“ Seite in den Seiteneigenschaften / Seiten-TSconfig fügt Ihr noch folgendes ein:
TCEFORM {
tt_content {
menu_type.addItems.11 = Übersichtseiten
}
}
den HTML Aufbau der FLUID Datei habe ich so gestaltet:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<ce:menu .directory pageUids="{pageUids}" as="pages">
<f:if condition="{pages}">
<div class="row overview-wrap ce-menu ce-menu-11">
<f:for each="{pages}" as="page" iteration="iterator">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 matchHeight">
<div class="teaser-item-1-wrap item-id-{iterator.cycle} teaser wow fadeIn">
<!-- Teaser Bild oben Uberschrift Text Link -->
<f:link .page pageUid="{page.uid}" title="{page.title}">
<f:cobject typoscriptObjectPath="lib.pageimage" data="{uid:'{page.uid}'}"></f:cobject>
<h3>{page.title}</h3>
<p>{page.abstract}</p>
<span class="internal-link big-link">Mehr erfahren</span>
</f:link>
</div>
</div>
</f:for>
</div>
</f:if>
</ce:menu>
</html>
Soweit lese ich die Page Daten mit {page} aus, doch leider funktioniert es nicht mit dem {page.media}, da hier nur eine „1“ eingetragen ist. Daher habe ich als Übergangslösung die Bilddatei via typoscript ausgelesen:
Hier ist wichtig, dass Ihr die page-UID mit übergebt, damit das richtige Seiten-Bild / Ressourcen-Bild ausgelesen wird.
Hier das passende TYPOSCRIPT:
lib {
pageimage = FILES
pageimage {
references {
table = pages
#Seiten-ID ubergabe
uid.dataWrap= {field:uid}
fieldName = media
}
renderObj = IMAGE
renderObj {
file.width = 780c
file.height = 380c
file.import.data = file:current:uid
file.crop.data = file:current:crop
file.treatIdAsReference = 1
altText.data = file:current:title
params = class="img-responsive"
wrap = |
}
}
}
Soweit funktioniert der Aufbau sehr gut, doch würde ich nun noch das Bild via FLUID auslesen wollen, wer da noch eine Lösung hat, bitte gerne hier in den Kommentaren schreiben.
Vielen Dank!
Hiermit möchte ich meine neue Serie TYPO3 Flux – Part #1 – Installation Erweiterungen [FluidTYPO3] beginnen.
Mit einigen Extensions in zusammenarbeit können TYPO3 Extensions in Rekordzeit erstellt werden und bringen massen an Funktionalität mit.
Schaut euch das neue TYPO3 Flux Part1 Videos an und entscheidet selbst, ob ihr jemals wieder ohne Flux arbeiten wollt. 
Hier im ersten Part geht es hauptsächlich um die Voraussetzungen für die Entwicklung einer Provider-Extension.
Es wird ein TYPO3 > 7.6 und verschiedene Erweiterungen benötigt, die im gemeinsamen Zusammenspiel ein perfektes Team Bilden:
Mit diesen Erweiterungen seid ihn startklar und könnt die Provider-Extension „kickstarten“.
Das Installieren, Erstellen der Erweiterung sowie die Installation dieser und dem erstellen des ersten Backend-Layouts wird in diesem Part alles genau erklärt und soll euch zum Nachmachen inspirieren.
Lasst mir bitte eure Erfahrungen, Fragen und Kommentare da! Ich versuche alle Kommentare zu beantworten und gegebenenfalls ein Video zu eurem Problem zu erstellen.
Liebe Grüße
Naderio
Teil 2 Meiner neuen TYPO3 Flux Serie. In diesem Video richte ich die Entwicklungsumgebung PhpStorm ein.
Mit einigen Extensions in zusammenarbeit können TYPO3 Extensions in Rekordzeit erstellt werden und bringen massen an Funktionalität mit.
Schaut euch die Videos an und entscheidet selbst, ob Flux zu Euch passt.
Lasst mir eure Erfahrungen in den Kommentaren da.
Oliver Thiele von Mittwald zeigt Euch in seinem Video, wie die Entwicklungsumgebung PhpStorm so eingerichtet wird, dass man optimal mit TYPO3-Projekten arbeiten kann.
Dieser Part befasst sich mit der Integration eines Designs in die Flux-Extension.
Dieser Part ist ziemlich umfassend geworden – aber lasst euch davon nicht abschrecken!
Ich zeige hier, wie ihr euer bestehendes Design in eure Provider-Extension integrieren könnt.
Das klingt erstmal gar nicht so schlimm? RICHTIG! Das ist es auch nicht.
Ich wünsche viel Spaß beim mitmachen
Naderio