4: Asset handling
In former times, we created a central main.css and main.js file that contained collected style- and script-information for all page components. And for all components, that could be, but are not shown at the current page. That could lead to a big file with large proportions of unused code.
Since HTTP2 we don't have any valid argument to keep on with strategy. We can speed up our site if we load multiple small files, because they will be loaded simultaneously. In addition, semantically spliced code allows us to reduce the weight of unused code as well. You only have to load the code which is really needed by a component.
Twack supports you by adding different ways to include your css- and js-assets. ProcessWire already has its global wire('config')->scripts and wire('config')->styles WireArrays, where scripts and styles can be collected. With that mechanism, you can collect all your scripts and styles, but you have to include them in your view:
<?php
namespace ProcessWire;
?>
<html>
<head>
<?php
foreach (wire('config')->styles as $stylefile) {
echo "\n\t<link rel='stylesheet' href='$stylefile' /> ";
}
?>
</head>
<body>
<?php
foreach (wire('config')->scripts as $scriptfile) {
echo "\n\t<script type='text/javascript' src='$scriptfile'></script>";
}
?>
</body>
</html>Every Twack component comes with a $this->addStyle() and a $this->addScript() function which add your scripts and styles to the global wire('config') collections. But they do more than that. The functions enable you to place CSS- and JS-Files in your component's directories. Per default, if you call $this->addStyle('component-styles.css') inside of our page_title_output.class.php, the url /site/templates/components/general/page_title_output/component-styles.css will be added to wire('config')->styles. The same will happen for scripts via $this->addScript() as well.
If you still want to add an absolute url, use true for the second parameter:
$this->addStyle(
wire('config')->urls->templates . 'assets/css/bootstrap.min.css',
true
);This will add exactly the url you passed.
➡️ Continue with 5: Services
⬅️ Back to 3: Component Parameters
Twack
Reusable components for your ProcessWire-templates!
| ProcessWire-Module: | https://modules.processwire.com/modules/twack/ |
| Support-Forum: | https://processwire.com/talk/topic/23549-twack/ |
| Repository: | https://github.com/Sebiworld/Twack |
| Wiki: | https://github.com/Sebiworld/Twack/wiki/ |
