
TYPO3 Plugin:
w3w_contentelements
Fluid Inhaltselemente für Twitter Bootstrap
Was ist das? Was ist das?
Eine Sammlung von Twitter Boostrap-orientierten Fluid Inhaltselementen, die für EXT:fluidcontent
mit ViewHelpers von EXT:vhs
geschrieben wurden.
Was bewirkt es?
Enthält die Template-Dateien und das TypoScript-Setup, das für die Verwendung der enthaltenen Elemente erforderlich ist.
Wie macht es das?
Durch die Nutzung der Integrationslogik von EXT:fluidcontent
- ermöglicht die Verwendung von speziell entwickelten Fluid-Vorlagen als
inhaltselemente, ähnlich wie das Konzept der flexiblen Inhaltselemente von TemplaVoila.
Wie wird es installiert?
Laden Sie die Erweiterung herunter, installieren Sie sie und fügen Sie die statische TypoScript-Konfiguration hinzu.
Wie wird es verwendet?
Nach der Installation und Einbindung des statischen TypoScript stehen die enthaltenen Inhaltselemente als neues Inhaltselement zur Verfügung typen beim Einfügen neuer Inhalte.
Beim Einfügen enthält jedes Inhaltselement ein spezielles Fenster mit einer Konfiguration, die angibt, wie das Inhaltselement dargestellt werden soll.
Referenzen
- https://github.com/FluidTYPO3/fluidcontent ist eine Abhängigkeit - es ist die Integration, die notwendig ist, um Fluid Content Elements zu rendern
- https://github.com/FluidTYPO3/vhs ist eine Abhängigkeit, die viele ViewHelpers bereitstellt, die in den Fluid Inhaltselementvorlagen verwendet werden
w3work Erweiterungen
googleMaps
Folgendes muss beachtet werden, um das Element googleMaps verwenden zu können.
geänderte Dateien
- typo3conf\ext\contentelements\Ressourcen\Private\Templates\Content\Map.html
- typo3conf\ext\contentelements\Ressourcen\Private\Partials\SectionMain\Map.html
- typo3conf\ext\contentelements\Ressourcen\Public\js\map.js
- typo3conf\ext\contentelements\Ressourcen\Public\js\map-style.js
TS Config
constants.ts
devel|stage|live {
contentelements {
...
map.key = <api key von google>
...
}
}
config.ts
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *diedomain.tld]
...
# googel map api key definition
seite.footerData.9 = TEXT
seite.footerData.9.value (
<script>
var gmApiKey = '{$live.contentelements.map.key}';
</script>
)
...
[global]
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *w3work.de]
...
# googel map api key definition
seite.footerData.9 = TEXT
seite.footerData.9.value (
<script>
var gmApiKey = '{$stage.contentelements.map.key}';
</script>
)
...
[global]
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *svn.local]
...
# googel map api key definition
seite.footerData.9 = TEXT
seite.footerData.9.value (
<script>
var gmApiKey = '{$devel.contentelements.map.key}';
</script>
)
...
[global]
############ Extesion config #####################################################################################
page.includeJSFooter {
...
}
google reCAPTCHA
Folgendes muss beachtet werden, um reCAPTCHA am Sende-Button zu nutzen.
geänderte Dateien
- typo3conf\ext\contentelements\Classes\Controller\Ajax\Sendform.php
- typo3conf\ext\contentelements\Classes\Controller\ConontentController.php
- typo3conf\ext\contentelements\Ressourcen\Private\Templates\Content\Form_submit.html
- typo3conf\ext\contentelements\Ressourcen\Private\Partials\SectionMain\Form_submit.html
TS Config
constants.ts
devel|stage|live {
contentelements {
...
recaptcha {
schlüssel <api key von google> = <api key von google>
secret = <api scret key von google>
}
...
}
}
config.ts
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *diedomain.tld]
...
# recaptcha key
plugin.tx_contentelements.settings.recaptcha.secret = {$live.contentelements.recaptcha.secret}
...
[global]
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *w3work.de]
...
# recaptcha key
plugin.tx_contentelements.settings.recaptcha.secret = {$stage.contentelements.recaptcha.secret}
...
[global]
#################################################
#################################################
[globalString = ENV:HTTP_HOST = *svn.local]
...
# recaptcha key
plugin.tx_contentelements.settings.recaptcha.secret = {$devel.contentelements.recaptcha.secret}
...
[global]
############ Extesion config #####################################################################################
page.includeJS {
...
recaptcha = https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explizit
}
ImageSet Trägheitslast
Lazy load Funktionalität für Bilder und Bildergalerien
Funktionsweise
In den Elementen Bild & Bildergalerie kann man nun das Flag "asynchron nachladen" setzen. Ihm ist es gelungen, über das Imageset-Viewhelper das Img mit entsprechenden Attributen und CSS-Klassen versehen. Dies ist, dass das Element asynchron nachgeladen wird.
Style-Klassen
- am Image-Tag
is-lazy
-> Trigger für Pluginis-lazy-loaded
-> Status "nachgeladen".is-lazy-error
-> Fehler mit Attributdata-src
- am Picture-Tag
is-lazy-loading
-> Loading-Grafik; wird nach dem Laden mit 200ms versatz entfernt
geänderte Dateien
- typo3conf\ext\contentelements\Classes\ViewHelpers\ImagesetViewHelper.php
- typo3conf\ext\contentelements\Ressourcen\Private\Partials\SectionMain\Galerie.html
- typo3conf\ext\contentelements\Ressourcen\Private\Partials\SectionMain\Image.html
- typo3conf\ext\contentelements\Ressourcen\Private\Templates\Content\Galerie.html
- typo3conf\ext\contentelements\Ressourcen\Private\Templates\Content\Image.html
- typo3conf\ext\contentelements\Ressourcen\Public\js\lazy-load-img.js
TS Config
config.ts
############ Extesion config #####################################################################################
...
page.includeJSFooter {
...
}
Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.
Verteilung:W3W_CONTENTELEMENTS ist auf
0 % aller TYPO3 installiert.
- 0.02 % aller TYPO3 8.7.x Installationen installiert
Aktualität:W3W_CONTENTELEMENTS ist auf dem neusten Stand (v.unknown) bei
100 % aller TYPO3 Installationen
- 0 % aller TYPO3 9.5.x Installationen
- 0 % aller TYPO3 9.3.x Installationen
- 0 % aller TYPO3 9.2.x Installationen
- 0.02 % aller TYPO3 8.7.x Installationen
- 0 % aller TYPO3 7.6.x Installationen
- 0 % aller TYPO3 7.5.x Installationen
- 0 % aller TYPO3 7.4.x Installationen
- 0 % aller TYPO3 7.3.x Installationen
- 0 % aller TYPO3 7.2.x Installationen
- 0 % aller TYPO3 7.1.x Installationen
- 0 % aller TYPO3 7.0.x Installationen
- 0 % aller TYPO3 6.2.x Installationen
- 0 % aller TYPO3 6.1.x Installationen
- 0 % aller TYPO3 6.0.x Installationen
- 0 % aller TYPO3 5.0.x Installationen
- 0 % aller TYPO3 4.7.x Installationen
- 0 % aller TYPO3 4.6.x Installationen
- 0 % aller TYPO3 4.5.x Installationen
- 0 % aller TYPO3 4.4.x Installationen
- 0 % aller TYPO3 4.3.x Installationen
- 0 % aller TYPO3 4.2.x Installationen
- 0 % aller TYPO3 4.1.x Installationen
- 0 % aller TYPO3 4.0.x Installationen
- 0 % aller TYPO3 3.5.x Installationen

Gosign-Responsive Index: TYPO3 Installationen nutzen W3W_CONTENTELEMENTS zu
- 0 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
- 0 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
- 100 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
- 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
- 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

Pagespeed: TYPO3 Installationen nutzen W3W_CONTENTELEMENTS zu
- 0 % wenn der Pagespeed zwischen 80 % und 100 % ist
- 0 % wenn der Pagespeed zwischen 60 % und 80 % ist
- 100 % wenn der Pagespeed zwischen 40 % und 60 % ist
- 0 % wenn der Pagespeed zwischen 20 % und 40 % ist
- 0 % wenn der Pagespeed zwischen 0 % und 20 % ist
[DependciesAndConflicts]