If you don't use Composer, you can still download this repository and add it
to your include_pathPSR-0 compatible, (*3)
2: Configure Assetic as a Service
Configures Assetic classes in your Di Container, and tweak it the way you want. To make it customizable,
we'll also use some INI properties:, (*4)
``` ini
[services]
; :packageDir is the directory where your service.xml is.
assetic.assets.directory = :packageDir/MyApp/templates/assets
assetic.debug = true
assetic.action.name = Asset, (*5)
services.xml:
``` xml
<class-definition name="assetic.AssetFactory" class="Assetic\Factory\AssetFactory" shared="true">
<argument>:assetic.assets.directory</argument>
<argument>:assetic.debug</argument>
<call method="setFilterManager">
<argument>@assetic.FilterManager</argument>
</call>
</class-definition>
<class-definition name="assetic.FilterManager" class="Assetic\FilterManager" shared="true" />
<class-definition name="assetic" class="FwkAssetic\AssetsService" shared="true">
<argument>@assetic.AssetFactory</argument>
</class-definition>
<class-definition name="_vh.AsseticViewHelper" class="FwkAssetic\AssetViewHelper" shared="true">
<argument desc="Name of the Fwk Service">assetic</argument>
<argument desc="Name of your Url ViewHelper">url</argument>
<argument desc="Enable Assetic debugging">:assetic.debug</argument>
<argument desc="Asset action name">:assetic.action.name</argument>
</class-definition>
Next, you want to add the ViewHelper to your ViewHelperService:
``` xml
asset@_vh.AsseticViewHelper, (*6)
### 3: Register action and routes to the Asset Action
fwk.xml:
``` xml
<action name="Asset" shortcut="FwkAssetic\Controllers\AssetAction:show" />
If you use the UrlRewriterService, you can also customize the action route:, (*7)
``` xml
, (*8)
### 4: That's it!
You can now use the viewHelper in your templates, like so:
``` php
<?php foreach($this->_helper->asset(array('/path/to/site.css'), $filters = array(), $output = "site") as $asset): ?>
<link href="<?php echo $asset; ?>" media="all" rel="stylesheet" type="text/css" />
<?php endforeach; ?>
Or if you use Twig:
``` django
{% for asset in _helper.asset(['/path/to/site.css'], [], 'site', true) %}
{% endfor %}, (*9)
## CssRewrite
To display images and resources referenced in your CSS, you'll have to use a "rewrite" filter.
Back to your services.xml, declare the filter definition and change your ```assetic.FilterManager``` definition to this:
``` xml
<class-definition name="assetic.FilterManager" class="Assetic\FilterManager" shared="true">
<call method="set">
<argument desc="Filter alias">cssrewrite</argument>
<argument desc="Filter instance">@assetic.CssRewriteFilter</argument>
</call>
</class-definition>
<class-definition name="assetic.CssRewriteFilter" class="FwkAssetic\Filters\CssRewriteFilter" shared="true">
<argument>@_vh.AsseticViewHelper</argument>
</class-definition>
Now, just call the cssrewrite filter in your templates:
``` php
_helper->asset('/path/to/site.css', 'cssrewrite') as $asset): ?>
, (*10)
That's it!
## Configure Caching
To prevent 404 errors on assets urls, you'll have to use the Assetic caching mechanism, which require some more configuration...
### 1: Configuration variables and caching directory
Create a directory where Assetic can cache the assets:
``` sh
$ mkdir /path/to/app/cache
$ chmod 777 /path/to/app/cache
Configure the application:
``` ini
assetic.use.cache = true
assetic.cache.directory = /path/to/app/cache
; could be content or modification
assetic.cache.strategy = content, (*11)
### 2: Configure Services
Adds the following definitions to your services.xml
``` xml
<!-- Assetic FilesystemCache -->
<class-definition name="assetic.FilesystemCache" class="Assetic\Cache\FilesystemCache" shared="true">
<argument>:assetic.cache.directory</argument>
</class-definition>
<!-- Assetic CacheBustingWorker -->
<class-definition name="assetic.CacheBustingWorker" class="Assetic\Factory\Worker\CacheBustingWorker" shared="true">
<argument>:assetic.cache.strategy</argument>
</class-definition>
And reconfigure previous definitions:
``` xml
:assetic.assets.directory:assetic.debug@assetic.FilterManager@assetic.CacheBustingWorker, (*12)
### 3: You're done!
Now you can refresh your pages and admire your frontend skills ;)
## Shortcuts to Assets
Sometimes it can be useful to define shortcuts to assets directories if they are not in your ```:assetic.assets.directory```.
### 1: Create an array of shortcuts
``` xml
<!-- Assets shortcuts -->
<array-definition name="assetic.Shortcuts">
<param key="bower">:packageDir/../public/bower_components</param>
<param key="theme">:packageDir/templates/assets</param>
</array-definition>
2: Add a method call to your AssetsService
``` xml
@assetic.AssetFactory@assetic.FilesystemCache@assetic.Shortcuts, (*14)
### 3: Use your shortcuts
Now that shortcuts have been defined, we can call our assets easily:
``` php
<?php foreach($this->_helper->asset(array('+bower/bootstrap/css/bootstrap.css')) as $asset): ?>
<link href="<?php echo $asset; ?>" media="all" rel="stylesheet" type="text/css" />
<?php endforeach; ?>
Full XML configuration
``` xml
@_vh.AsseticViewHelpercssrewrite@assetic.CssRewriteFilter:assetic.cache.directory:assetic.cache.strategy:assetic.assets.directory:assetic.debug@assetic.FilterManager@assetic.CacheBustingWorker, (*15)
Wallogit.com
neiluJ