Wie werden URLs innerhalb der CSS-Datei in CakePHP behandelt, so dass sie auf den richtigen Speicherort verweisen?

Question

Ich entwerfe eine Website mit CSS-Dateien viel, aber ich habe mehrere Vorkommen von Hintergrundbildern, Bildern für Aufzählungszeichen in Listen und ich werde wahrscheinlich eine andere Notwendigkeit für die CSS-Funktion url() finden.

Aber in Kuchen, alle URL soll von der Route::url() Funktion, auf verschiedene Weise behandelt werden, das wurde am häufigsten $html->url()

Aber mein Problem ist, dass CSS-Dateien nicht von PHP interpretiert werden. Wie ich eine CSS-Datei mit etwas schaffen kann wie:

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

See, meine letzte Option ist die CSS-Datei inline auf dem Layout zu importieren, so interpretiert werden kann. Ich bevorzuge jedoch einen eher "Kuchen" -Ansatz.

Danke!

Answer 1

Sie müssen $ html-> url() nicht in Ihrer CSS-Datei verwenden, folglich müssen Sie die CSS-Dateien nicht über PHP analysieren oder einen CssController erstellen.

Wenn Ihre Kuchen-App im DocumentRoot Ihres virtuellen Hosts installiert ist, müssen Sie alle Pfade zu den Bildern aus dem Webroot absolut machen. z.B.

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

Dadurch wird das Bild bei app/webroot/img/coolbg.jpg zu Ihrem

Wenn Ihr Kuchen App in den virtuellen Hosts nicht installiert ist DocumentRoot, dh Sie Zugriff auf Ihre Kuchen App über eine URL beantragen wie http://www.domain.com/myapp/, dann machen Sie den Pfad zum Bild relativ zur CSS-Datei. Sehen Sie sich die Stilregeln in app/webroot/css/cake.generic.css an, z. Diese

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

funktioniert, weil Stylesheets lebt in dem app/webroot/css/Verzeichnis und Bild lebt in dem app/webroot/img/Verzeichnis, so dass der Pfad“../img/cake.icon.gif "kommt aus dem css-Verzeichnis und dann wieder runter in das img-Verzeichnis.

Answer 2

Sie können CSS hinzufügen, um über PHP verarbeitet zu werden, indem Sie Ihre .htaccess-Datei in Apache bearbeiten. Es zu verarbeiten, anstatt es nur auszuspucken, hat einen leichten Leistungseinbruch.

AddType application/x-httpd-php .css 

Auch sehen: http://www.webmasterworld.com/forum88/5648.htm

Answer 3

Das mit dem Kuchen Sachen nicht zu viel helfen wird, es sei denn, Sie zuerst die Objekte Kuchen instanziiert. Wenn Sie den HTML-Helper verwenden möchten, werden Sie wahrscheinlich herausfinden wollen, wie das erste Cake-Objekt instanziiert wird, und dann das in Ihrem CSS-Zeug nachahmen. Ich bin mir nicht ganz sicher, wie ich das machen würde - ich denke, dass ein CSSController zu viel ist, aber ich denke, dass Sie einen App-Controller instanziieren müssen (schließlich möchten Sie, dass die neu geschriebene css-URL die App-Einstellungen widerspiegelt)?). Ich denke, du musst vielleicht trotzdem einen CSSController erstellen.

Answer 4

Eine ganze Reihe von CakePHP Experten sind wahrscheinlich mich diese hassen, was darauf hindeutet, .. :)

Die einfachste Lösung für mich nur das Bild war auf Datei in der CSS-Ordner enthalten.So etwas wie diese

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

So in der CSS-Datei würde ich nur in setzen:

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

Das Schlimme ist, offensichtlich ist es nicht die cakiest Sache zu tun. Die gute Sache ist, dass es funktioniert, egal ob Sie fancy URL verwenden oder nicht, da css das Bild relativ zur CSS-Datei findet.

Answer 5

Ich würde auf jeden Fall für die von zam3858 vorgeschlagene Lösung gehen. Und wenn Sie Ihre Bilder nicht an zwei verschiedenen Orten haben möchten, erstellen Sie einen symbolischen Link im Verzeichnis css, das auf die Bilder verweist. Wie folgt aus:

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

Nun werden die Bildpfade korrekt sowohl für die HTML-Helfer und Stylesheets aufgelöst werden:

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

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

Es ist nicht die cakiest Lösung sein kann, aber es sieht nicht so aus CakePHP bietet einen.

Answer 6

Ändern Sie die Zeile mit background zu

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

Answer 7

Ich fand, dass relative URLs in CSS auseinander fallen, wenn CSS in einem Helfer für CakePHP einzubetten. Da der Router verschiedene URLs auf derselben Seite abbilden kann, muss die relative URL unterschiedlich sein. Wenn Sie beispielsweise eine URL wie localhost/myapp/parts/index oder localhost/myapp/parts/oder localhost/myapp/parts haben, funktioniert eine relative URL von ../img/image.gif nur für einen von ihnen.

In meinem Helfer die einzige Art, wie ich um es bekommen zu finden war meine css wie diese

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

}

und Ersetzen Sie den Tag mit einem generierten URL im Code vor der Ausgabe zu machen die 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>"; 

Wenn es eine einfachere Möglichkeit gibt, dies zu tun, würde ich mich über einen Kommentar freuen.