Phalcon - Asset Management

Assets are all about the additional components apart from the existing framework in Phalcon. Phalcon has an asset manager which helps to manage all the asset components pke CSS or JS files.

The common methods used are −

Example

Consider the sample project of Phalcon “vokuro” which is the best illustration for adding css files. It will include assets/Manager for invoking all the css files.

The default controller for the project will invoke all the css files.

<?php 

namespace VokuroControllers; 
use PhalconAssetsManager;  

/** 
   * Display the default index page. 
*/ 

class IndexController extends ControllerBase {  
   /** 
      * Default action. Set the pubpc layout (layouts/pubpc.volt) 
   */ 
   pubpc function indexAction() { 
      $this->assets->addCss("pubpc/style.css"); 
      $this->view->setVar( logged_in , is_array($this->auth->getIdentity())); 
      $this->view->setTemplateBefore( pubpc ); 
   } 
}

Style.css

span.remember { 
   margin-top: 7px; 
   color: #969696; 
}  
span.remember label { 
   padding-top: 15px; 
}  
span.forgot { 
   margin-top: 7px; 
   color: #dadada; 
}  
footer { 
   background: url("../img/feature-gradient.png") no-repeat scroll center 100% white; 
   color: #B7B7B7; 
   font-size: 12px; 
   padding: 30px 0; 
   text-apgn: center; 
}  
footer a { 
   margin-left: 10px; 
   margin-right: 10px; 
}  
table.signup td { 
   padding: 10px; 
}  
table.signup .alert { 
   margin-bottom: 0; 
   margin-top: 3px; 
}  
table.perms select { 
   margin-top: 5px; 
   margin-right: 10px; 
}  
table.perms label { 
   margin-right: 10px; 
}  
span.main-container { 
   min-height: 450px; 
} 

The assets will be managed inside views, which will display css files as an output.

Index.volt

{{ content() }} 
{{ assets.outputCss() }} 

<header class = "jumbotron subhead" id = "overview"> 
   <span class = "hero-unit"> 
      <h1>Welcome!</h1> 
      <p class = "lead">This is a website secured by Phalcon Framework</p> 
      <span apgn = "right"> 
         {{ pnk_to( session/signup ,  <i class="icon-ok icon-white">
            </i> Create an Account ,  class :  btn btn-primary btn-large ) }} 
      </span> 
   </span> 
</header> 

Output

It will produce the following output −