Как обрабатываются URL-адреса внутри CSS-файла в CakePHP, чтобы они указывали на правильное местоположение? - PullRequest
Новая
       19

Как обрабатываются URL-адреса внутри CSS-файла в CakePHP, чтобы они указывали на правильное местоположение?

9 голосов
/ 04 февраля 2009

Я проектирую веб-сайт с использованием CSS-файлов, но у меня есть несколько фоновых изображений, изображений для маркеров в списках, и я, вероятно, найду еще одну необходимость для функции css url().

Но, как и следовало ожидать, все URL-адреса должны обрабатываться функцией Route::url() несколькими способами, наиболее распространенными из которых являются $html->url()

.

Но моя проблема в том, что CSS-файлы не интерпретируются PHP. Как я могу создать файл CSS, содержащий что-то вроде: 

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

Смотрите, мой последний вариант - импортировать файл css, встроенный в макет, чтобы его можно было интерпретировать. Но я очень предпочитаю использовать более «торт» подход.

Спасибо!

Ответы [ 7 ]

26 голосов
/ 04 февраля 2009

Вам не нужно использовать $ html-> url () в вашем CSS-файле, следовательно, вам не нужно анализировать CSS-файлы через PHP или создавать CssController.

Если ваше приложение для торта установлено на ваших виртуальных хостах DocumentRoot, просто сделайте все пути к изображениям абсолютными из webroot. например, 

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

Это позволит применить изображение из app / webroot / img / coolbg.jpg к вашему

Если ваше приложение для торта не установлено на виртуальных хостах DocumentRoot, т. Е. Вы получаете доступ к своему приложению для торта по URL-адресу, например http://www.domain.com/myapp/,, тогда вы указываете путь к изображению относительно файла CSS. Ознакомьтесь с правилами стиля в app / webroot / css / cake.generic.css, например, 

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

Это работает, потому что таблицы стилей находятся в каталоге app / webroot / css /, а изображение - в каталоге app / webroot / img /, поэтому появляется путь "../img/cake.icon.gif" каталога css, затем вернитесь в каталог img.

1 голос
/ 13 ноября 2010

Измените строку с background на 

background:url(../img/menu_027_l.jpg) no-repeat left;
1 голос
/ 05 ноября 2009

Я бы определенно пошел на решение, предложенное zam3858. И если вы не хотите, чтобы ваши изображения находились в двух разных местах, создайте символическую ссылку в каталоге css, которая указывает на изображения. Как это: 

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

Теперь пути к изображениям будут правильно разрешены как для html-помощника, так и для таблиц стилей: 

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

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

Возможно, это не самое простое решение, но похоже, что cakephp его не предоставит.

0 голосов
/ 26 октября 2012

Я обнаружил, что относительные URL в CSS распадаются при внедрении CSS в помощник для CakePHP. Это связано с тем, что маршрутизатор может отображать разные URL-адреса на одной странице, поэтому относительный URL-адрес должен быть другим. Например, если у вас есть URL-адрес типа localhost / myapp / parts / index или localhost / myapp / parts / или localhost / myapp / parts, то относительный URL-адрес ../img/image.gif будет работать только для одного из них.

В моем помощнике я нашел способ обойти это так: 1003 * 

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

}

и затем замените тег на сгенерированный URL в коде перед выводом 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>";

Если есть более простой способ сделать это, я был бы признателен за комментарий.

0 голосов
/ 11 февраля 2009

Целая куча экспертов CakePHP, вероятно, возненавидят меня за то, что я предложил этот ..:)

Самым простым решением для меня было просто включить файл изображения в папку css. Как то так 

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

Так что в файле CSS я бы просто вставил: 

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

Плохая вещь, очевидно, это не самая легкая вещь, которую можно сделать. Хорошо, что он будет работать независимо от того, используете ли вы причудливый URL-адрес или нет, поскольку css находит изображение относительно файла css.

0 голосов
/ 04 февраля 2009

Это не очень поможет с вещами Cake, если вы сначала не создадите экземпляры объектов Cake. Если вы хотите использовать помощник html, вы, вероятно, захотите выяснить, как создается первый объект Cake, а затем имитировать это в своем CSS-материале. Не уверен, как именно я это сделаю - я думаю, что иметь целый CSSController было бы излишним, но я думаю, что вам, возможно, придется создавать экземпляр контроллера приложения (в конце концов, вы хотите, чтобы переписанный URL CSS отражал настройки вашего приложения, верно? ). Так что я думаю, что вам, возможно, придется создать CSSController в любом случае.

0 голосов
/ 04 февраля 2009

Вы можете добавить CSS для обработки через PHP, отредактировав свой файл .htaccess в Apache. Обработка, а не просто выплевывание, имеет небольшой удар по производительности. 

AddType application/x-httpd-php .css

Также см .: http://www.webmasterworld.com/forum88/5648.htm

...