Работа с дополнительными полями

Здравствуйте.
Часто спрашивают про использование дополнительных полей в Альто и что бы хоть немного снять вопросы по этой теме был написан этот топик. Дополнительные поля – это довольно мощный инструмент для разработки уникальной структуры сайта. Как использовать дополнительные поля в своём проекте покажу на примере создания нового типа контента «Кинообзор».
Пусть у кинообзора будет шесть дополнительных полей:
— Постер типа single-image-uploader;
— Видео – типа link;
— Дата выхода – типа date;
— Длительность типа input (поля типа время, увы, нет)
— Киностудия/Автор тоже типа input;
— Жанр, типа select со значениями «Фильм» и «Мультфильм», «Клип».
Сначала в админке (Настройки > Типы контента) создадим тип контента – «Кинообзор»

Теперь на сайте можно создавать публикации типа «Кинообзор».
Собственно, на этом и заканчивается работа с дополнительными полями через фронтенд сайта, самое интересное потребует небольшой правки шаблонов )
Для каждого типа контента в Альто можно определить свой шаблон. И это не только дополнительная возможность, а, на самом деле необходимость. Даже если ваш новый тип контента будет очень похож на топик, то всё равно лучше сделать для него отдельный шаблон. Для нашего кинообзора скопируем файлы topic.type_default-edit.tpl, topic.type_default-list.tpl и topic.type_default-show.tpl в эту же папку под именами topic.type_obzor-edit.tpl, topic.type_obzor-list.tpl и topic.type_obzor-show.tpl. Это файлы редактирования, списка и отдельного кинообзора, соответственно.
Изменим шаблон редактирования кинообзора. Все доп.поля выводятся тут (у нас, это будет файл topic.type_obzor-edit.tpl, конечно)
Как видно $oContentType->getFields() возвращает массив дополнительных полей над которыми можно проводить любые допустимые операции. Индекс массива – это идентификатор дополнительного поля как он отображается в админке. У меня – 4, на картинке выше этот идентификатор выделен красным.

Мы разместим постер слева, а остальные поля справа. Для этого код перепишем так:
{if $oContentType}
    {$iPosterId=4} {* Обозначим идентфикатор поля постера *}
    <div class="clearfix">
        <div class="col-md-12">
            {* Выведем постер в левой части формы *}
            {$oField=$oContentType->getField($iPosterId)}
            {include file="fields/obzor/field.custom.`$oField->getFieldType()`-edit.tpl" oField=$oField}
        </div>
        <div class="col-md-12">
            {* А остальные поля в правой части формы *}
            {foreach from=$oContentType->getFields() item=oField}
                {if $oField->getId()==$iPosterId}{continue}{/if} {* Постер, разумеется пропускаем *}
                {include file="fields/obzor/field.custom.`$oField->getFieldType()`-edit.tpl" oField=$oField}
            {/foreach}
        </div>
    </div>
{/if}

Заметьте, я исправил путь к шаблонам на fields/obzor/field.custom, для чего это было сделано написано далее.

В итоге мы получим следующую форму редактирования:

Конечно, дело на любителя, но в рамках этого примера решим, что внешний вид формы нам не нравится. А конкретно не нравятся подсказки, которые занимают много места и ассиметричное положение формы постера.
Для того, что бы исправить положение создадим собственные шаблоны дополнительных полей. Это не сложно, достаточно скопировать папку рядышком с именем obzor. Все типы дополнительных полей нам не нужны, потому типы file и textarea можно смело удалить из папки obzor. Такой манёвр мы сделали для того что бы «не портить» дефолтные шаблоны, они пригодятся в будущем, да и при обновлении не затрутся.
Что сделаем с полями? У всех полей типа *-edit.tpl уберём подсказку, то есть удалим див класса info-container.
Для поля постера добавим свойство width=100% что бы картинка не скакала. В итоге вот этот блок будет выглядеть так:
{img attr=[
        'src'           => "{asset file="images/empty_image.png" theme=true}",
        'width'         => '100%',
        'alt'           => "image",
        'class'         => "thumbnail js-uploader-image",
        'target-type'   => $sTargetType,
        'crop'          => '400fit',
        'target-id'     => "{if $oTarget}{$oTarget->getId()}{else}0{/if}"
]}

