Wie werden die URLs in der CSS-Datei in CakePHP behandelt, damit sie die richtige Stelle verweisen?

Question

Ich bin der Gestaltung einer Website mit CSS viele Dateien, aber ich habe mehrere Vorkommen von Hintergrundbildern, Bilder für Aufzählungszeichen in Listen und ich werde wahrscheinlich eine weitere Notwendigkeit für die CSS url() Funktion finden.

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

Aber mein Problem ist, dass CSS-Dateien nicht von PHP interpretiert werden. Wie kann ich eine CSS-Datei erstellen enthält so etwas wie:

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

Siehe, meine letzte Option ist die CSS-Datei inline auf dem Layout zu importieren, so interpretiert werden kann. Aber ich ziehe sehr einen „Cake“ Ansatz zu verwenden.

Danke!

Answer 1

Sie brauchen nicht $ html-> url () in der CSS-Datei zu verwenden, damit Sie nicht über die CSS-Dateien durch PHP analysieren müssen oder eine CssController erstellen.

Wenn Sie Ihr Kuchen App in Ihrer virtuellen Hosts DocumentRoot installiert ist, stellt nur alle Pfade zu Bildern absolut von Webroot. z.

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

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

anwenden

Wenn Ihr Kuchen App nicht in dem virtuellen Hosts DocumentRoot installiert ist, dh Sie Zugriff auf Ihre Kuchen App über eine URL wie http://www.domain.com/myapp/ , dann stellen Sie den Pfad zu dem Bild in Bezug auf die CSS-Datei. Schauen Sie sich die Stilregeln in app / webroot / css / cake.generic.css z.

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

Das funktioniert, weil Stylesheets in dem app / webroot / css / Verzeichnis befindet, und Bild lebt in dem app / webroot / img / Verzeichnis, so dass der Pfad "../img/cake.icon.gif" nach oben herauskommt das CSS-Verzeichnisses, dann wieder nach unten in das img-Verzeichnis.

Answer 2

Ich würde auf jeden Fall für die Lösung von zam3858 vorgeschlagen gehen. Und wenn Sie nicht Ihre Bilder in zwei verschiedenen Orten gefällt haben, erstellen Sie einen symbolischen Link in dem CSS-Verzeichnis, das auf die Bilder zeigt. Wie folgt aus:

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

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

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

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

Es kann nicht die cakiest Lösung sein, aber es sieht nicht so aus cakephp man sieht.

Answer 3

Ändern Sie die Zeile mit background zu

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

Answer 4

Sie können hinzufügen, CSS und bearbeite Ihre .htaccess-Datei in Apache über PHP verarbeitet werden. im Gegensatz wird bearbeitet es, zu spucken es nur Hit eine leichte Performance hat aus.

AddType application/x-httpd-php .css

Auch finden Sie hier: http://www.webmasterworld.com/forum88/5648.htm

Answer 5

Dies wird nicht zu viel helfen, mit dem Kuchen Sachen, wenn Sie zuerst die Kuchen Objekte instanziiert. Wenn Sie den HTML-Helfer verwenden möchten, werden Sie wahrscheinlich wollen, um herauszufinden, wie der erste Kuchen Objekt instanziiert wird, imitieren dann, dass in Ihrem CSS Zeug. Nicht sicher, wie ich dies tun würde - ich glaube, die ein ganzer CSSController treibt sein würde, aber ich glaube, Sie könnten, um eine App Controller instanziiert (immerhin Sie die neu geschrieben CSS url wollen Sie App-Einstellungen zu reflektieren, nicht wahr? ). Also ich denke, man kann sowieso eine CSSController erstellen hat.

Answer 6

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

Die einfachste Lösung war für mich nur die Bilddatei in den CSS-Ordnern enthalten. So etwas wie diese

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

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

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 unabhängig arbeiten, wenn Sie Lust URL oder nicht verwenden, da CSS das Bild in Bezug auf die CSS-Datei findet.

Answer 7

Ich fand, dass relative URLs in CSS auseinander fallen, wenn für CakePHP CSS in einem Helfer einbetten. Es ist aufgrund der Router verschiedene URLs auf die gleiche Seite abzubilden in der Lage, so dann die relative URL anders sein muss. Wenn Sie zum Beispiel eine URL wie localhost / myapp / Teile / Index oder localhost / myapp / Teile / oder localhost / myapp / Teile dann eine relative URL von ../img/image.gif nur für einen von ihnen arbeiten.

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

zu machen

.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 dann den Tag mit einem generierten URL im Code vor der Ausgabe der 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 einen einfacheren Weg, dies zu tun Ich habe einen Kommentar schätzen würde.