Question

I´m working with jQuery-ui datepicker but I have problems with images and paths. This is how I link my css:

    {% stylesheets  '@BackendBundle/Resources/public/css/bootstrap.min.css' 
                    '@BackendBundle/Resources/public/css/bootstrap-responsive.min.css' 
                    '@HotelBundle/Resources/public/css/ui-lightness/jquery-ui-1.8.20.custom.css' 
                    '@HotelBundle/Resources/public/css/encargado.css'
               output='css/encargado.css' %}
        <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {% javascripts  '@BackendBundle/Resources/public/js/jquery-1.7.2.min.js' 
                    '@BackendBundle/Resources/public/js/modernizr-2.5.3-respond-1.1.0.min.js' 
                    '@HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.js' 
                    output='js/backend.js' %}
        <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}

and I save my files css files there:

../src/Gitek/HotelBundle/Resources/public/css/ui-lightness/
 - jquery-ui-1.8.20.custom.css
 - images/ui-bg_diagonals-thick_18_b81900_40x40.png;ui-bg_diagonals-thick_20_666666_40x40.png ...

my js files there:

../src/Gitek/HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.css

after that, I dump the assets with php app/console assetic:dump with no error

I also install the assets with php app/console assets:install web –symlink

and clear the cache php app/console cache:clear

I did all this and I can see and work with my datepicker, but some pictures are not loading. If I go to the Chrome console I can see these errors:

Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_glass_100_f6f6f6_1x400.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-icons_ffffff_256x240.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png

I think that maybe the problem is with the paths within the css file but I´m not sure.

Any help?

Answer 1

You need to manually update path to images in the jquery-ui-1.8.20.custom.min.css file.

For example:

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

You need to update images/ by /css/ui-lightness/images/.