In che modo gli URL vengono gestiti all'interno del file CSS in CakePHP in modo che facciano riferimento alla posizione corretta?

Question

Sto progettando molto un sito Web utilizzando CSS Files, ma ho diverse occorrenze di immagini di sfondo, immagini per elenchi puntati e probabilmente troverò un'altra necessità per la funzione css url().

Ma, a torta, tutto URL deve essere gestito dalla funzione Route::url(), in diversi modi, essendo più comune l'$html->url()

Ma il mio problema è che i CSS I file non vengono interpretati da PHP. Come posso creare un file CSS che contiene qualcosa come:

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

Sede, la mia ultima opzione è quella di importare il file css inline sul layout in modo che possa essere interpretato. Ma io preferisco decisamente usare un approccio più "Cake".

Grazie!

Answer 1

Non è necessario utilizzare $ html-> url() nel file css, di conseguenza non è necessario analizzare i file CSS tramite PHP o creare un CssController.

Se l'applicazione di torta è installata negli host virtuali DocumentRoot, basta rendere tutti i percorsi alle immagini assoluti dalla radice del web. per esempio.

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

Questa operazione applicherà l'immagine in app/webroot/img/coolbg.jpg al

Se la vostra applicazione torta non è installato nelle host virtuali DocumentRoot, cioè di accedere alla app torta tramite un URL come http://www.domain.com/myapp/, quindi si effettua il percorso dell'immagine relativa al file css. Controlla le regole di stile in app/webroot/css/cake.generic.css, ad es.

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

Questo funziona perché i fogli di stile vivono in/css/cartella app/webroot, e l'immagine vivono nel/img/cartella app/webroot, in modo che il percorso ../img/cake.icon.gif" "esce dalla directory css, quindi torna nella directory img.

Answer 2

È possibile aggiungere CSS per essere elaborati tramite PHP modificando il file .htaccess in Apache. Elaborarlo, invece di limitarsi a sputarlo, ha avuto un leggero calo di prestazioni.

AddType application/x-httpd-php .css 

Inoltre, si veda: http://www.webmasterworld.com/forum88/5648.htm

Answer 3

Questo non aiuterà troppo con la roba torta a meno che non si crea un'istanza prima gli oggetti Cake. Se vuoi usare l'helper html, probabilmente vorrai capire come viene istanziato il primo oggetto Cake, quindi imitarlo nelle tue risorse CSS. Non sono sicuro di come farei questo - penso che avere un intero controller CSS sarebbe eccessivo, ma penso che potresti dover istanziare un controller dell'app (dopotutto, vuoi che l'url css riscritto rispecchi le impostazioni dell'app, giusto?). Quindi suppongo che potresti dover creare comunque un CSSController.

Answer 4

Un intero gruppo di esperti CakePHP sono probabilmente andando a odiarmi per aver suggerito questo .. :)

La soluzione più semplice per me era per includere solo il file immagine nella cartella css.Qualcosa di simile

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

Così nel file css vorrei solo mettere in:

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

La cosa brutta è, ovviamente, non è la cosa cakiest da fare. La cosa buona è che funzionerà a prescindere se si utilizza l'URL di fantasia o meno dal momento che css trova l'immagine relativa al file css.

Answer 5

Definirei sicuramente la soluzione suggerita da zam3858. E se non ti piace avere le tue immagini in due posizioni distinte, crea un collegamento simbolico nella directory css che punta alle immagini. Come questo:

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

Ora, i percorsi delle immagini saranno risolti in modo corretto per i fogli sia l'helper html e stile:

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

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

Esso non può essere la soluzione cakiest, ma non assomiglia cakephp ne fornisce uno.

Answer 6

Cambiare la linea con background per

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

Answer 7

ho scoperto che gli URL relativi a CSS cadere a pezzi quando l'incorporamento CSS in un aiuto per CakePHP. È dovuto al fatto che il router è in grado di mappare diversi URL alla stessa pagina, quindi l'url relativo deve essere diverso. Ad esempio, se hai un URL come localhost/myapp/parts/index o localhost/myapp/parts/o localhost/myapp/parts, allora un url relativo di ../img/image.gif funzionerà solo per uno di essi.

Nel mio aiuto l'unico modo che ho trovato per ottenere intorno ad esso è stato quello di fare il mio css come questo

.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; 

}

e quindi sostituire il tag con un URL generato nel codice prima uscita 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>"; 

Se c'è un modo più semplice per farlo, gradirei un commento.