Static asset dumping with png optimization references wrong files

Question

I'm trying to build a project using Symfony2 and all possible optimizations included. One of such is the optimizing of images used in the html. Symfony2 has a bundle Assetic that allows for this using e.g. optipng right from the Twig templates. The docs are here: http://symfony.com/doc/2.0/cookbook/assetic/jpeg_optimize.html

The problem i'm having is that everything works in the dev environment (where all assetic assets are served through a controller) but that the CLI command dumps to a file, not used in the rendered templates.

This is the output when dumping the assets, the files are available afterwards in /web/assetic

Dumping all prod assets.
Debug mode is off.

[file+] /home/projects/dashboard/data/dashboard/app/../web/js/4a3b4dc.js
[file+] /home/projects/dashboard/data/dashboard/app/../web/css/9640074.css
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/1d666d2.png
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/dfaa6c9.png
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/5f2dd31.png

When i view the page these url's are called

<img src="/assetic/ad39e3f.png">
<img src="/assetic/69fbd4a.png">
<img src="/assetic/e4a4ede.png">

Css and js however do work.

My config file:

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    java: /usr/bin/java
    filters:
        cssrewrite: ~
        closure:
             jar: %kernel.root_dir%/Resources/java/compiler.jar
        yui_css:
             jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        optipng:
            apply_to: "\.png$"
            level:    3
        jpegoptim:
            apply_to: "\.jpe?g$"
            strip_all: true
    twig:
        functions:
            jpegoptim: { output: images/*.jpg }
            optipng: { output: images/*.png }

My twig template:

 <img src="{{ optipng('@KunstmaanDashboardBundle/Resources/public/images/foursquare-logo.png') }}" style="margin-bottom: 0;" />

Contradistinguish

Answer 1

I worked around that problem doing some tests with the two possible twig syntaxes.

<!-- standard syntax: -->
{% image 'img/promo/widget.autopromo.testimonial.jpg' filter='jpegoptim' output='img/*.js' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

<!-- twig function: -->
<img src="{{ jpegoptim('img/promo/widget.autopromo.activity.jpg') }}" />

I started with the following configuration

assetic:
  debug:          %kernel.debug%
  use_controller: %kernel.debug%
  read_from:      %kernel.root_dir%/../web/static/
  write_to:       %kernel.root_dir%/../web/static/optimasset

  filters:
    jpegoptim:
      bin: /usr/bin/jpegoptim
      apply_to: "\.jpe?g$"
      strip_all: true
  twig:
    functions:
        jpegoptim: ~

between each change I ran the following commands to make sure the cache was clear and new files were dumping.

rm -Rvf app/cache/* # yes I wanted to make that sure cache is cleared
rm -Rvf web/static/optimasset; 
app/console cache:clear --no-warmup; 
app/console assetic:dump

00 First the dump output was

web/static/optimasset/images/e749c9f.jpg
web/static/optimasset/images/e749c9f_widget.autopromo.testimonial_1.jpg
web/static/optimasset/assetic
web/static/optimasset/assetic/bb69582.jpg
web/static/optimasset/assetic/bb69582_widget.autopromo.activity_1.jpg

and generated html

<img src="/static/images/e749c9f_widget.autopromo.testimonial_1.jpg" alt="Example">
<img src="/static/assetic/c03bc54.jpg">

Note:

• the twig function generates a wrong filename.
• Both consider the write_to parameter in config.yml when dumping assets but still create a default folder (assetic/ or images).
• Both ignore the write_to parameter when generating html but use their default folder following the folder specified in framework.templating.assets_base_urls.http
• Twig function generate html with a wrong filename

01 Specifying an output directory in the config.yml

filters:
    jpegoptim:
        bin: /usr/bin/jpegoptim
        apply_to: "\.jpe?g$"
        strip_all: true
        output:'img/*.jpg' # just a test
twig:
    functions:
        jpegoptim: {output:'img/*.jpg'} # according to documentation

Note: You'll get exactly the same result. Neither syntax handles "output" from config (only in twig).

02 Specifying an output in the twig template

By the way I added optimasset/ to the output path because rendering doesn't consider ````write_to``` value.

{% image 'img/promo/widget.autopromo.testimonial.jpg' filter='jpegoptim' output='optimasset/img/*.jpg' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

<img src="{{ jpegoptim('img/promo/widget.autopromo.activity.jpg', {output:'optimasset/img/*.jpg'}) }}" />

dump:

web/static/optimasset/optimasset/img
web/static/optimasset/optimasset/img/974c414.jpg
web/static/optimasset/optimasset/img/974c414_widget.autopromo.testimonial_1.jpg
web/static/optimasset/optimasset/img/c230e9e.jpg
web/static/optimasset/optimasset/img/c230e9e_widget.autopromo.activity_1.jpg

render as:

<img src="/static/optimasset/img/974c414_widget.autopromo.testimonial_1.jpg" alt="Example">
<img src="/static/optimasset/img/080b62e.jpg">

Note: The rendering is correct but the dumping path is not. To fix this I had to remove the write_to parameter.

CONCLUSION

• {{ optipng(...) }} as {{ jpegoptim(...) }} never output the good file name. Use the syntax {% images ... %}.
• You should'nt use write_to if you are using assetic to filter images {% images %} doesn't consider it when rendering html, only {% javascripts %} and {% stylesheets %} do.

Denby

Answer 2

And have you read Using Assetic in Symfony2 for CSS compression already? It might be the weird behavior they're talking about, so skip to point 4 on that page and look at the pull request mentioned (https://github.com/symfony/symfony/pull/509). It might solve your problem :p.

Oversleep

My "update" script runs: php bin/vendors install; php app/console cache:clear --env=prod --no-debug; php app/console doctrine:migrations:migrate --no-interaction --env=prod; php app/console assets:install web --env=prod; php app/console assetic:dump --env=prod --no-debug; – Contradistinguish

And what happens if you alter the 2nd command into php app/console cache:clear --env=prod --without-debug --no-debug; and the final one into php app/console assetic:dump --env=prod? – Oversleep

[RuntimeException] The "--without-debug" option does not exist. – Contradistinguish

Also tried with --no-warmup and clearing cache again after dumping. No Joy – Contradistinguish

For now i fallbacked to the "long" syntax with hardcoded output url's symfony.com/doc/2.0/cookbook/assetic/jpeg_optimize.html – Contradistinguish