Comment sont traitées les URL dans le fichier CSS dans CakePHP ils font référence au bon endroit?

Question

Je suis la conception d'un site Web en utilisant les fichiers CSS beaucoup, mais j'ai plusieurs occurrences d'images de fond, des images pour les puces dans les listes et je vais probablement trouver un autre besoin de la fonction css url().

Mais, dans le gâteau, toutes les URL doit être gérée par la fonction Route::url(), de plusieurs façons, étant le plus commun de $html->url()

Mais mon problème est que les fichiers CSS ne sont pas interprétées par PHP. Comment puis-je créer un fichier contenant CSS quelque chose comme:

div.coolbg {
  background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}

Voir, ma dernière option est d'importer la ligne de fichier css sur la mise en page de sorte qu'il peut être interprété. Mais je préfère fortement utiliser une approche plus « gâteau ».

Merci!

Answer 1

Vous n'avez pas besoin d'utiliser $ html-> url () dans votre fichier css, par conséquent, vous n'avez pas besoin d'analyser les fichiers CSS par PHP ou créer un CssController.

Si votre application gâteau est installé dans votre DocumentRoot des hôtes virtuels, il suffit de faire tous les chemins d'accès aux images absolues du Webroot. par exemple.

div.coolbg {
  background-image: url(/img/coolbg.jpg);
}

Il en sera de l'image app / webroot / img / coolbg.jpg à votre

Si votre application gâteau n'est pas installé dans le DocumentRoot d'hôtes virtuels, à savoir que vous accédez à votre application gâteau via une URL comme http://www.domain.com/myapp/ , puis vous faites le chemin de l'image par rapport au fichier css. Consultez les règles de style dans app / webroot / css / cake.generic.css par exemple.

#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}

Cela fonctionne parce que des feuilles de style en direct dans l'application / Webroot / css / et image en direct dans l'app / webroot / img / répertoire, de sorte que le chemin "../img/cake.icon.gif" apparaît sur du répertoire css, puis vers le bas dans le répertoire img.

Answer 2

Je reviendrai à coup sûr pour la solution proposée par zam3858. Et si vous ne voulez pas que vos images dans deux endroits distincts, créer un lien symbolique dans le répertoire css qui pointe vers les images. Comme ceci:

$ cd app/webroot/css 
$ ln -s ../img .

Maintenant, les chemins d'image seront résolus correctement à la fois l'assistant HTML et les feuilles de style:

// css:
url(img/image.png);

// view.ctp
echo $html->image('image.png');

Il ne peut pas être la solution cakiest, mais il ne ressemble pas à CakePHP fournit un.

Answer 3

Modifiez la ligne avec à background

background:url(../img/menu_027_l.jpg) no-repeat left;

Answer 4

Vous pouvez ajouter CSS à traiter par PHP en éditant votre fichier .htaccess dans Apache. Son traitement, plutôt que de simplement le recracher a un léger impact négatif sur la performance.

AddType application/x-httpd-php .css

Voir aussi: http://www.webmasterworld.com/forum88/5648.htm

Answer 5

Cela ne va pas aider trop avec les trucs de gâteau, sauf si vous devez d'abord instancier les objets Cake. Si vous voulez utiliser l'aide html, vous aurez probablement envie de comprendre comment le premier objet Cake est instancié, puis imiteront dans vos trucs CSS. Je ne sais pas exactement comment je le fais - je pense avoir un CSSController ensemble serait exagéré, mais je pense que vous pourriez avoir à instancier un contrôleur d'applications (, vous voulez après tout l'URL css réécrite pour refléter les paramètres que vous application, non? ). Donc, je suppose que vous pourriez avoir à créer une CSSController de toute façon.

Answer 6

Un tas d'experts CakePHP vont probablement me haïr pour suggérer celui-ci ..:)

La solution pour moi plus facile était de simplement le nom du fichier image dans le dossier css. Quelque chose comme ceci

/app/webroot/css/css_images/mypic.jpg

dans le fichier css Je viens de mettre dans:

background-image: url(css_images/mypic.jpg);

La mauvaise chose est évidemment ce n'est pas la chose à faire cakiest. La bonne chose est que cela fonctionnera, peu importe si vous utilisez URL de fantaisie ou non, puisque l'image trouve css par rapport au fichier css.

Answer 7

J'ai trouvé que urls par rapport à l'automne CSS à part lors de l'intégration CSS dans une aide pour CakePHP. Il est dû au routeur pouvoir cartographier différentes urls à la même page pour ensuite les besoins url par rapport à être différent. Par exemple, si vous avez une URL comme localhost / myapp / parties / index ou localhost / myapp / pièces / ou localhost / myapp / parties puis une url relative de ../img/image.gif ne fonctionne que pour l'un d'eux.

Dans mon aide la seule manière que je trouvais de contourner ce problème était de faire mon css comme ceci

.jquery-dialog-spinner {
    display:    none;
    position:   fixed;
    z-index:    1010;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .1 ) 
            url('__loader_image__') 
            50% 50% 
            no-repeat;

}

puis remplacer la balise avec une url générée dans le code avant la sortie du css.

  $map = array(
      '__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL))
  );
  $formatted_css = strtr($this->css, $map);
  $response .= "<style type=\"text/css\">" . $formatted_css . "</style>";

S'il y a un moyen plus facile de le faire, je vous serais reconnaissant un commentaire.