PHPackages carbon/includeassets - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. carbon/includeassets ActiveNeos-carbon[Utility & Helpers](/categories/utility) carbon/includeassets ==================== Include your assets (css, js) in an easy way into Neos 7.2.0(6mo ago)14228.6k—4.5%5[1 issues](https://github.com/CarbonPackages/Carbon.IncludeAssets/issues)9GPL-3.0-or-laterPHP Since Apr 1Pushed 6mo ago5 watchersCompare [ Source](https://github.com/CarbonPackages/Carbon.IncludeAssets)[ Packagist](https://packagist.org/packages/carbon/includeassets)[ Fund](https://www.paypal.me/Jonnitto/20eur)[ GitHub Sponsors](https://github.com/jonnitto)[ RSS](/packages/carbon-includeassets/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (57)Used By (9) [![Latest stable version](https://camo.githubusercontent.com/f5202a6c9769b1e55322125a8212add723657de3e82f4755c6da73dda58cacb6/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f696e636c7564656173736574732f762f737461626c65)](https://packagist.org/packages/carbon/includeassets) [![Total downloads](https://camo.githubusercontent.com/f451bd258cdca8aec375daa4aec2f13e54b3565e538adbd60baba67b39926129/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f696e636c7564656173736574732f646f776e6c6f616473)](https://packagist.org/packages/carbon/includeassets) [![License](https://camo.githubusercontent.com/ab608ca25b3d84fbf0a374e24ca7fbf901cb6bbe99821f667de7a02520d5ec6f/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f696e636c7564656173736574732f6c6963656e7365)](https://packagist.org/packages/carbon/includeassets) [![GitHub forks](https://camo.githubusercontent.com/d7c852c7aca4e2b8a2dc409bfcb921145085b74e3b9bf9b19e14e12c6201278f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f436172626f6e5061636b616765732f436172626f6e2e496e636c7564654173736574732e7376673f7374796c653d736f6369616c266c6162656c3d466f726b)](https://github.com/CarbonPackages/Carbon.IncludeAssets/fork) [![GitHub stars](https://camo.githubusercontent.com/f9e0430e09e3855d5c52a663c26ae89b1da963d402746b783cd8899714225543/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f436172626f6e5061636b616765732f436172626f6e2e496e636c7564654173736574732e7376673f7374796c653d736f6369616c266c6162656c3d5374617273)](https://github.com/CarbonPackages/Carbon.IncludeAssets/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/40ed206d9aae46947c7f9b4411bc967abecdcf9fd2bed42ad4eafbf23ec6fc9e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f436172626f6e5061636b616765732f436172626f6e2e496e636c7564654173736574732e7376673f7374796c653d736f6369616c266c6162656c3d5761746368)](https://github.com/CarbonPackages/Carbon.IncludeAssets/subscription) Carbon.IncludeAssets Package for Neos CMS ========================================= [](#carbonincludeassets-package-for-neos-cms) With this package, you get able to import all your CSS and Javascript assets with few lines of code in [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml). The best practice is to include `carbon/includeassets` into your `composer.json` from your site package. After that, you can just add your settings. Besides the filenames, you are also able to pass all your necessary attributes to the tags. If you are not able to provide a file extension, you can force the type via `(css)`, `(js)` or `(mjs)` at the end. - You can define multiple files from multiple packages. - You can pass the filenames as a string (comma separated) or as an array (recommended) - If you want to add attributes, add it with square brackets e.g. `Filename.js[async data-prop data-attr="true" class="-js-loader"]` - If you want to get a file included inline, add the attribute `inline`: e.g. `Filename.css[inline]` - You can add multiple resources per line. E. g. `Slider.js,Main.css,Footer.css[async class="footer-styles"],Header[inline class="header-styles"],//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js[async]` - CSS can also be loaded asynchronously: Add `async` as an attribute, e.g. `Filename.css[async]` - If you want to add Google Fonts, you can write them down the fonts, e.g. `Lato|Open+Sans:400,700` or `Lato|Open+Sans:400,700[async]` - On internal files, a hash from the content of the file gets appended. Please be aware that you have to clear the cache from Neos to update the hash value. It is meant to have a cache buster on production projects. - You can also give the browser some [resource hints](https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/): Globally via the settings `Carbon.IncludeAssets.ResourceHints` or via adding a special type (`(preloadasset)`, `(preloadcss)`, `(preloadscript)`or `(modulepreload)`) at the end of a `file` entry. - You can also include the content of HTML files (e.g. `Favicon.html`). Usefull for copy and paste tracking codes, favicons, etc. HTML files are always read from the inline path and ignore all attributes. If they put in `Head` (with automatic sorting), the entries have to end with `.html`, `htm` or `(html)`. Structure of the Settings ------------------------- [](#structure-of-the-settings) In [`Carbon.IncludeAssets`](Configuration/Settings.Carbon.yaml) following settings are available: Key Description`ResourceHints`(array) The setting, which global [resource hints](https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/) should be added.`Default`(array) The default setting for a `Packages` entry. If a key is not set within a `Packages` entry, this value will be used### Structure of Packages entry [](#structure-of-packages-entry) In `Carbon.IncludeAssets.Packages` you can define your packages, which should output assets. The keys get sorted first by numbers, then by characters. Like that, it is possible to define a load order for you packages. A single entry can have following entries (The Defaults are stored in [`Carbon.IncludeAssets.Default`](Configuration/Settings.Carbon.yaml#L20-L58)): Key Description`position`(string or integer) By using position, it is possible to define the order. The position setting follows the same sorting logic used in Fusion (see the [Fusion Reference](https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-join)).`Package`(string) The package key. If it set to `SitePackage`, it will be replaced automatically with the package key from the site package. Defaults to `SitePackage``CacheBuster`(boolean) Append a hash value from the content of the file. Defaults to `true``ConditionPrototype`(string) If set, the files get only included if the fusion prototype returns a truthy value. Defaults to `null``Wrapper`(string) If set, the generated tags will be wrapped. `{content}` will be replaced with the tags. Example: `''``Path`(array) Define the files get loaded from. There are different paths for inline and linked files. Every type (`css`,`js`, `mjs`, `html`, `preloadasset`, `preloadcss`, `preloadscript` or `modulepreload`) can have a different path inside the Resources folder`General`(array) Asset files who get loaded in live and backend view. Contains five entries: `Head`, `HeadStart`, `HeadBotton`, `BodyStart` and `BodyBottom``Backend`(array) Asset files that get loaded only in the backend view. Contains five entries: `Head`, `HeadStart`, `HeadBotton`, `BodyStart` and `BodyBottom``Live`(array) Asset files that get loaded only in the live view. Contains five entries: `Head`, `HeadStart`, `HeadBotton`, `BodyStart` and `BodyBottom`Example ------- [](#example) Here is a small example: ``` Carbon: IncludeAssets: ResourceHints: # Preconnect to these domains Preconnect: - "https://use.typekit.net" - "https://www.google-analytics.com" - "https://www.googletagmanager.com" Packages: # The keys get sorted first by numbers, then by characters. After that, by position Theme: position: start # Because no Package is defined, SitePackage from the default # will be used and will set to the site package. # Asset files which get loaded in live and backend view General: # These assets get loaded in the (at the start) HeadStart: - Favicons.html # If a string starts with < and ends with an >, it get's inlucded as plain HTML - # These assets get loaded in the (at the end) HeadBottom: Logo.png[as="image"](preloadasset) # These asset gets sorted based on a talk by Harry Roberts Get Your Head Straight # https://speakerdeck.com/csswizardry/get-your-head-straight?slide=39 Head: # Read the content of the html files and put it in correct place - File.html - AnotherFile.htm # Preload this Javascript - JsForLaterUse.js(preloadscript) # Preload this asset - Logo.png[as="image"](preloadasset) # Load this CSS asynchronous - GeneralHead.css[async] # If a file has the attribute `inline`, the file gets # inlined. Also, a different path is used. This path is # set in under `Carbon.IncludeAssets.Default.Path.Inline.CSS` # and `Carbon.IncludeAssets.Default.Path.Inline.JS` - AboveTheFold.css[inline] # Run this javascript after to document is ready - GeneralHead.js[defer] # Add this javascript as a module - JavascriptModule.mjs # External files can also be defined. # It has to start with //, https:// or http:// - //foo.bar/externalfile.js # If you can't provide a proper file extension you can force the type: - FileWithCustomFileExtension.ext(css) # This works also with external files - //foo.bar/externalfile.php[async](js) # This assets get loaded at the start of the BodyStart: - NoscriptWarning.html # This assets get loaded at the end of the BodyBottom: # You can also pass all attributes you want - GeneralBody.js[async class='-js-loader'] # You can also pass further attributes if you use the inline attribute - AdditionSpecialFancyTracking.js[inline class="-js-tracking"] # Asset files which get loaded only in the backend Backend: # Arrays can also be defined like this Head: ["BackendHead.css", "BackendHead.js[inline]"] # Asset files which get loaded only in the live view Live: # You can set the value as a string, it will be automatically converted to an array Head: SingleLive.css BodyBottom: LiveBody.css,LiveBody.js[inline] # If you want to add a cached package (for dynamically updates) "Foo.Bar.Cached": Cached: true # In cached mode you have to set always the package name Package: "Foo.Bar" General: Head: Main.css # Example taken from Jonnitto.Plyr "zz_Jonnitto.Plyr": Package: "Jonnitto.Plyr" # The files get only included if the fusion prototype # Jonnitto.Plyr:IncludeCase` return a truthy value ConditionPrototype: "Jonnitto.Plyr:IncludeCase" # Ajust the paths for external files Path: File: CSS: "Public" JS: "Public" # Set the files General: Head: - plyr.min.js[defer] - plyr.css ``` Take a look at the [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml). There you see all the available options. Fusion Prototypes ----------------- [](#fusion-prototypes) Basically, you have to folders with Fusion Prototypes: [Internal](Resources/Private/Fusion/Internal) and [External](Resources/Private/Fusion/External). In the External folder you will find some prototypes which you can help you in your development: ### [Carbon.IncludeAssets:Case](Resources/Private/Fusion/External/Case.fusion) [](#carbonincludeassetscase) This prototype is a small helper to write prototypes for the `ConditionPrototype` setting. Return `true` or `false`. PropertyDescription`mixin`(string) The node type name of an mixin. Defaults to `null``document`(string) The node type name the document type. Defaults to `this.mixin``content`(string) The node type name the content type. Defaults to `this.mixin``contentCollection`(string) The filter for the content collection. Defaults to `[instanceof Neos.Neos:ContentCollection]``documentNode`(node) The node from the document. Defaults to `documentNode``alwaysInclude`(boolean) If `true`, the prototype return `true`. Defaults to `Carbon.IncludeAssets:InBackend`### [Carbon.IncludeAssets:Collection](Resources/Private/Fusion/External/Collection.fusion) [](#carbonincludeassetscollection) This prototype generates your `script`, `style` and `link` tags from the files which are defined in the property `collection`. PropertyDescription`collection`(array with strings) The collection with the filenames. (Example: \['Main.css','Main.js\[defer\]'\]) Defaults to `[]``assetPackage`(string) The name of the package. (Example: `Jonnitto.Plyr`) Defaults to `null``cacheBuster`(boolean) Append a hash value from the content of the file. Defaults to the value set in the [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml#L22)`paths`(array) The paths to the internal and external files inside the Resources folder. Defaults to the value set in the [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml#L27-L40)`wrapper`(string) If set, the generated tags will be wrapped. `{content}` will be replaced with the tags. Example: `''``cached`(boolean) If `true`, every asset from this collection will get a own cache entry. Defaults to `false`. Can be used if you want to update an asset dynamically.### [Carbon.IncludeAssets:File](Resources/Private/Fusion/External/File.fusion) [](#carbonincludeassetsfile) The heart of this package. This prototype generates a `script`, `style`, and `link` tag. You can pass a `file` (with or without the path). Be aware that you can also pass the attributes like described on top. To force a type you can write `(js)`, `(css)`, `(preloadasset)`, `(preloadcss)`, `(preloadscript)` or `(modulepreload)` at the end of `file`. PropertyDescription`file`(string) The filename. You have to write it in the same way as it would be defined in the Settings.yaml file. Defaults to `null``assetPackage`(string) The name of the package. (Example: `Jonnitto.Plyr`) Defaults to `Carbon.IncludeAssets:SiteResourcesPackageKey``cacheBuster`(boolean) Append a hash value from the content of the file. Defaults to the value set in the [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml#L22)`assetPath`(string) The path to the file inside the Resources folder. Per default, it is set dynamically`wrapper`(string) If set, the tag will be wrapped. `{content}` will be replaced with the tag. Example: `''``cached`(boolean) If `true`, the asset will get a own cache entry. Defaults to `false`. Can be used if you want to update an asset dynamically.### [Carbon.IncludeAssets:ResourceHints](Resources/Private/Fusion/External/ResourceHints.fusion) [](#carbonincludeassetsresourcehints) This prototype renders the [resource hints](https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/) for the browser. Per default, this prototype read the [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml#L12-L18). But you can also pass `preloadNodes` or `prerenderNodes` (Array, FlowQuery, or a single node) for further optimization. Usage with Sandstorm.CookiePunch -------------------------------- [](#usage-with-sandstormcookiepunch) If you have [Sandstorm.CookiePunch](https://github.com/sandstorm/Sandstorm.CookiePunch) installed, please add the following attribute to your script entry: ``` - YourJSFile.js[data-never-block] ``` Installation ------------ [](#installation) Most of the time, you have to make small adjustments to a package (e.g., the configuration in [`Settings.Carbon.yaml`](Configuration/Settings.Carbon.yaml)). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site package located under `Packages/Sites/`. To install it correctly go to your theme package (e.g.`Packages/Sites/Foo.Bar`) and run following command: ``` composer require carbon/includeassets --no-update ``` The `--no-update` command prevent the automatic update of the dependencies. After the package was added to your theme `composer.json`, go back to the root of the Neos installation and run `composer update`. Et voilà! Your desired package is now installed correctly. ### Health Score 55 — FairBetter than 98% of packages Maintenance64 Regular maintenance activity Popularity42 Moderate usage in the ecosystem Community25 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 97.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~59 days Recently: every ~50 days Total 54 Last Release 208d ago Major Versions 2.2.4 → 3.0.02018-07-02 3.7.1 → 4.0.02020-08-22 4.1.0 → 5.0.02020-11-22 5.5.0 → 6.0.02022-08-23 6.5.0 → 7.0.02025-08-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto) --- Top Contributors [![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (121 commits)")[![beardcoder](https://avatars.githubusercontent.com/u/9371658?v=4)](https://github.com/beardcoder "beardcoder (1 commits)")[![rolandschuetz](https://avatars.githubusercontent.com/u/735982?v=4)](https://github.com/rolandschuetz "rolandschuetz (1 commits)")[![skurfuerst](https://avatars.githubusercontent.com/u/190777?v=4)](https://github.com/skurfuerst "skurfuerst (1 commits)") --- Tags carbonfusionhacktoberfestneoscmshelpercarbonflowNeosFUSION ### Embed Badge ![Health badge](/badges/carbon-includeassets/health.svg) ``` [![Health](https://phpackages.com/badges/carbon-includeassets/health.svg)](https://phpackages.com/packages/carbon-includeassets) ``` ### Alternatives [shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)