Plessea01

Издеваемся над стилями и допполями в К2

По умолчанию в компоненте K2 используется вывод всех доп. полей в одном месте, что очень некрасиво и не всегда удобно. К примеру, в списке материалов категории нужно вывести лишь часть доп. полей в intro-тексте, а уже в просмотре полного материала - все поля. Такой вот банальный пример.

Для начала - если Вы используете компонент K2 и его отдельные шаблоны, то нужно скопировать всё содержимое шаблона K2 в Ваш шаблон Joomla. Таким образом, при обновлении K2 (особенно это касается J2.5 и выше) Вы не потеряете свои изменения, которые Вы произвели в файлах шаблона K2.

Хочу сразу оговориться, что автор этой полезной исходной статьи - владелец некоего портала, ссылки на который забанены на Joomla-форуме (не спрашивайте, почему). А т.к. данный материал имеет достаточную ценность и востребованность, а работоспособность данного метода проверена мною лично, мне пришлось полностью переработать данную статью (да простит меня афтар), добавив много вкусностей и полезностей.  Итак, поехали.

Создаём копию шаблона К2

Открываем папку: /components/com_k2/templates/ и копируем ее содержимое в папку с вашим шаблоном (предварительно создав папки com_k2/templates/): /templates/имя_вашего_Joomlaшаблона/html/com_k2/templates/

Если Вы будете использовать разделение доп.полей не везде, то весьма полезным будет создание отдельного шаблона для этих целей. К примеру, часть статей мы будем выводить так, как они и выводятся в К2 по умолчанию (пусть шаблон так и называется default), а наш модернизированный шаблон банально обзовём new. Чтобы было более понятно - смотрим дерево на картинке (будьте внимательны - по поводу имени файла CSS-стиля в данной папке мы пожуём ниже).

k2-extrafields-01

Содержимое папки default полностью копируем в папку new. Именно в папке new мы и буедм производить все дальнейшие манипуляции.


Разделяем стили для шаблонов

Автором исходной статьи не был предусмотрене данный трюк, поэтому, подытожив эту тему на Joomla-форуме, мы восполним этот пробел - назначим индивидуальные css-файлы для наших К2-шаблонов.

Так как К2 по умолчанию "тянет" стили из "родной" папки компонента (/components/com_k2/css/k2.css), решим проблему установкой Плагина K2 Plugin - One CSS per K2 template (для Joomla 1.5) или CSS4K2 (для Joomla 2.5). Плагин публикуется на офсайте К2 и при этом является фришным. Для ленивых - можно скачать прямо здесь ;)

Файлы:
onecssperk2template Версия:1.2.7
Лицензия GNU/GPL Дата 06-07-2013 Язык  English Система  Joomla 1.5 Размер файла 4.52 KB Закачек 50
CSS4K2 Версия:1.8.1
Лицензия GNU/GPL Дата 06-07-2013 Язык  English Система  Joomla 2.5 Размер файла 6.89 KB Закачек 233

Автор данных плагинов прекратил дальнейшую разработку, поэтому не пинайте меня вопросами типа "Когда будет для "тройки?" - не будет! Если кто-то другой напишет - я обязательно выложу (а ты зарегился для получения новостей?)

Между тем, необходимость и востребованность в кастомизации К2 под "тройку" ежедневно растёт в геометрической прогрессии. Поэтому пришлось немного порыться в грёбаной Сети, дабы нарыть хоть какую-то инфу по данному вопросу. Не радуйтесь, решения "в коробочке" не будет!

Итак, вот что пишет автор брошенного проекта:

Так как я остановил поддержку CSS4K2 плагина, я регулярно получаю вопросы, как мы можем предоставить пользовательские CSS шаблона для k2, который используется в качестве шаблона. В этом руководстве я поделюсь техникой, которую я использую.


Прежде чем мы начнем, то предполагается, что у вас уже есть представление о Joomla MVC и создание переопределения  компонентов.

Как настроить свежую Joomla + К2 с шаблонами Joomla, которые не имеют переопределений K2? Теперь у меня есть маленький пакет файлов и папок, которые я просто бросаю в любой шаблон Joomla, который я модифицирую. Это по сути переопределение com_k2, которое расположено в папке HTML шаблона Joomla - процесс быстрый, когда вы делаете это так часто, как я делаю, это просто экономит время.