В итоге форма стала выглядеть более прилично


Процедура вывода дополнительных полей совершенно не отличается от того как мы работали с формой редактирования нашего кинообзора. Здесь также как и выше нужно обратить внимание на следующие моменты (для определённости остановимся на шаблоне полной публикации topic.type_obzor-show.tpl.):
— обязательно нужно создать собственный шаблон вывода скопировать topic.type_default-show.tpl под новым именем topic.type_obzor-show.tpl.
— все дополнительные поля выводятся здесь и именно в этом месте нужно менять вёрстку.

Итог:
— для собственных типов контента всегда создаём новые шаблоны с соответствующими именами;
— в шаблоне может быть доступна переменная-объект $oContentType от которой можно получить массив дополнительных полей топика так: $oContentType->getFields(), а ключи массива – это ид. дополнительного поля;
— в примере нет, но произвольное дополнительное поле можно получить по его идентификатору от самого топика так: $oTopic->getField(id), в нашем примере для получения постера id=4;
— если необходимо, то для каждого типа дополнительного поля можно создать свой собственный шаблон редактирования.

Похожие статьи

  • Добавит чекбокс, показывать контакты на сайте
    Всем доброго времени суток. Подскажите, как добавить на сайт чекбокс показывать контакты на сайте. Хочу добавить к массиву со значениями полей булевое поле, и делать проверку, если есть то показывать на сайте....
  • AltoWiki — новый раздел сайта
    Вообще-то раздел AltoWiki появился не сегодня. Но до недавнего времени он был в процессе отладки и доработки — что-то допиливалось, что-то корректировалось. Но вот сейчас, полагаю, можно о нем уже рассказать, как о...
  • обязательное заполнение дополнительных полей
    Можно ли как то сделать проверку на то, что пользователь заполнил дополнительные поля и загрузил фото в топик?
  • Дополнительные поля у блога
    Очень нужны дополнительные поля у блога, такие же как сейчас можно сделать для типов контента. Реально ли это сделать и как?

25 комментариев

+1
Спасибо большое, сегодня на досуге займусь
0
Все получилось, даже вывел в краткой версии топика, если у кого выводится в режиме редактирования надо сменить это
{include file="fields/obzor/field.custom.`$oField->getFieldType()`-edit.tpl" oField=$oField}

на это
{include file="fields/obzor/field.custom.`$oField->getFieldType()`-show</s>.tpl" oField=$oField


А можно ли сделать доп. поле картинки кликабельным
Отредактирован:
0
Да, можно. Для этого нужно в файле common/templates/skin/experience-simple/tpls/fields/customs/field.custom.single-image-uploader-show.tpl внести исправления в соответствии с требованиями галереи prettyPhoto. У меня получилось так:
{if $oField}
    {$sVal = $oTopic->getSingleImage($oField->getFieldId(), '180fit')}
    {if $sVal}
        <p class="topic_field_image">
            <a rel="prettyPhoto[pp_gal_topic_field_{$oField->getFieldId()}]"
               href="{$oTopic->getSingleImage($oField->getFieldId(), false)}">
                <img src="{$sVal}" alt="image"/>
            </a>
        </p>
    {/if}
{/if}

и в скрипте common/templates/skin/experience-simple/assets/js/theme.js в самом его конце перед закрытием скобок добавить инициализацию галереи для дополнительного поля так:
$(".topic_field_image > a[rel^='prettyPhoto']").prettyPhoto({
        social_tools:'',
        show_title: false,
        theme: 'pp_experience',
        markup: pretty_markup,
        slideshow:true,
        deeplinking: false
    });
0
Жалко что картинка открывается не как в фотосете, а так все замечательно
0
Открывается, вы просто что-то не так сделали. Вот картинка как это выглядит у меня:
0
{if $oField}
    {$sVal = $oTopic->getSingleImage($oField->getFieldId(), '400fit')}
    {if $sVal}
        <p class="topic_field_image">
            <a rel="prettyPhoto[pp_gal_topic_field_{$oField->getFieldId()}]"
               href="{$oTopic->getSingleImage($oField->getFieldId(), false)}">
                <img src="{$sVal}" alt="image"/>
            </a>
        </p>
    {/if}
{/if}


это у меня файл C:\wamp\www\common\templates\skin\experience-simple\tpls\fields\auto\field.custom.single-image-uploader-show.tpl


...
    $('#navbar-content').altoCollapsedMenu({
        collapse: '>ul',
        hidden: '.header-menu-hidden',
        widthCorrect: 20,
        other: [        ]
    });
	
	$(".topic_field_image > a[rel^='prettyPhoto']").prettyPhoto({
        social_tools:'',
        show_title: false,
        theme: 'pp_experience',
        markup: pretty_markup,
        slideshow:true,
        deeplinking: false
    });

});

