web-dev-qa-db-fra.com

Symfony2 - Assetic - charge les images en CSS

J'ai un CoreBundle qui contient les principaux fichiers css et images. Maintenant, j'ai un problème lorsque je charge une image à partir de CSS; l'image n'est pas affichée.

 background-image:url(../images/file.png)

(avec un chemin complet ça marche)

J'ai installé les ressources à l'aide de la commande: assets:install web et je peux voir les fichiers image et css sous web/bundles/cmtcore/(css|images).

Voici la structure de fichier à l'intérieur du bundle principal:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

Et voici comment je charge le fichier css dans le modèle:

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

Merci d'avance pour votre aide.

cssimagebackground-imagesymfonyassets
59
LBridge

utilisez le filtre cssrewrite du bundle Assetic

Dans config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

Et appelez ensuite vos feuilles de style comme ceci:

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

Oh et n'oubliez pas d'utiliser php app/console assetic:dump

54
Inoryy

Il y avait peu de problèmes avec ccsrewrite:

Le filtre CssRewrite ne fonctionne pas lors de l'utilisation de la syntaxe @MyBundle dans AsseticBundle pour référencer les actifs. C'est une limitation connue.

Voici la version php pour cssrewrite:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>
17
user257980

J'ai résolu le problème en suivant les instructions sur ce site: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Le problème réel est que vous référencez vos ressources de bundle absolues, mais devez les référencer relatives.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

Effacez votre cache et réinstallez vos actifs

13
Yann

J'ai développé un petit paquet avec un filtre supplémentaire pour résoudre ce problème. Vous pouvez le trouver sur github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Avec cet ensemble, la @Notation for assetic fonctionne si vous avez des chemins relatifs dans votre fichier CSS.

6
fkrauthan

Concernant la réponse de Yann, vous n’aurez pas à réinstaller les ressources après chaque modification si vous utilisez l’option --symlink.

Notez toutefois que l'exécution du script d'installation du fournisseur écrasera les liens symboliques. Vous devrez donc supprimer les dossiers bundles/* et réinstaller les actifs avec l'option --symlink après avoir exécuté le script du fournisseur.

6
tystr

J'ai résolu ce problème en créant en permanence un dossier 'images' contenant des images dans le dossier 'symfony_root/web /'. Résultat: 'symfony_root/web/images /' - et ça devient un super travail!

1
yura

J'ai résolu ceci en utilisant htaccess:

Mes ressources sont stockées dans src/Datacode/BudgetBundle/Resources/public/(css | img | js) et le paramètre de sortie assetic est défini pour écrire dans: bundles/datacodebudget/css/styles.css (dans le répertoire Web).

Dans mon css, j'utilise le chemin relatif ../ pour référencer des images.

Voici la règle .htaccess:

# Make image path work on dev
# i.e. /app_dev.php/bundles/datacodebudget/img/glyphicons-halflings-white.png rewrites to /bundles/datacodebudget/img/glyphicons-halflings-white.png
RewriteRule ^app_dev\.php/(.*)/(.*)/img/(.*)$ /$1/$2/img/$3 [L]

Mon css est chargé comme suit:

{% stylesheets
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap.css'
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap-responsive.css'
    '@DatacodeBudgetBundle/Resources/public/css/styles.css' 
    '@DatacodeBudgetBundle/Resources/public/css/chosen.css' output="bundles/datacodebudget/css/styles.css"
%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

Dans mon fichier config.yml, j'ai:

assetic:
    use_controller: true

Ce qui (sans la réécriture htaccess) empêche les images de se charger car le chemin relatif de l'image se trouve à app_dev.php/bundles/datacodebudget/img/someimage.jpg. L'utilisation du filtre cssrewrite ne fonctionne pas non plus, car il réécrit ensuite ../img en ../../../../Resources/public/img/ qui se présentera en Ressources/public/img.

En utilisant la méthode htaccess, les images se chargent très bien et je n'ai besoin que d'exécuter assetic: dump/assets: installer lorsque j'ajoute de nouvelles images ou que je souhaite appliquer les modifications à la production.

1
Matt Davis

J'ai un problème similaire, et j'ai regardé autour de moi pendant au moins une journée, et je ne suis pas convaincu qu'il existe une bonne solution pratique à ce problème. Je recommande d'utiliser Assetic pour gérer javascript et css, puis de simplement mettre vos images dans la docroot de votre site Web. Par exemple, si vous avez un fichier CSS qui référence ../images/file.png, créez simplement un dossier et un dossier d'images sous votre docroot et insérez le fichier fichier.png. Ce n'est certainement pas la meilleure solution théorique, mais c'est la seule solution que je puisse trouver qui fonctionne réellement.

0
adavea