На кой это?
Этот пакет предназначен для разработчиков, использующих K2 компонент от Joomlawork, которые хотят создать переопределение пользовательского компонента или новый шаблон K2 с собственным стилем.

Как это юзать?
Скачиваем архивчик внизу статьи (появится после регистрации или авторизации), затем заливаем его содержимое в папку:
www.вашсайт/templates/вашшаблон/html

Тут я вклиниваюсь в полных непонятках: для того, чтобы сделать переопределение шаблона K2, необходимо в папке html создать подпапку с соответствующим названием, то есть com_k2. Либо я таки да - чего-то не понял??? То есть, путь должен выглядеть так:
www.вашсайт/templates/вашшаблон/html/com_k2

В общем, предоставляю инфу к размышлению всем, кому это нужно. В ваших руках - тестирование и сбор полезностей для этой статьи: свои мнения и размышления оставляем в комментариях, полезная информация будет включена в статью. А сейчас продолжим описание автора замечательного плагина, позволявшего разбивать стили для K2...

Предоставляя базовое переопределение для item.php, мы делаем рестайлинг названия и удаляем стиль font-family по умолчанию, созданный K2, а вместо этого наследуем его из шаблона. В этом случае, вы должны увидеть изменение название стиля.

Как это расширить?
Вы можете щелкнуть правой кнопкой в вашем браузере на любой части, которую вы хотите изменить, это будет объявленный класс CSS или ID и используемые настройки, разделить новую структуру CSS в типографику, цвет и расположение, а затем просто скопировать нужный селектор CSS и вставить в соответствующий файл CSS коррекции. Внесите изменения и сохраните.

Теперь у вас есть настройки по умолчанию, вы можете скопировать вложенную папку по умолчанию, а затем переименовать, чтобы создать новый шаблон. Просто убедитесь, что ваш новый второй шаблон присваивается категории К2.

Настройка стилей
В item.php мы предоставляем ссылку на импорт, чтобы загрузить файл CSS - k2.css. Вы можете скопировать все CSS из файла стилей компонента K2 - k2.css и поместить его здесь. Я предпочитаю переопределять только то, что требуется. В k2.css мы предоставляем ссылки на 3 дополнительных CSS просто разбитых на типографику, расположение и цвета, вы не должны использовать их, если вы не хотите, я разделил их, по просьбе продвинутых клиентов.

Теперь включим и настроим плагин:

k2-extrafields-01-1

После установки, публикации и настройки плагина необходимо переименовать файлы стилей для выбранных шаблонов (см. первую картинку). Изначально скопируйте файл стиля К2 (components/com_k2/css/k2.css) во все папки с Вашими К2-шаблонами. Имя файлов должно быть таким:

имя_К2_шаблона_style.css

то есть заканчиваться оно всегда должно  _style.css

k2-extrafields-02В нашем примере это будут имена:

  • для шаблона default - default_style.css
  • для шаблона new - new_style.css

Осталось лишь выбрать категорию К2, в которой мы будем выводить "нестандартный" шаблон: заходим в настройки нужной категории К2 и выбираем шаблон new. Обратите внимание - К2 подхватывает шаблоны без всяких вопросов - в списке шаблонов появятся имена папок. В нашем случае это default и new. И ещё - количество создаваемых шаблонов ничем не ограничено! В данной статье для простоты рассмотрим только два, но поиздеваемся именно над шаблоном new.

Теперь в категории, для которой мы назначили шаблон new, можно проводить любые изменения как в выводе, так и в стилях, причём все действия будут затрагивать исключительно материалы в этой категории, прочие же останутся без изменений.

ВНИМАНИЕ! Не забудьте после указанных выше манипуляций в папку /templates/ваш_шаблон/html/com_k2/templates/ скопировать папку images (со всеми файлами и подпапками) из \components\com_k2 !

Готовимся издеваться над допполями

Здесь подразумевается, что с К2 вы уже работали, а значит, создали группу дополнительных полей, а в ней - хотя бы два самих поля. Затем нужно присвоить эту группу допполей нашей категории, которой мы назначили шаблон new. Создаём тестовый материал, открываем его и делаем запись в дополнительных полях (в нашем примере это банальные «Демо» и «Скачать»):

k2-extrafields-03

