ALLES ÜBER w3w_contentelements UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

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

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 Plugin
    • is-lazy-loaded -> Status "nachgeladen".
    • is-lazy-error -> Fehler mit Attribut data-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

responsive - image 4

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

speed test - image 5

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


Stichprobe n=36680 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.

[wpforms id="1559"]