¿Cómo se manejan las URL dentro del archivo CSS en CakePHP para que hagan referencia a la ubicación correcta?

Question

Estoy diseñando un sitio web usando CSS Files mucho, pero tengo varias apariciones de imágenes de fondo, imágenes para viñetas en listas y probablemente encuentre otra necesidad para la función css url().

Pero, en pastel, todo el URL debe ser manejado por la función Route::url(), de varias formas, siendo las más comunes la $html->url()

Pero mi problema es que el CSS Los archivos no son interpretados por PHP. ¿Cómo puedo crear un archivo CSS que contiene algo como:

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

ver, mi última opción es importar el archivo CSS en línea en la disposición para que pueda ser interpretado. Pero prefiero usar un enfoque más "Cake".

Gracias!

Answer 1

No necesita usar $ html-> url() en su archivo CSS, por lo tanto, no necesita analizar los archivos CSS a través de PHP o crear un CssController.

Si su aplicación de tortas está instalada en sus hosts virtuales DocumentRoot, simplemente haga que todas las rutas a las imágenes sean absolutas desde la raíz web. p.ej.

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

Esto se aplicará la imagen en app/Webroot/img/coolbg.jpg a su

Si su aplicación torta no está instalado en los hosts virtuales DocumentRoot, es decir, permite acceder a su aplicación torta través de una URL como http://www.domain.com/myapp/, luego haces la ruta a la imagen relativa al archivo css. Consulte las reglas de estilo en la aplicación/webroot/css/cake.generic.css, p.

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

Esto funciona porque las hojas de estilo viven en el/css/directorio app/Webroot, y la imagen viven en el/img/directorio app/Webroot, por lo que el ../img/cake.icon.gif camino" "sale del directorio css, luego regresa al directorio img.

Answer 2

Puede agregar CSS para procesar a través de PHP editando su archivo .htaccess en Apache. Procesarlo, en lugar de simplemente escupirlo, tiene un leve golpe de rendimiento.

AddType application/x-httpd-php .css 

Asimismo, consulte: http://www.webmasterworld.com/forum88/5648.htm

Answer 3

esto no ayudará demasiado con las cosas de la torta a menos que primero ejemplariza los objetos pastel. Si desea utilizar el helper html, probablemente desee averiguar cómo se crea una instancia del primer objeto Cake, y luego imitarlo en sus elementos de CSS. No estoy seguro exactamente de cómo haría esto, creo que tener un CSSController completo sería exagerado, pero creo que es posible que tengas que instanciar un controlador de aplicación (después de todo, quieres que la url css reescrita refleje la configuración de tu aplicación, ¿verdad?) Así que supongo que debes crear un CSSController de todos modos.

Answer 4

Un montón de expertos cakephp son probablemente va a odiarme por lo que sugiere este .. :)

La solución más fácil para mí era sólo incluye el archivo de imagen en la carpeta css.Algo como esto

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

Así que en el archivo css me acaba de poner en:

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

Lo malo es, obviamente, no es la cosa cakiest hacer. Lo bueno es que funcionará independientemente de si está utilizando url de fantasía o no, ya que css encuentra la imagen relativa al archivo css.

Answer 5

Definitivamente iré por la solución sugerida por zam3858. Y si no desea tener sus imágenes en dos ubicaciones distintas, cree un enlace simbólico en el directorio css que apunta a las imágenes. De esta manera:

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

Ahora, las rutas de las imágenes será resuelto correctamente, tanto para el asistente de HTML y hojas de estilo:

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

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

puede que no sea la solución cakiest, pero no se ve como cakephp proporciona uno.

Answer 6

Cambiar la línea con background a

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

Answer 7

me encontré con que los URL relativos en CSS se desmoronan al incrustar CSS en un ayudante para CakePHP. Se debe a que el enrutador puede asignar diferentes URL a la misma página, por lo que la URL relativa debe ser diferente. Por ejemplo, si tiene una url como localhost/myapp/parts/index o localhost/myapp/parts/o localhost/myapp/parts, una url relativa de ../img/image.gif solo funcionará para una de ellas.

En mi ayudante de la única manera que encontré para conseguir alrededor de él era hacer mi css como esto

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

}

y luego vuelva a colocar la etiqueta con una dirección URL generada en el código antes de la salida del 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>"; 

Si hay una forma más sencilla de hacerlo, agradecería un comentario.