а это концовка файла C:\wamp\www\common\templates\skin\experience-simple\assets\js\theme.js

Может что-то вы забыли дописать?



вот так выглядит у меня
Отредактирован:
0
Может у вас js-скрипты не обновились? Очистите папку _run или очистите кэш js- и css-файлов через админку.
0
отчистил папку Run все заработало спс
0
Как уменьшить межстрочный интервал вывода доп.полей, например у вас на примере это будет интервал между «Видео» и «Дата выхода», только не в редактировании топика, а в показе.
PS: не успел отредактировать комментарий
0
Нужно к тегу абзаца добавить класс mab0, например в шаблоне common/templates/skin/experience-simple/tpls/fields/obzor/field.custom.input-show.tpl
{if $oField}
    {$oTopicField = $oTopic->getField($oField->getFieldId())}
    {if $oTopicField}
        <p class="mab0">
            <strong>{$oField->getFieldName()}</strong>:
            {$oTopicField->getValue()}
        </p>
    {/if}
{/if}
Отредактирован:
+2
Очень круто )

Я правильно понимаю, что этот функционал изначально не планировался в версии 1.2 (различные типы доп. полей)?
0
Алена, будете смеяться — это все есть в Альто с самого первого релиза :) С тех пор немного изменились шаблоны и их структура, а сам функционал не менялся.
+2
aVadim не до смеха :( Документация нужна!!! Более подробная.
0
Полностью согласен, в альто wiki совсем сухо ((, до сих пор не понял как создать дополнительный блок справа, но это мне не к спеху, ну все же, думаю когда нибудь появится.
PS aVadim когда будет alto 1.1 хотя бы CR?
Отредактирован:
0
Кстати очень помогли бы, короткие видеоролики на youtube с процессом настройки и итоговым результатом :) Тут и раскрутка движка и наглядное руководство
0
Нормально записать видео да еще и с голосом, тот еще гемор, один раз запишешь и навсегда отобьешь себе желание что-то делать =) Давайте начнем с проверенных банальных статей =)
0
а я согласен с Аленой, смотреть видео было бы лучше, наглядно, ну и статьи само собой нужны, наполнять altowiki. Сейчас буду пробовать создавать тип топика примерно с 20-30 дополнительных полей и как то надо выводить в краткой статье часть доп.полей и будет еще второй тип топика с доп.полями. Если нормально разберусь попробую написать мануальчик
0
Да, это нужно будет делать. В планах есть. Была мысль сделать мультяшные, даже знакомый есть, кто делает, надо будет уточнить, сколько стоит такое удовольствие. :)
0
вроде как 1.1 beta 2, 1.2 не замечал.
Буду дальше ломать дополнительные поля, а еще такой вопрос можно как нибудь сделать вот такое help.yandex.ru/webmaster/supported-schemas/recipe.xml по средствам доп. полей, я так думаю можно переделать вывод RSS, но я не могу найти RSS ленту, или таковой нету?
0
Поле с множественным выбором не планируется? Например, для жанров музыки оно бы пригодилось, ибо зачастую музыка характеризуется сразу несколькими жанрами.
0
было бы замечательно
0
Нужна помощь, немного застопорился:
Пытаюсь сделать вывод видеороликов ютуба через поле input. Т.е. при создании топика пользователь вставляет ссылку на ролик в доп поле input, в в топике выводится сам ролик. Понимаю, что в шаблон нужно добавить <video, как это правильно сделать?
0
Достойный плагин.! По больше бы таких. Спасибо!
0
Это не плагин!
0
Подскажите пожалуйста, а как правильно сделать так что бы ссылка которую я добавляю в поле с ссылкой не выводилась а подставлялась в имя поля ?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.