Теперь разберёмся c содержимым папки нашего К2-шаблона.

  category.php   файл, отвечающий за вывод списка категорий
  category_item.php   файл, отвечающий за вывод материалов при открытии непосредственно категории в режиме блога
  item.php   файл, отвечающий за вывод материала в развёрнутом (полном) виде
  item_comments_form.php   файл вывода формы комментариев после материала
  itemform.php   файл вывода формы добавления материала
  latest.php   файл вывода списка последних материалов
  latest_item.php   файл вывода материала в списке последних материалов
  new_style.css   файл стилей данного шаблона (в нашем примере имя шаблона - new)
  tag.php   файл вывода списка материалов по тэгу
  user.php   файл вывода страницы автора

Для примера будем ковырять файл, отвечающий за вывод материалов в режиме блога - а именно category_item.php. Сделаем так, чтобы при просмотре списка материалов пользователь видел только Демо, а уже при просмотре развёрнутого материала появлялось бы ещё и поле Скачать.

Хочу обратить Ваше внимание, что за просмотр развёрнутого материала отвечает уже другой файл, а именно - item.php, и в нашем примере для достижения желаемого результата нужно будет подправить только первый файл,  category_item.php.


 

Разделяем допполя

Открываем файл /templates/название_шаблона/html/com_k2/templates/new/category_item.php и после строки:

defined('_JEXEC') or die('Restricted access');

(это практически в самом начале файла) вставляем следующий код:

// дополнительные поля материала K2
$extrafields = array();
foreach($this->item->extra_fields as $item)
{ 
$extrafields[$item->id] = $item->value;
}

После этого нам необходимо удалить существующий вывод всех дополнительных полей. Ищем в районе 136-й строки код (от версии к версии номера строк могут меняться - для этого у Вас должна быть голова на плечах и более-менее прямые руки) и удаляем его:

<?php if($this->item->params->get('catItemExtraFields') && count($this->item->extra_fields)): ?>
<div class="catItemExtraFields">
 <h4><?php echo JText::_('K2_ADDITIONAL_INFO'); ?></h4>
 <ul>
 <?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
 <?php if($extraField->value != ''): ?>
 <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
 <?php if($extraField->type == 'header'): ?>
 <h4 class="catItemExtraFieldsHeader"><?php echo $extraField->name; ?></h4>
 <?php else: ?>
 <span class="catItemExtraFieldsLabel"><?php echo $extraField->name; ?></span>
 <span class="catItemExtraFieldsValue"><?php echo $extraField->value; ?></span>
 <?php endif; ?>
 </li>
 <?php endif; ?>
 <?php endforeach; ?>
 </ul>
 <div class="clr"></div>
 </div>
<?php endif; ?>

Далее нам нужно вывести одно дополнительное поле внизу intro-текста материала, это будет поле Демо, которое имеет уникальный ID - 1 (узнать ID поля можно в административной панели K2, во вкладке Доп. поля):

k2-extrafields-04

 Затем в этом же файле category_item.php ищем подходящую позицию для размещения дополнительного поля (в нашем случае это будет в самом верху материала, под Автором) и вставляем следующий код:

<?php echo $extrafields[1];?>

где  [1] - это и есть id дополнительного поля Демо. Обновляем страницу на сайте и видим наше одно поле, которое имеет идентификатор 1. Таким же образом вставляем другие поля в любом месте шаблона K2, только не забудьте менять ID при каждом новом добавлении поля в шаблон, в противном случае у вас получится одно и тоже поле в разных местах шаблона:

k2-extrafields-05

НЕМАЛОВАЖНОЕ ЗАМЕЧАНИЕ: в настоящее время можно использовать алиасы доп. полей вместо id, что существенно упростит навигацию в файлах К2-шаблона:
$this->item->extraFields->АЛИАС->name
$this->item->extraFields->АЛИАС->value

Таким образом, счастливые обладатели К2, начиная с версии 2.6.1, могут наслаждаться ещё и тем, что теперь возможен вывод названия (name) и значения (value) любого дополнительного поля в любом месте шаблона! Ну, а мы, так сказать, для простоты, поработаем пока "по старинке".

И ещё одно замечание. Как Вы уже могли заметить, у нас вывелось только значение дополнительного поля, имя поля в нашем случае не было необходимо, и мы его упустили. Если же Вы хотите вывести и название поля, и его значение - нужно несколько видоизменить код, который мы добавляли в начале (помните, после строки запрета прямого доступа к файлу):

