Symfony 2 Assetic Project layout and Resource Management

Question

I am trying to take a website I am working on and adapt it to use the symfony framework but I am fairly new at web development and have a bunch of questions.

I am having an extremely difficult time getting all of my resources to load correctly. I am trying to use assetic but no matter what I try I am getting hundreds of 404 not found responses when I load the page. My current directory structure is listed below:

Symfony

src

CS4750

PhotoChallengeBundle

Controller

Resources

config

public

css

img

js

libraries

LibraryX

css

img

js

views

The biggest problem I am having right now is with images within the css files. I have tried using

filters:
    cssrewrite: ~

but all of the paths are pointing to http://localhost/Symfony/web/Resources/public/img/* instead of http://localhost/Symfony/web/bundles/cs4750photochallenge/img I tried first without doing an asset:install web and then with doing so but neither of those seems to make a difference. If anyone you help me work through this that would be awesome.

Another problem I am having is with a css file which imports two additional css files. When the page loads the additional css files also return 404 responses.
What is the difference between asset:install and asset:dump
I am also having one of my js files return a server error 500 but I address it the same as the rest of the js files which seem to work fine.

Any answers to any of the above questions would be much appreciated or links to relevant website / posts. I have been digging around the interwebs for hours and haven't really made any headway. Please let me know if you need me to post and code or describe my project layout in more detail.

More Info:

Example of css files:


 /* IMPORTS ------------------------------------------------------------*/

    @import url('reset.css');
    @import url('styled-elements.css');
    /* HACKS ------------------------------------------------------------*/

    .clear {
        clear: both;
        height: 1px;
    }
    body {
        line-height: 1;
        color: #51565b;
        background: #f1f1f1 url(../img/bg/patterns/noise.png);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
}

Config_dev.yml:

 imports:
    - { resource: config.yml }

framework:
    router:   { resource: "%kernel.root_dir%/config/routing_dev.yml" }
    profiler: { only_exceptions: false }

web_profiler:
    toolbar: true
    intercept_redirects: false

monolog:
    handlers:
        main:
            type:  stream
            path:  %kernel.logs_dir%/%kernel.environment%.log
            level: debug
        firephp:
            type:  firephp
            level: info

assetic:
    use_controller: true
    filters:
        cssrewrite: ~

Template:

<!DOCTYPE  html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Weekly Photo Challenge</title>
        <!-- CSS -->
        {% stylesheets
            '@CS4750PhotoChallengeBundle/Resources/public/css/*'
            '@CS4750PhotoChallengeBundle/Resources/public/libraries/fancybox/css/*'

            filter='cssrewrite'
        %}
            <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
        {% endstylesheets %}

        <!-- JAVASCRIPT -->
        {% javascripts
            '@CS4750PhotoChallengeBundle/Resources/public/js/jquery-1.5.1.min.js'
            '@CS4750PhotoChallengeBundle/Resources/public/js/*'
            '@CS4750PhotoChallengeBundle/Resources/public/js/ajax/*'
            '@CS4750PhotoChallengeBundle/Resources/public/libraries/fancybox/js/*'

        %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}

This worked for me: http://stackoverflow.com/a/12066577/1516791 — ChocoDeveloper, Aug 22 '12 at 05:21

score 2 · Answer 1 · answered Jun 09 '12 at 13:48

2

I have created a small bundle FkrCssURLRewriteBundle which address this problem. Take a look at the Readme how it works. Maybe it's interesting for some of you.

answered Jun 09 '12 at 13:48

fkrauthan

498
4
8

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

The cssrewrite filter is not compatible with the @bundle notation for now. See : Path of assets in CSS files in Symfony 2

edited May 23 '17 at 12:31

Community

1
1

answered May 23 '12 at 17:46

Purplefish32

647
1
8
24

score -1 · Answer 3 · answered Mar 19 '12 at 00:49

-1

With relative links in your css file, and css rewrite filter, and dump the assets, it should work without problems.

You should use the filter in your twig file:

{% stylesheets '@PhotoChallengeBundle/Resources/public/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}

You can check the Assetic entry in the cookbook for detailed insturctions.

answered Mar 19 '12 at 00:49

Hakan Deryal

2,843
1
20
19

When I do asset:dump only the js and css folders get moved to the web directory, the img directory and the js and css files which are in the LibraryX folders do not. Do I need to move these manually and if so what should the directory structure in the web folder look like that houses these other files? What exactly does asset:dump do how does it decide what files to move? Thanks for helping! – Nath5 Mar 19 '12 at 00:53
You shouldn't have to move anything manually IMO, but don't have time to look into that now. I will try to answer tomorrow, if nobody does before me. – Hakan Deryal Mar 19 '12 at 00:56
Thank You! I will give it another go right now and let you know what happens! In my css files url(../img/bg/patterns/noise.png) will this work or is there a special path I should be using. Same thing for the imports @import url('reset.css'); – Nath5 Mar 19 '12 at 01:01
Tried it again using url(../img/bg/patterns/noise.png) in my css files but I still am getting hundreds of http://localhost/Symfony/web/Resources/public/img/bg/patterns/noise.png Failed to load resource: the server responded with a status of 404 (Not Found). The img folder is not being moved into the web folder and even if it were the address would be web/img not web/Resources/public/img ? – Nath5 Mar 19 '12 at 01:10
I am also getting a white screen when i switch to using the app.php instead of app_dev.php which I thought meant I needed to clear the cache but even after clearing the cache I get the same result. – Nath5 Mar 19 '12 at 15:24

Symfony 2 Assetic Project layout and Resource Management

3 Answers3