{"id":13,"date":"2022-11-24T14:07:00","date_gmt":"2022-11-24T12:07:00","guid":{"rendered":"https:\/\/typo3demosite.com\/?p=13"},"modified":"2025-02-13T00:41:06","modified_gmt":"2025-02-12T22:41:06","slug":"assets-viewhelpers-in-typo3-v10","status":"publish","type":"post","link":"https:\/\/typo3demosite.com\/?p=13","title":{"rendered":"Assets ViewHelpers in TYPO3 v10"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Starting with TYPO3 version 10, you can now directly include assets such as JavaScript and CSS files within your Fluid templates. This approach simplifies asset management and enhances template organization. Here is a sample code demonstrating how to achieve this:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;f:asset.css identifier=&quot;mySampleExtension&quot; href=&quot;EXT:my_sample_ext\/Resources\/Public\/Css\/custom.css&quot; \/&gt;\n\n&lt;f:asset.script identifier=&quot;mySampleExtension&quot; src=&quot;EXT:my_sample_ext\/Resources\/Public\/JavaScript\/custom.js&quot; \/&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">css<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">identifier<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">mySampleExtension<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">EXT:my_sample_ext\/Resources\/Public\/Css\/custom.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> \/<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">identifier<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">mySampleExtension<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">EXT:my_sample_ext\/Resources\/Public\/JavaScript\/custom.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> \/<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In a similar way you can add inline JavaScript or CSS which will be collected in a run-time by asset manager and merged into external JS or CSS files.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<f:asset.script identifier=&quot;mySampleExtension&quot;&gt;\n   console.log('Sample inline JS');\n<\/f:asset.script&gt;\n\n<f:asset.css identifier=&quot;mySampleExtension&quot;&gt;\n   .body { background: blue; color: white; }\n<\/f:asset.css&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">identifier<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">mySampleExtension<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">   console.log(&#39;Sample inline JS&#39;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">script<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">css<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">identifier<\/span><span style=\"color: #D8DEE9FF\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">mySampleExtension<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">   .body { background: blue; color: white; }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/f:asset<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #8FBCBB\">css<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">More details you can find in the <a href=\"https:\/\/docs.typo3.org\/other\/typo3\/view-helper-reference\/main\/en-us\/Global\/Asset\/Index.html#asset\" data-type=\"link\" data-id=\"https:\/\/docs.typo3.org\/other\/typo3\/view-helper-reference\/main\/en-us\/Global\/Asset\/Index.html#asset\">TYPO3 documentation<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting with TYPO3 version 10, you can now directly include assets such as JavaScript and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[8,4],"class_list":["post-13","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typo3","tag-fluid","tag-typo3"],"_links":{"self":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":3,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/13\/revisions\/75"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/media\/15"}],"wp:attachment":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}