// дополнительные поля материала K2
$extrafields = array();
foreach($this->item->extra_fields as $item)
{ 
// добавлением следующей строки мы определяем переменную, содержащую имя допполя, а в следующей - его значение:
$extrafieldsname[$item->id] = $item->name;
$extrafields[$item->id] = $item->value;
}

Индивидуально оформляем каждое поле

Далее нам необходимо индивидуально оформить дополнительное поле K2. Для этого достаточно просто обрамить наш код DIV'ом или любым другим элементом по желанию и добавить к нему CSS-класс или id для создания уникального стиля. Например, сделаем так:

<div class="demo">
<?php echo $extrafields[1];?>
</div>

После этого открываем CSS файл компонента K2 (это наш файлик new_style.css) и создаем стиль оформления. Здесь уже делайте оформление как душе угодно. Например, вот так:

.demo {
background: url ('../images/red-button.png');
width: 60px;
height: 20px;
margin: 8px 0 7px 5px;
}

Результат получим приблизительно такой:

k2-extrafields-06


Косяк

Теперь рассмотрим вариант, когда в запарке мы не заполнили наше дополнительное поле с id=1. Что получится? А вот что: мы жёстко прописали стиль для нашего поля, и вне зависимости от того, заполнили мы его или нет, фоновая кнопка будет отображаться. Для того чтобы избежать такого косяка, выполним стандартную проверку на заполненность нашего поля:

<?php if($extrafields[1]): ?>
<div class="demo">
<?php echo $extrafields[1];?>
</div>
<?php endif; ?>

Усложняем задачу

В "штатном" режиме дополнительные поля К2 выводятся циклом, мы же в предыдущем примере убрали цикл и вывели поля индивидуально. Но не запаримся ли мы, если у нас два десятка полей, и нам не нужно делать индивидуальное оформление для каждого поля, а нужно лишь скрыть одно-два поля от посторонних? Выведем снова циклом, исключив ненужные поля.  Ситуация с алиасами нам не подойдёт однозначно.  Например, будем выводить поле "оптовая цена" только для конкретной группы пользователей К2 (назовём их условно "Оптовики"). В данном примере рассмотрим поля "Мелкий опт" и "Крупный опт" id которых равны соответственно 19 и 20, и группу пользователей "Оптовики", id которой равно 5.

Обратите внимание: мы работаем не с группами пользователей JOOMLA, а с группами пользователей К2. Это важно!
<ul>
<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
  <?php if(($extraField->value != '') &&  ($extraField->id <> 19) &&  ($extraField->id <> 20)): ?>
    <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
      <span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
                  <span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
                </li>
              <?php endif; ?>
<?php endforeach; ?>
</ul>

Таким образом, в этом куске кода мы выводим все поля, кроме незаполненных и тех, у которых id=19 и id=20. Теперь проверим, какой id у пользователя, и если он из группы "Оптовики" (т.е. id группы юзеров К2 =5) - выведем по описанноый ранее методике оставшиеся два поля:

// получаем айдишку К2-юзера и его К2-группы
<?php $user = &JFactory::getUser(); 
$k2_user = K2HelperPermissions::getK2User($user->id); 
// проверяем на соответствие нашей группе, и если группа =5 (оптовики) - то выводим допполя с id=19 и 20 
if($k2_user->group >= 5 )    { ?>
<?php echo $extrafields[19];?>
<?php echo $extrafields[20];?>
// Если условие не выполнилось (id группы не равен 5), то
<?php } else echo  '<h5>тут выводим предупреждение о недопустимости просмотра данной группой</h5>'  ?>

Смотрим готовый шмат кода:

// Начинаем цикл-перебор всех существующих доп.полей
<ul>
  <?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
// Делаем проверку, не пустые ли допполя и не равны ли их id-шки 19 и 20, и если условие верно - выводим допполя по очереди:
<?php if(($extraField->value != '') &&  ($extraField->id <> 19) &&  ($extraField->id <> 20)): ?>
             <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
      <span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
                  <span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
                </li>
              <?php endif; ?>
              <?php endforeach; ?>
