Assetic (with Symfony 2) changes the name of image files when 'assetic:dump' is run

3
votes

Whenever I run the command php app/console assetic:dump all of my assets (css, javascripts, images) are successfully placed into the web/ folder. The only issue I'm encountering is that Assetic changes the image file names, presumably for cache busting purposes, which interferes with images referenced in my css files.

When I manually place the image in web/images/masthead-4.jpg, it shows up correctly. I'd like to keep the cache busting on the images if possible. I would prefer to get one of these solutions working:

  • I use the processed image in my css rule, such as

    .is--site_landing { background: transparent url('../images/d755b65-aa84794_masthead-4_1-86f4322.jpg') top center no-repeat; background-size: cover; }

  • Get the images to transfer from app/Resources/public/images into web/images without having Assetic change the name of the file?

My images are located in %kernel.root_dir%/app/Resources/public/images. For instance, say I have a file %kernel.root_dir%/app/Resources/public/images/masthead-4.jpg.

The output of php app/console assetic:dump for the image file is:

20:22:40 [file+] /our_stuff/admin/symfony/app/../web/images/d755b65-aa84794.jpg
20:22:40 [file+] /our_stuff/admin/symfony/app/../web/images/d755b65-aa84794_masthead-4_1-86f4322.jpg

Now that the file is named d755b65-aa84794_masthead-4_1-86f4322.jpg or d755b65-aa84794.jpg my background-image css rule isn't finding the image.

My background CSS rule located in %kernel.root_dir%/app/Resources/public/images

    .is--site_landing {
      background: transparent url('../images/masthead-4.jpg') top center no-repeat;
      background-size: cover;
    }

My header in my Twig layout file:

{% stylesheets
  'css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

{% javascripts
  'js/jquery-1.11.2.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}  

{%image 
  'images/masthead-4.jpg'
%}
{% endimage %}

More information: I'm running:

  • PHP 5.3.3
  • Symfony 3.3
  • assetic-bundle ~2.3
1
phpsymfonyassetic
Maybe this will help: stackoverflow.com/questions/7044631/… – chapay
Thanks for the link Andrey, I had read it in some previous Googling, but unfortunately I don't think it helps much for my case. The cssrewrite filter is working correctly and all of my images are getting placed correctly under web/, and if I change the file name in my CSS to the one that Assetic generates, it works correctly. I'd like to know why Assetic is changing my file name from masthead-4.jpg to something like d755b65-aa84794_masthead-4_1-86f4322.jpg and also how to get the CSS rule to know the new filename. – Patrick
Have you tried to include <img src="{{ asset_url }}" alt="Example" /> between {% image %} and {% endimage %} tags? Or even not using this tags at all and just use <img> tag? – chapay

1 Answers

1
votes

Assetic are made for processing assets. Don't use it for the images if you don't like it to process yours images.

First, remove that, you don't need it. 

{%image 
  'images/masthead-4.jpg'
%}
{% endimage %}

Next, use php app/console assets:install --symlink for creating the symlink in the web folder. Like that, your CSS file can access the image file.