11 ways to add CSS/JS frontend assets into TYPO3

11 ways to add CSS/JS frontend assets into TYPO3

Are you looking for ways to add your frontend assets CSS/JS into TYPO3? As a TYPO3 integrator, developer or administrator, you may be required to add custom or third-party CSS or JavaScripts into TYPO3 Instance. In this blog, you will learn all 11-ways to include internal or external assets into TYPO3.

TYPO3 is one of the flexible and extendible Opensource CMS in the world. For your so simple needs of inserting CSS/JS files or code - You have 11-ways to integrate such frontend assets into TYPO3. The TYPO3 core is robust, which provides many ways to perform such tasks based on your needs. Because, as a TYPO3 integrator or developer, you may face a different situation to insert frontend assets - TYPO3 is extendible enough! Let’s see how.

 

TYPO3 Fluid ViewHelper (>= v10.3)

From TYPO3 v10, Using TYPO3 viewhelper <f:asset.css /> and <f:asset.js /> you can easily include your CSS and JS.

 

<f:asset.css identifier="yourIdentifier" href="EXT:yourext/Resources/Public/Css/myCustom.css" />
<f:asset.css identifier="yourIdentifier">
   .myBlock { display: block }
</f:asset.css>
<f:asset.script identifier="yourIdentifier" src="EXT:yourext/Resources/Public/Css/myCustom.js" />
<f:asset.script identifier="yourIdentifier">
   alert('hello world');
</f:asset.script>

 

Reference: https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.3/Feature-90522-IntroduceAssetCollector.html 

TYPO3 Fluid Assets (>= v8.6)

Since TYPO3 v8, We have HeaderAssets/FooterAssets ways to include your frontend assets to your TYPO3 instance.

 

<f:section name="HeaderAssets"> for assets intended for the <head> tag
<f:section name="FooterAssets"> for assets intended for the end of the <body> tag
<f:section name="HeaderAssets">
    <!-- Write down anything which you want to add into <head> tag -->
</f:section>
<f:section name="FooterAssets">
    <!-- Write down anything which you want to add into </body> tag -->
    <script async src="//yourdomain.com/your.js"></script>
</f:section>

 

Reference: https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/8.6/Feature-79409-AutorenderAssetSectionsInFluidTemplateWithController.html 

HeaderData TypoScript (>= v4)

One of the safest and easiest ways to add your custom CSS or Javascript code at </head> tag using TypoScript is below.

 

page = PAGE
page { … }

// Add your CSS/JS assets globally
page.HeaderData.99 = TEXT
page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>

// Add your CSS/JS assets to particular page(s)
[getTSFE().id in [1,4]]
    page.HeaderData.99 = TEXT
    page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]

FooterData TypoScript (>= v4)

In the same, Do you want to add your CSS or Javascript code to </body> then use FooterData TypoScript?

 

page = PAGE
page { … }

// Add your CSS/JS assets globally
page.FooterData.99 = TEXT
page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>

// Add your CSS/JS assets to particular page(s)
[getTSFE().id in [1,4]]
    page.FooterData.99 = TEXT
    page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]

includeJS TypoScript (>= v4)

page.includeJS used since years to integrate CSS/JS at your TYPO3 template integration.

 

page = PAGE
page { … }

