1. Главная
  2. Блоги
  3. Блог Toologic

Изменение размеров шрифта в шаблонах Drupal

Главные вкладки

Аватар пользователя Toologic Toologic 20 ноября 2007 в 12:39

Доброго дня всем.

Получил ПМ по поводу реализации на моем сайте переключения размера шрифта в шаблоне, рассказываю, как это реализовано.

1. Создается файл, например font-switcher.php

<?php

$fontstyle = "f-" . $default_font;

$cookie_prefix = "vx-";

//load font style
if (isset($_SESSION[$cookie_prefix. 'fontstyle'])) {
        $fontstyle = $_SESSION[$cookie_prefix. 'fontstyle'];
} elseif (isset($_COOKIE[$cookie_prefix. 'fontstyle'])) {
        $fontstyle = $_COOKIE[$cookie_prefix. 'fontstyle'];
}

$thisurl = $_SERVER['PHP_SELF'] . rebuildQueryString();

function rebuildQueryString() {
  $ignores = array("fontstyle","widthstyle");
  if (!empty($_SERVER['QUERY_STRING'])) {
      $parts = explode("&", $_SERVER['QUERY_STRING']);
      $newParts = array();
      foreach ($parts as $val) {
          $val_parts = explode("=", $val);
          if (!in_array($val_parts[0], $ignores)) {
            array_push($newParts, $val);
          }
      }
      if (count($newParts) != 0) {
          $qs = implode("&amp;", $newParts);
      } else {
          return "?";
      }
      return "?" . $qs . "&amp;"; // this is your new created query string
  } else {
      return "?";
  }
}
?>

2. В шаблоне страницы page.tpl.php прописываем в части HEAD

<?php
$default_font = "default";      // smaller | default | larger

require($directory . "/font-switcher.php");
?>

в части BODY пишем

<body id="page-bg" class="<?php echo $fontstyle; ?>" <?php print $onload_attributes; ?>>
....
<!-- в нужном месте -->
<div id="font-switch-buttons">
  <a href="<?php echo $thisurl; ?>fontstyle=f-larger" title="Increase size" class="large"><span class="button">&nbsp;</span></a>
  <a href="<?php echo $thisurl; ?>fontstyle=f-default" title="Default size" class="default"><span class="button">&nbsp;</span></a>
  <a href="<?php echo $thisurl; ?>fontstyle=f-smaller" title="Decrease size" class="small"><span class="button">&nbsp;</span></a>
</div>
....

и наконец 3-е

в css файле определяем классы для шрифтов

body.f-smaller {
 font-size: 11px;
}

body.f-default {
 font-size: 13px;
}

body.f-larger {
 font-size: 15px;
}

понятно, что все остальные определения размеров шрифтов должны быть относительные.

По аналогии можно также определять ширину шаблона, да и сам шаблон.

Комментарии

Аватар пользователя vadbars@drupal.org vadbars@drupal.org 20 ноября 2007 в 12:57

Спасибо за мастер-класс! Smile
Два предложения: 1) нельзя ли сделать неактивным текущий выбор размера. Если выбран, например, размер "большой", его пункт неактивен. Чтобы у юзера не было возможности повторных бессмысленных нажатий. С т.зр. "юзабилити" это правильнее.
2) сделать эту фичу модулем, а? Smile Модуль предоставляет такой блок с переключателями.

Аватар пользователя toologic1 toologic1 (не проверено) 20 ноября 2007 в 13:13

Думаю, что дальнейшее развитие могут продолжить энтузиасты. Я к сожалению сейчас очень занят, и практически отошел от php. Но готов предоставить полностью весь код.

по поводу неактивной ссылки для текущего шрифта - решение на поверхности...
надо обрамить блок прорисовки этих ссылок логикой

 <?php
    if $defaultfont = "default" then
     <span class="default button">&nbsp;</span>
<?php else ?>
  <a href="<?php echo $thisurl; ?>fontstyle=f-default" title="Default size" class="default"><span class="button">&nbsp;</span></a>
<?php endif ?>

где-то так....

Аватар пользователя toologic1 toologic1 (не проверено) 20 ноября 2007 в 13:17

кстати, Админам сайта...

некоторые странности при работе.
Я зарегистрирован и залогинен.
жму на "ответить" - мне выдается ошибка - де я прикидываюсь другим (зарегистрированным) пользователем.

Также странности при работе каптча при тестировании _омпа_тный и вводе "кк" - говорит ошибка!!!, как впрочем и на другие подобные тесты

Аватар пользователя UrbanRider UrbanRider 21 ноября 2007 в 0:55

спасибо, действительно интересный материал...

А на счет ширины шаблона, и замены шаблона(ну там всего-лишь фоно хеадера меняется), реализовано в теме meta

Тема старая, но технологии очень интересные используются, например png фикс для IE

Хотя чем-то и плохо, что тема перегружена JS

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

(Лично мое мнение-использование JS - залог успеха модуля, т.к. изменения происходят без перезагрузки страницы)

Аватар пользователя oblivion oblivion 22 ноября 2007 в 4:10

>А я нашёл AJAX-модуль: jQuery FontSizer. Не проверял модуль...
я проверил.... модуль действительно изменяет размер шрифта (больше-меньше), только зависит от jquery_cookie

Аватар пользователя run run 28 декабря 2007 в 14:20

Пробовал я этот модуль http://drupal.org/project/textsize, не понравился, покрайне мере в резиновых темах использовать его не стоит. Пока приходиться обходиться тегами , не удобно, но решения пока не нашел.