{"id":21277975,"url":"https://github.com/b13/assetcollector","last_synced_at":"2025-07-11T08:32:24.071Z","repository":{"id":36474387,"uuid":"227321221","full_name":"b13/assetcollector","owner":"b13","description":"Add CSS / SVG / JS to Content templates, and load them only once","archived":false,"fork":false,"pushed_at":"2024-06-03T12:13:33.000Z","size":95,"stargazers_count":8,"open_issues_count":5,"forks_count":0,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-10-04T16:39:31.502Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-11T09:03:53.000Z","updated_at":"2024-06-03T12:12:23.000Z","dependencies_parsed_at":"2024-06-03T14:05:50.127Z","dependency_job_id":"c00858ac-40f3-4c12-8f9b-218853cb344c","html_url":"https://github.com/b13/assetcollector","commit_stats":{"total_commits":65,"total_committers":12,"mean_commits":5.416666666666667,"dds":0.8307692307692307,"last_synced_commit":"1161b69b4852e54ec2cccd5561458746459c922c"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fassetcollector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fassetcollector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fassetcollector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fassetcollector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13","download_url":"https://codeload.github.com/b13/assetcollector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225708281,"owners_count":17511635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T10:08:30.980Z","updated_at":"2024-11-21T10:08:31.529Z","avatar_url":"https://github.com/b13.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Asset Collector for TYPO3\n\nThis extension adds ViewHelpers to dynamically add CSS, JS and SVG files and CSS inline strings to be added to the HTML \ndocument from within Fluid Templates. In addition, including JS files are added via a registry\nto be only added once, which can be achieved via TypoScript as well.\n\nThe main benefit over TYPO3 Core functionality is that AssetCollector API is a straightforward approach\nfor integrators to not worry about having duplicate assets entries added again, and to only include the assets\nthat are necessary. This way, integrators can build content types or plugins and attach only necessary\nresources to one content type, even if it was added multiple times by any editor.\n\n## Installation \u0026 Requirements\n\nUse `composer req b13/assetcollector` or install it via TYPO3's Extension Manager from the\n[TYPO3 Extension Repository](https://extensions.typo3.org) using the extension key `assetcollector`.\n\nYou need TYPO3 v9 or later to use this extension.\n\n\n## JavaScript includes\n\nThis is useful when adding JavaScript files via TypoScript or within a Fluid template based on content element. In contrast\nto TYPO3 Core, the following functionality is given:\n- A JavaScript resource can be added multiple times, but is only added once.\n- By having a flexible API, additional attributes such as \"async\" or \"amp\" can be added directly.\n\nAll JavaScript data is always added within the \"head\" tag.\n\nIf adding via TypoScript, the following syntax applies:\n\n    page.jsFiles {\n        analytics = https://analytics.b13.com/track.js\n        analytics.async = 1\n        analytics.data-myattribute = true\n    } \n\n## CSS inliner\n\nThis is useful for adding inline-CSS that targets \"above the fold\" content based on content the editor adds to the page, \nor to add CSS inline styles that add background images for specific breakpoints (media queries are possible in the html \nhead, not in inline styles using the `style` attribute for specific elements). \n\n### Examples\n\nIn your Fluid templates use the ViewHelper to add CSS files or inline CSS code to the head of any page using this\ntemplate file:\n\n```\n\u003cac:css file=\"EXT:myext/Resources/Public/Css/myCssFile.css\"/\u003e\n``` \nThis includes the content of `myCssFile.css` inline as a style block in the HTML head of the document.\n\n```\n\u003cac:css\u003e.b_example { color: red; }\u003c/ac:css\u003e\n```\nThis adds the string `.b_example { color: red; }` to the inline style block in the HTML head of the document.\n\nRemember to add the Fluid namespace to your Fluid templates (or do this globally, see below):\n\n```\n\u003chtml \n    xmlns:f=\"http://typo3.org/ns/TYPO3/Fluid/ViewHelpers\"\n    xmlns:ac=\"http://typo3.org/ns/B13/Assetcollector/ViewHelpers\"\n    data-namespace-typo3-fluid=\"true\"\n\u003e\n```\n\n## CSS file include\n\nThe include option is useful for including CSS files as externally referenced files based on content of your pages.\nDepending on the size of the CSS and the number of pages the same CSS is used inlining the CSS into the page might not\nbe the best option. To include a CSS file across all pages of your installation could result in including way too much\nCSS for some of your content pages. \n\nThe ViewHelper for including CSS can be used to include CSS files within your Fluid Templates as external files by \nadding `external=\"1\"`. This adds the CSS file reference to the `\u003chead\u003e` part of your `\u003chtml\u003e` document:\n\n```\n\u003cac:css file=\"EXT:myext/Resources/Public/Css/myCssFile.css\" external=\"1\" /\u003e\n```\n\nThis will add the following code within the `\u003chead\u003e` of your document:\n\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/typo3conf/ext/myext/Resources/Public/Css/myCssFile.css\" media=\"all\"\u003e\n```\n\nYou can also specify a value for the `media` argument:\n\n``` \n\u003cac:css file=\"EXT:myext/Resources/Public/Css/myCssFile.css\" external=\"1\" media=\"print\" /\u003e\n```\n\n\n## SVG Map inliner\n\nAdds SVG files as inline map using a ViewHelper. A file can be added using a file path or an icon name set in your\nTypoScript setup. \n\nThis only includes the icons needed on a given page as inline SVG symbols in one svg map.\n\n\n### Examples\n\n#### Using a file path\n\n```\n\u003cac:svg file=\"EXT:myext/Resources/Public/Svg/myIconFile.svg\" class=\"b_myIconClass\"/\u003e\n```\nThis adds the svg inline code to your template output\n\n```\n\u003csvg\u003e\u003cuse xlink:href=\"#icon-myIconFile\"\u003e\u003c/use\u003e\u003c/svg\u003e\n```\n\nand adds the symbol from `myIconFile.svg` to the page's inline SVG map. The file name should be unique and is used \nto identify the icon within the `\u003cuse\u003e`-tag. Multiple uses of the same filename will result in the icon being included\nonly once (correctly so) in the SVG map.\n\n#### Using a name/identifier set in your TypoScript setup\n\n```\nplugin.tx_assetcollector.icons {\n  iconName = EXT:myext/Resources/Public/Svg/myIconFile.svg\n}\n```\n\n```\n\u003cac:svg name=\"iconName\" class=\"b_myIconClass\" /\u003e\n```\n\nThis will add the svg inline code to your template output using `iconName` as an identifier.\n\n### Notes on automated rendering of the svg map\n\nThe svg file is parsed and all children of the first `\u003csvg\u003e` tag are being included in a `\u003csymbol\u003e` section within the\nsvg map. The id of the symbol will be `icon-\u003cfilename\u003e` and the `viewBox` from the original `\u003csvg\u003e` tag will be added\nas an attribute to the `\u003csymbol\u003e` tag.\nAll `\u003csymbol\u003e` sections will be wrapped:\n\n```\n\u003csvg aria-hidden=\"true\" style=\"display: none;\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\n  \u003cdefs\u003e\n    \u003csymbol\u003e\u003c/symbol\u003e\n    \u003csymbol\u003e\u003c/symbol\u003e \t\n  \u003c/defs\u003e\n\u003c/svg\u003e\n```\n\n## Global registering of Fluid Namespace\n\nIf you want to register the fluid namespace globally, add this to your site extensions `ext_localconf.php`:\n\n```\n$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['ac'][] = 'B13\\Assetcollector\\ViewHelpers';\n```\n\n## License\n\nThe extension is licensed under GPL v2+, same as the TYPO3 Core. For details see the LICENSE file in this repository.\n\n## Open Issues\n\nIf you find an issue, feel free to create an issue on GitHub or a pull request.\n\n### Credits\n\nThis extension was created by [David Steeb](https://github.com/davidsteeb) in 2019 for [b13 GmbH](https://b13.com).\n\n[Find more TYPO3 extensions we have developed](https://b13.com/useful-typo3-extensions-from-b13-to-you) that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices to ensure long-term performance, reliability, and results in all our code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fassetcollector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13%2Fassetcollector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fassetcollector/lists"}