page.includeJS {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSFooter {
    // at </body> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSFooterlibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSLibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

 

Tips:
You can configure either config.moveJsFromHeaderToFooter or config.moveJsFromHeaderToFooter to move your all JS to either </head> or </body> tag for better performance. 

jsInline TypoScript (>= v4)

Are you looking to write inline Javascript code? It means not including the whole Javascript file path but just writing your Javascript code; consider jsInline Typoscript.

 

page = PAGE
page { … }

page.jsInline {
    // Your JavaScript code
}

page.jsFooterInline {
    // Your JavaScript code
}

includeCSS TypoScript (>= v4)

In the same way, You can use includeCSS typoscript to add CSS assets.

 

page = PAGE
page { … }

page.includeCSS {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

includeCSSLibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

cssInline TypoScript (>= v4)

Also, use the cssInline TypoScript to add directly stylesheet instead of calling CSS file.

 

page = PAGE
page { … }

page.CSS_inlineStyle {
    /* Writ down other CSS stuff */
}

page.cssInline {
    10 = TEXT
    10.value = h1 {margin:15px;}
}

Extbase additionalFooterData (>= v6)

Now here is something interesting for the TYPO3 extension backend developer. You will often be required to dynamically add your CSS or JS assets while you develop your Extbase PHP controller. You can simply use Global TSFE additionalFooterData.

 

// Add your JS at your Extbase Controller
$GLOBALS['TSFE']->additionalFooterData['yourIdentifier'] = '<script async src="//yourdomain.com/your.js"></script>';

Extbase additionalHeaderData (>= v6)

In the same way, If you want to include your CSS/JS to </head> then use additionalHeaderData.

 

// Add your JS at your Extbase Controller
$GLOBALS['TSFE']->additionalHeaderData['yourIdentifier'] = '<script async src="//yourdomain.com/your.js"></script>';

Extbase AssetCollector (>= v10.3)

Wait, from TYPO3 v10 - You should use AssetCollector to add CSS or JavaScript for your Extbase TYPO3 extension.

 

use TYPO3\CMS\Core\Page\AssetCollector;
use TYPO3\CMS\Core\Utility\GeneralUtility;

GeneralUtility::makeInstance(AssetCollector::class)
   ->addJavaScript('yourIdentifier', 'EXT:yourext/Resources/Public/Css/myCustom.js', ['data-foo' => 'bar']);

 

AssetCollector provides all excellent functions to add or remove your CSS/JS; check out these functions.

 

AssetCollector::addInlineJavaScript()
AssetCollector::addStyleSheet()
AssetCollector::addInlineStyleSheet()
AssetCollector::addMedia()
AssetCollector::removeJavaScript()
AssetCollector::removeInlineJavaScript()
AssetCollector::removeStyleSheet()
AssetCollector::removeInlineStyleSheet()
AssetCollector::removeMedia()
AssetCollector::getJavaScripts()
AssetCollector::getInlineJavaScripts()
AssetCollector::getStyleSheets()
AssetCollector::getInlineStyleSheetsAssetCollector::getMedia()

 

Reference: https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.3/Feature-90522-IntroduceAssetCollector.html 

Rendering Order of Assets in TYPO3

Last but not least, with the above so many ways - You may have questions about the exact render order or priority of assets in TYPO3.

From v10.3, CSS and JavaScript registered with the AssetCollector will be rendered after their PageRenderer counterparts. The order is

  1. <head>
  2. page.includeJSLibs.forceOnTop
  3. page.includeJSLibs
  4. page.includeJS.forceOnTop
  5. page.includeJS
  6. AssetCollector::addJavaScript() with ‘priority’
  7. page.jsInline
  8. AssetCollector::addInlineJavaScript() with ‘priority’
  9. </head>
  10. page.includeJSFooterlibs.forceOnTop
  11. page.includeJSFooterlibs
  12. page.includeJSFooter.forceOnTop
  13. page.includeJSFooter
  14. AssetCollector::addJavaScript()
  15. page.jsFooterInline
  16. AssetCollector::addInlineJavaScript()

Wrapping-up!

Thanks for reading my TYPO3 blog. I hope you learned and found it helpful for your current or future TYPO3 projects.

From the list o above, all 11 ways to integrate frontend assets to TYPO3 - Which one is your favourite? I would like to know in below comment box.

Have a Happy Include Assets into TYPO3!

Post Comment

Your email address will not be published. Required fields are marked *

×

Name is required!

Enter valid name

Valid email is required!

Enter valid email address

Comment is required!

Google Captcha Is Required!

Comments :

  • Egon Weiner November 23, 2021 At 11:43 am
    I think one of the best scalability features of TYPO3 is that we can add our front-end CSS/JS assets to the TYPO3 website. I have done it so many times. I have got the hang of it now but a nice tutorial is always appreciated. So good job.
  • Emilie Klein November 13, 2021 At 2:05 pm
    Being a TYPO3 Developer, I always look for quick and straightforward tutorials. I consider you guys one of the TYPO3 resources and you do your job really well.
  • Adler Schmidt November 11, 2021 At 11:40 am
    I am an absolute TYPO3 beginner, I didn’t know there are 11 ways to add front-end assets in TYPO3. This was really a great tutorial to get started with. I have also checked some of the old blogs to learn TYPO3 basics from NITSAN and T3Terminal. You guys are doing a great job. Thank you for posting.
Your Monthly TYPO3 Maintenance Checklist

Your Monthly TYPO3 Maintenance Checklist

TYPO3 maintenance is a routine task that’s critically important for all the websites to undergo in order to maintain and improve…

How to Put Your TYPO3 Website in Maintenance/Offline Mode

How to Put Your TYPO3 Website in Maintenance/Offline Mode

If you want to perform a maintenance task, you may need to put your TYPO3 website in maintenance mode. This state means your…

Stay up to date with our recent TYPO3 Blogs, news, & updates