Why Your Business Needs SLAs: Benefits and Advantages Explained
Maintenance
11 ways to add CSS/JS frontend assets into TYPO3
Looking to enhance your TYPO3 website's functionality and aesthetics? Discover 11 ways to add CSS/JS frontend assets with this comprehensive guide.
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: View Document
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: View Document
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: View Document
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
- <head>
- page.includeJSLibs.forceOnTop
- page.includeJSLibs
- page.includeJS.forceOnTop
- page.includeJS
- AssetCollector::addJavaScript() with ‘priority’
- page.jsInline
- AssetCollector::addInlineJavaScript() with ‘priority’
- </head>
- page.includeJSFooterlibs.forceOnTop
- page.includeJSFooterlibs
- page.includeJSFooter.forceOnTop
- page.includeJSFooter
- AssetCollector::addJavaScript()
- page.jsFooterInline
- 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 a Comment
-
Hi t3planet.com webmaster, You always provide great resources and references. -
I never knew there were so many ways to add CSS/JS assets in TYPO3! This article provided a comprehensive guide, and I can't wait to implement these techniques in my projects. Thanks for sharing!
-
Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!
-
Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!
Join over 4300+ TYPO3 Subscribers
Dhyana Chauhan
Tech Expert & Customer ManagerDhyana Chauhan is the customer support manager at T3Planet, having vast experience as an technology lead who loves exploring everything that’s in trend, especially TYPO3. Being a TYPO3 fanatic, in her free time, she loves…
More From Author