Como são URLs tratado dentro do arquivo CSS no CakePHP para que eles referenciar o local correto?

Question

Eu estou projetando um site usando CSS Arquivos muito, mas eu tenho várias ocorrências de imagens de fundo, imagens de balas em listas e eu provavelmente vai encontrar uma outra necessidade para a função css url().

Mas, no bolo, todos os URL deve ser tratado pela função Route::url(), de várias maneiras, sendo a mais comum a $html->url()

Mas o meu problema é que os arquivos CSS não são interpretados pelo PHP. Como posso criar um arquivo CSS contendo algo como:

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

Veja, a minha última opção é importar a linha de arquivo css no layout para que possa ser interpretado. Mas eu altamente preferem usar uma abordagem mais "bolo".

Obrigado!

Answer 1

Você não precisa usar $ html-> url () no seu arquivo css, consequentemente, você não precisa analisar os arquivos CSS através do PHP ou criar um CssController.

Se seu aplicativo bolo está instalado em seus hosts virtuais DocumentRoot, basta fazer todos os caminhos para imagens absolutos do webroot. por exemplo.

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

Isto irá aplicar a imagem em app / webroot / img / coolbg.jpg à sua

Se seu aplicativo bolo não é instalado nos hosts virtuais DocumentRoot, ou seja, você acessar seu aplicativo bolo através de uma URL como http://www.domain.com/myapp/ , então você fazer o caminho para a imagem relativo para o arquivo css. Confira as regras de estilo em app / webroot / css / cake.generic.css por exemplo.

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

Isso funciona porque as folhas de estilo vivem no app / webroot / css / diretório e imagem ao vivo no app / webroot / img / diretório, então o caminho "../img/cake.icon.gif" sobe do diretório css, em seguida, de volta para baixo para o diretório img.

Answer 2

Eu definitivamente voltaria para a solução sugerida por zam3858. E se você não gosta de ter suas imagens em dois locais distintos, crie um link simbólico no diretório css que aponta para as imagens. Como esta:

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

Agora, os caminhos de imagem serão resolvidos corretamente tanto para o html helper e folhas de estilo:

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

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

Pode não ser a solução cakiest, mas não se parece com CakePHP fornece um.

Answer 3

Alterar a linha com background para

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

Answer 4

Você pode adicionar CSS para ser processado através do PHP editando seu arquivo .htaccess no Apache. Processá-lo, ao invés de apenas cuspi-la tem uma pequena queda de performance.

AddType application/x-httpd-php .css

Além disso, veja: http://www.webmasterworld.com/forum88/5648.htm

Answer 5

Isso não vai ajudar muito com as coisas do bolo, a menos que você primeiro instanciar os objetos do bolo. Se você quiser usar o helper html, você provavelmente vai querer descobrir como o primeiro objeto do bolo é instanciado, em seguida, mímico que em seu material CSS. Não tenho certeza exatamente como eu faria isso - Eu acho que ter um CSSController inteira seria um exagero, mas eu acho que você pode ter que instanciar um controlador de aplicativo (afinal, você quer o url css reescrito para refletir você configurações do aplicativo, certo? ). Então eu acho que você pode ter que criar uma CSSController de qualquer maneira.

Answer 6

Um monte de especialistas CakePHP são provavelmente vai me odiar por sugerir esta ..:)

A solução mais fácil para mim era apenas incluir o arquivo de imagem na pasta css. Algo como isto

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

Assim, no arquivo css Gostaria apenas de colocar em:

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

A única coisa ruim é, obviamente, não é a coisa cakiest fazer. A coisa boa é que ele vai trabalhar, independentemente se você estiver usando url fantasia ou não desde css encontra a imagem relativo para o arquivo css.

Answer 7

Descobri que urls relativas em CSS desmoronar ao incorporar CSS em um auxiliar para CakePHP. É devido ao roteador ser capaz de mapear diferentes URLs para a mesma página para que, em seguida, as necessidades URL em relação a ser diferente. Por exemplo, se você tem uma url como localhost / myapp / peças / index ou localhost / myapp / peças / ou localhost / myapp / peças, em seguida, uma url relativa de ../img/image.gif irá funcionar apenas para um deles.

Na minha ajudante a única maneira que encontrei para contornar o problema era fazer com que o meu css como este

.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, em seguida, substituir o tag com um url gerado no código antes da saída do 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 houver uma maneira mais fácil de fazer isso eu gostaria de receber um comentário.