</ul>
// получаем айдишку К2-юзера и его К2-группы
<?php $user = &JFactory::getUser(); 
$k2_user = K2HelperPermissions::getK2User($user->id); 
// проверяем на соответствие нашей группе, и если группа =5 (оптовики) - то выводим допполя с id=19 и 20 
if($k2_user->group >= 5 )    { ?>
 
<span class="itemExtraFieldsLabel"><?php echo $extrafieldsname[19];?></span>
 
<span class="itemExtraFieldsValue"><?php echo $extrafields[19];?></span>
 
<span class="itemExtraFieldsLabel"><?php echo $extrafieldsname[20];?></span>
 
<span class="itemExtraFieldsValue"><?php echo $extrafields[20];?></span>
 
// Если условие не выполнилось (id группы не равен 5), то
<?php } else echo  '<h5>тут выводим предупреждение о недопустимости просмотра данной группой</h5>'  ?>
 

Подведём итоги

Думаю, простота данного решения не введёт в ступор даже мало-мальски посвящённого в тему Джумлера. Используя данную методику, можно не только выводить/скрывать доп. поля, но и при желании размещать их в разном порядке, в начале и конце статей, а также выводить в одной статье поля из разных групп.


Особую благодарность в подготовке данного материала хочется выразить Очередному Вебмастеру, а также далёкому прародителю материала, назовём его условно JF (да простит он меня за этот ремейк и за отсутствие линка на него).

 

Комментарии  

 
0 #17 Александр 22.01.2016 14:51
Цитирую Александр:
Цитирую Александр:
По пути www.вашсайт/templates/вашшаблон/html/com_k2/templates/default/ уже есть файлы (были с шаблоном).

Частенько производители шаблонов не соблюдают описанное в данной статье, в т.ч. пути. В Вашем случае проще сделать дубль непосредственно в папке
joomlaroot/components/com_k2/templates


Всем спасибо. Подсказали. Оказывается если стоят параметры наследование от старшей категории, то и шаблон наследуется. Изменил настройки и все получилось. Извините за беспокойство, но может кому то еще будет полезно.
Цитировать
 
 
0 #16 Александр 22.01.2016 08:47
Цитирую Александр:
По пути www.вашсайт/templates/вашшаблон/html/com_k2/templates/default/ уже есть файлы (были с шаблоном).

Частенько производители шаблонов не соблюдают описанное в данной статье, в т.ч. пути. В Вашем случае проще сделать дубль непосредственно в папке
joomlaroot/comp onents/com_k2/t emplates
Цитировать
 
 
0 #15 Dorfman 22.01.2016 05:13
Цитирую Святослав:
А что вместо CSS4K2 используется в джумла 3й версии ?

В 3-й версии (кстати, как и в предыдущих) можно назначать шаблоны и в них прописывать индивидуальные стили. Но это уже тема отдельной статьи.
Цитировать
 
 
0 #14 Dorfman 22.01.2016 05:11
Цитирую Александр:
где именно нужно вставлять в коде файла item.php исправленный код, что бы показать одно из полей только определенной группе?

Вы можете вставить доп. поле в абсолютно любом месте шаблона, хоть перед заголовком статьи. В этом и прикол К2 - это конструктор контента, который легко подпилить под свой макет.
Цитировать
 
 
0 #13 Александр 22.01.2016 03:13
Добрый день.
Пожалуйста подскажите, а где именно нужно вставлять в коде файла item.php исправленный код, что бы показать одно из полей только определенной группе?
(У вас на примере группы Оптовики)
Цитировать
 
 
0 #12 Dorfman 26.03.2015 06:02
Цитирую Святослав:
А что вместо CSS4K2 используется в джумла 3й версии ?

Добавлено:
Ищите под спойлером возле файлов для закачки в этой статье
Цитировать
 
 
0 #11 Святослав 24.03.2015 21:38
А что вместо CSS4K2 используется в джумла 3й версии ?
Цитировать
 
 
0 #10 Dorfman 25.12.2014 02:21
Цитирую Александр:
А решили проблему вывода доп полей по id в шаблоне тегов ?

Честно говоря, не было необходимости, поэтому не ковырялся.
Цитировать
 
 
0 #9 Александр 19.12.2014 19:59
Здравствуйте. А решили проблему вывода доп полей по id в шаблоне тегов ?
Спасибо.
Цитировать
 
 
0 #8 Dorfman 03.10.2014 07:37
Проверьте ещё раз код. Тут по тексту глюк происходит: редактор меняет символ & на его код &аmp; - попробуйте проверить у себя этот момент!
Цитировать
 
Copyright © 2007-2017. Здесь живёт Жора Дорфман.