Come sono gli Url trattati all'interno del file CSS in CakePHP in modo che il riferimento alla posizione corretta?

Question

Sto progettando un sito web con i CSS File molto, ma ho diverse occorrenze di immagini di sfondo, immagini di proiettili in elenchi e io probabilmente trovare un altro necessario per il css url() funzione.

Ma, a torta, URL, che deve essere gestita dal Route::url() funzione, in diversi modi, essendo più comune il $html->url()

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

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

Vedi, la mia ultima opzione è quella di importare il file css inline sul layout in modo che si può essere interpretato.Ma io altamente preferire l'uso di un più "Torta di" approccio".

Grazie!

Answer 1

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

Se la vostra applicazione torta è installato nel vostro host virtuale DocumentRoot, solo fare tutti i percorsi alle immagini assoluti dalla webroot. per es.

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

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

Se la vostra applicazione torta non è installato nel virtual host DocumentRoot, cioè di accedere alla app torta tramite un URL del tipo http://www.domain.com/myapp/ , poi si effettua il percorso dell'immagine relativo al file css. Controlla le regole di stile in app / webroot / css / cake.generic.css 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 fuori della directory css, poi di nuovo giù nella directory img.

Answer 2

Ci tornerò sicuramente per la soluzione suggerita da zam3858. E se non piace avere le immagini in due sedi distinte, creare un collegamento simbolico nella directory css che punta alle immagini. In questo modo:

$ 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');

Non può essere la soluzione cakiest, ma non apparire come CakePHP fornisce uno.

Answer 3

Modificare la riga con background a

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

Answer 4

È possibile aggiungere CSS da elaborare tramite PHP modificando il file .htaccess in Apache. Elaborazione di esso, in contrasto con appena sputare fuori non avere un leggero calo di prestazioni.

AddType application/x-httpd-php .css

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

Answer 5

Questo non aiuterà troppo con la roba torta a meno che non si crea un'istanza prima gli oggetti Cake. Se si desidera utilizzare l'helper HTML, probabilmente si vorrà capire come il primo oggetto torta viene creata un'istanza, quindi imitare quello nella vostra roba CSS. Non so esattamente come avrei fatto questo - Penso che avere un intero CSSController sarebbe un errore, ma penso che si potrebbe avere per creare un'istanza di un controller app (dopo tutto, si desidera che il css URL riscritto in modo da riflettere le impostazioni vi app, giusto? ). Quindi credo che potrebbe essere necessario creare un CSSController in ogni modo.

Answer 6

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

La soluzione più semplice per me è stato quello di includere solo il file immagine nella cartella css. Qualcosa di simile a questo

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

Quindi, 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 non in quanto css trova l'immagine relativo al file css.

Answer 7

Ho trovato che gli url relativi a CSS cadere a pezzi quando l'incorporamento CSS in un helper per CakePHP.Ciò è dovuto al router di essere in grado di mappare url diversi per la stessa pagina, in modo quindi l'url relativo deve essere diversa.Per esempio, se si dispone di un url come localhost/myapp/parti/index o localhost/myapp/parti/ o localhost/myapp/parti quindi un url relativo di ../img/image.gif funziona solo per uno di loro.

In mio aiuto l'unico modo che ho trovato per aggirare era per 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 il codice prima uscita il 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 fare questo gradirei un commento.