Jump to content

How to load JS/ CSS Plugins (colorbox, cycle2, ...)


pwFoo
 Share

Recommended Posts

How should I add JS/ CSS files in PW? 

  1. Load in template file if needed (simple, maybe have to copied to more template files or included with a inc-file)
  2. Create a colorbox module with needed plugin files (js, css, ...) and (auto-)load inside a template if needed. As module also configuration parameters are possible.

At the moment (tests only) I include js/ css straight in the template file.

How to add js/ css files to a FilenameArray I found here:

http://processwire.com/talk/topic/4776-have-a-scriptsstyles-loader-like-wp/

Link to comment
Share on other sites

In some projects I use a mix of the $config->scripts and $config->styles FilenameArray to add scripts in templates. And one similar to the one Ryan, where I can create js and css files with the name of the template and they'll get loaded if existing.

In a recent project I use a custom

$config->siteScripts = new FilenameArray();
$config->siteStyles = new FilenameArray();

I set in a autoload module. Then I add the script in a template:

$config->siteScripts->add($config->urls->templates . "js/yx.js");

This also allows for modules I create, for example widgets (that are not autoload), that need scripts/styles to add them with simply adding the method above in the init(). So as soon as I load the module in the front-end they'll get added to the array.

To output, I use the same method as found in default.php from the admin template.

<?php foreach($config->siteScripts->unique() as $file) echo "\n\t<script src='$file'></script>"; ?>

You could also just use the $config->scripts used in the backend, but if you use form (InputfieldForm) API in the front-end, loading inputfields modules will also load scripts and styles from those in the filename array. This may not desired, that's why I use a custom filename array.

For anything basic and global, I add scripts and styles hardcoded in the main template.

  • Like 3
Link to comment
Share on other sites

In a recent project I have plans to do almost identical.

I use all own & sitescripts for $config->styles & scripts. The new FilenameArray(); I gonna use for all Banners and adds & stuff. This way I can be sure that all my own scripts and styles comes absolutely first. They are all loaded on demand, there are no hardcoded links in the templates scripts except for jQuery.

Link to comment
Share on other sites

  • 1 month later...

I decided to use the way Soma suggested :)
 
Created css, js and views folder inside templates and include a layout.php file for basic layout/ design at the end of each site template (=controller) file. 
Templates are used as controller and use views via templateFile class.

$config->jsFiles = new FilenameArray();
$config->cssFiles = new FilenameArray();
Simple add scripts at the top like this.
$jsFiles = array('js/first.js', 'js/second.js');
$cssFiles = array('css/normalize.min.css', 'css/pocketgrid.min.css', 'css/layout.css');
Because of the js/ css order (site template add scripts/ styles before layout template) I have to take care about the add/ prepend order of the basic/ first styles and scripts. Solved it with array_reverse.
$tplDir = $config->urls->templates;
foreach (array_reverse($jsFiles) as $jsFile) {
$config->jsFiles->prepend($tplDir . $jsFile);
}
 
foreach (array_reverse($cssFiles) as $cssFile) {
$config->cssFiles->prepend($tplDir . $cssFile);
}

Last step is output at the layout.tpl.php view
$view->set ('js', $config->jsFiles->unique());
$view->set ('css', $config->cssFiles->unique()); 
<?php foreach($js as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; foreach($css as $file): ?>
<link rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>

To build my layout I use normalize.css V1 and pocketgrid (thanks Soma ;)).
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...