¿Cómo se manejan las direcciones URL en el archivo CSS en CakePHP por lo que hacen referencia a la ubicación correcta?

StackOverflow https://stackoverflow.com/questions/512556

Pregunta

Estoy diseñando un sitio web utilizando archivos CSS mucho, pero tengo varias apariciones de imágenes de fondo, imágenes de balas en las listas y probablemente voy a encontrar otra necesidad de que el css url() función.

Sin embargo, en pastel, todo el URL debe ser manejado por la función Route::url(), de varias maneras, siendo la más común $html->url()

Pero mi problema es que los archivos CSS 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") ?>');
}

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

Gracias!

¿Fue útil?

Solución

No es necesario utilizar $ html-> url () en el archivo CSS, por consiguiente, no es necesario para analizar los archivos CSS a través de PHP o crear una CssController.

Si su aplicación torta está instalado en su DocumentRoot anfitriones virtual, simplemente haz todas las rutas de acceso a las imágenes absolutos de la web raíz. por ejemplo. 

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 el DocumentRoot hosts virtuales, es decir, se accede a la aplicación de la torta a través de una URL como http://www.domain.com/myapp/ , a continuación, tomar la ruta de la imagen en relación con el archivo css. Echa un vistazo a las reglas de estilo en app / Webroot / css / cake.generic.css por ejemplo. 

#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 camino "../img/cake.icon.gif" surge a cabo del directorio css, y luego hacia abajo en el directorio img.

Otros consejos

Sin duda volvería para la solución sugerida por zam3858. Y si no les gusta tener sus imágenes en dos lugares distintos, crear 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 se resolverán correctamente para las hojas tanto el asistente de HTML y de estilo: 

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

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

Puede que no sea la solución cakiest, pero no parece que cakephp proporciona uno.

Cambiar la línea con background a 

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

Puede añadir CSS para ser procesada a través de PHP mediante la edición de su archivo .htaccess en Apache. Procesarla, en lugar de sólo escupirla tiene un pequeño impacto de rendimiento. 

AddType application/x-httpd-php .css

Además, vea: http://www.webmasterworld.com/forum88/5648.htm

Esto no ayudará demasiado con las cosas de la torta a menos que primero ejemplariza los objetos pastel. Si desea utilizar el asistente de HTML, es probable que desee averiguar cómo se instancia el primer objeto de la torta, y luego imita la de su materia en CSS. No estoy seguro exactamente cómo me gustaría hacer esto - Creo que tener un CSSController entera sería una exageración, pero creo que puede que tenga que crear una instancia de un controlador de aplicación (después de todo, desea que la URL css reescrito para reflejar la configuración de aplicaciones que, ¿verdad? ). Así que supongo que puede que tenga que crear una CSSController de todos modos.

Un montón de expertos cakephp está probablemente va a odiarme por sugerir este ..:)

La solución más fácil para mí era basta con incluir 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 va a trabajar sin tener en cuenta si está utilizando url de lujo o no desde que css encuentra la imagen relativa al archivo CSS.

He encontrado que las direcciones URL relativas en caída CSS aparte al incrustar CSS en un ayudante para CakePHP. Es debido a que el router es capaz de asignar diferentes direcciones URL de la misma página por lo que entonces la dirección URL relativa tiene que ser diferente. Por ejemplo, si tiene una URL como localhost / miaplicacion / piezas / índice o localhost / miaplicacion / piezas / o localhost / miaplicacion / partes y luego una URL relativa de ../img/image.gif sólo funcionará para uno de ellos.

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 manera más fácil de hacer esto le agradecería un comentario.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top