We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. Volt

Global assets and local asset

Hi,

i am using the asset manager for css and js Something like this in Volt:

    {{ assets.outputCss("header") }}
    {{ assets.outputJs("footer") }}

Now i have to create in each Controller function the same files, indexAction(), searchAction() etc.

    $this->assets
        ->collection('header')
         ->addCss('bootstrap.css')
        ->addCss('custom.css');

    $this->assets
        ->collection('footer')
         ->addJs('jquery.js')
         ->addJs('bootstrap.js')
        ->addJs('custom.js');

So jquery and bootstrap will always repeat and just the custom.js should be changed. instead of custom.js, i would be load search.js or index.js ... something like that.

Now i need a global Collection for jquery and bootstrap and also a local/module collection for a specific module/view.

How can i solve this?

Rgds Stefan



85.5k
edited Feb '17 
$di->setShared("assetsGlobal", function ...)
$di->setShared("assets", function ...)

in the view

    {{ assetsGlobal.outputCss("header") }}
    {{ assetsGlobal.outputJs("footer") }}
    {{ assets.outputCss("header") }}
    {{ assets.outputJs("footer") }}

you can always extend the phalcon class for assets and implement something on your own



145.0k

Add other service with global assets.



43.9k

Hi,

Other option:

if all your controllers extends from the same controller (eg: ControllerBase), then register as "header" and "footer" collections all the jquery and bootstrap stuff in initialize() method of your base controller.

Then, for each of your controller actions, just add the asset you need to the "header" and "footer" collections

More or less out of subject: maybe you plan to minify the assets collections in production mode. Then, for each action, there will be a specific minifyed asset bundle. This is not really optimized imho. Better solution, especially if the content of seach.js, index.js is not so huge: put them all in a single file.



59.9k

Hello,

@le51 I have insert this function into ControllerBase.php:

public function initialize(){

    $this->assets
        ->collection('header')
        ->addCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',false);

}

It is only working for the index.volt, for session/login it is not working.

class SessionController extends ControllerBase{

@Izo

I tried this, but now the "normal" assets are not working, only the assetsGlobal

$di->setShared("assetsGlobal", function() {

    $assetManager = new AssetManager;
    $assetManager
        ->collection('header')
        ->addCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',false);

    return $assetManager;

});
$di->setShared("assetsLocal", function() {

    $assetManager = new AssetManager;

    return $assetManager;

});

Message

The collection does not exist in the manager

SessionController login:

$this->assetsLocal
        ->collection('header')
        ->addCss('css/style.css');

Volt

    {{ assetsGlobal.outputCss("header") }}
    {{ assetsLocal.outputCss("header") }}

Thx for help :-)



85.5k

you have to set header group in both palces, created this was, the 2 assets services, has nothing in comman and they dont know about each other.



59.9k
Accepted
answer

Hello @Izo,

i think i got it, it works like that:

  $di->setShared("assetsGlobal", function() {

      $assetManager = new AssetManager;
      $assetManager
          ->collection('header')
          ->addCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',false)
          ->addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', false)
          ->addCss('https://fonts.googleapis.com/css?family=Josefin+Sans:400,300', false)
          ->addCss('css/style.css');

      $assetManager
          ->collection('footer')
          ->addJs('js/modernizr.custom.70736.js')
          ->addJs('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false)
          ->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false)
          ->addJs('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', false);

      return $assetManager;

  });

  $di->setShared("assetsLocal", function() {

      $assetManager = new AssetManager;
      $assetManager->collection('header');
      $assetManager->collection('footer');

      return $assetManager;

  });

Volt

<!DOCTYPE html>
<html>
    <head>
        <title>Vokuro</title>

        {{ assetsGlobal.outputCss("header") }}
        {{ assetsLocal.outputCss("header") }}
    </head>
    <body>

        {{ content() }}

    </body>
    {{ assetsGlobal.outputJs("footer") }}
    {{ assetsLocal.outputJs("footer") }}

</html>