I have in my bundle in Resources
a directory called vendor
which contains JavaScript libraries, etc. Some of those vendors contain images.
I can import css/less/js files using assets with:
assetic:
assets:
flot:
inputs:
- @MyBundle/Resources/vendor/flot/jquery.flot.js
- @MyBundle/Resources/vendor/flot/jquery.flot.time.js
filters:
- ?yui_js
However if vendor contains images, I have no idea, how to put them into web/
directory.
I'd rather not symlink them manually.
Assetic's asset collections like
assetic:
assets:
collection_name:
inputs:
- ...
output:
- desired_filename # relative to assetic.output_path
filters:
- ?lessphp # scss, optipng, jpegoptim ... whatever
# the ? (question mark) prevents the
# filter to be applied in dev mode
can also contain images. but you have to specify them one by one
assetic:
assets:
[...]
my_image:
inputs:
- /path/to/image/image.png
output:
- images/smushed_image.png
filters:
- optipng
my__second_image:
inputs:
- /path/to/image/image2.jpg
output:
- images/smushed_image2.jpg
filters:
- jpegoptim
Then use the assetic:dump command to have them written ( and compiled / smushed ) to your web folder.
The --no-debug option prevents assetic from creating debug files for every single file in every package. Use for production systems or if you have another way of debugging ( i.e. the awesome Source Maps )
app/console assetic:dump --no-debug
Use the packages like this:
{% stylesheets '@collection_name' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
or
{% image '@my_image' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}