DLE - разработка шаблона на дополнительных полях

DLE - разработка шаблона на дополнительных полях


Чтобы увидеть картинку в оригинальном разрешени нажмите на на значек (второй справа), когда картинка увеличится

На скриншоте выше полный снимок страницы, сделанной полностью на дополнительных полях для каталога софта! Ниже постепенно разложу как это все создать.

Что нам дает дополнительное поле:
- множество блоков с индивидуальной стилизацией
- упрощенное создние новости
- удобство и простоту

Далее на примере скриншота разбираем что там есть! Дополнительные поля буду сокращать в виде: ДП.

1. Придумываем блоки и их назначения.
В моем случае я использовал такие блоки с дп:
- картинка
- характеристики программы
- описание программы
- системные требования
- скриншоты
- ссылки на скачивание

а так же статические, не требующие ДП - рекламные блоки, похожие новости, ссылки, комментарии, разные интригующие фразы!

2. Создаем для каждого из разделов дополнительное поле
Сразу не стоит, постепенно, можно даже разработать шаблон на компьютере, стилизовать и подставить в движок или еще проще - сразу на локальном сервере. Начинаем сверху и постепенно добавляем блоки.

DLE - разработка шаблона на дополнительных полях


3. Картинки и логотипы
Картинка нужна и для короткой новости и для полной. Думал и придумал - она едина. Заливается и вставляется через одно и то же дополнительное поле. Размер не важен, его отрегулирует css.

Картинка получила название fullimage, для вывода в шаблоне нужно подставить обязательную приставку: [xfvalue_fullimage]

Для единой картинки не может быть никаких тумбов и увеличений, более того, она вставляется в поле как ссылка, а не бб-код:

DLE - разработка шаблона на дополнительных полях


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

Выводим картинку в шаблон:

Открываем файлы: {THEME}/fullstory.tpl и {THEME}/shortstory.tpl и там, где планируется вывод картинок прописываем строку:

<img src="[xfvalue_fullimage]" align="х"/>


Далее на стилях css редактируем и подправляем под себя! Пример из файлов короткой полной новостей:

<div id="full_logo"><img src="[xfvalue_fullimage]" align="center"/></div>


/*Контейнер для картинки в полной новости*/
#full_logo{
    padding:10px; 
    display:block;
    margin:0 auto;
    text-align:center;   
}

/*Картинка в полной новости, едина для фулл и шотстори*/    
#full_logo img{width:300px; height:450px; padding:10px; }


Проблему с картинкой решили! Нужно учесть, что в поле короткой новости картинку больше указывать не нужно, в файл shortstory.tpl добавить тег ДП картинки и через css настроить по цвету и вкусу! Пример:

<div id="newwws">
[full-link]
<h3>{title}</h3>
<div id ="cat"><strong>Раздел: </strong>{link-category}  
<br/>
<div class="over1"><img src="[xfvalue_fullimage]"/></div>
<br/>
<div class="over">{short-story}</div>
<br/>
<p>Просмотров: <b>{views}</b> {favorites}  <b>Скачать</b></p>
[/full-link]
</div>


4. Остальные блоки
На скриншоте у меня следом за картинкой идут другие блоки, все они одинаковые по стилизации, но имеют разные CSS id и собственно разные ДП.

Следом идут:
- характеристики программы
- описание программы
- системные требования
- скриншоты
- ссылки на скачивание

абсолютно одинаковы, хоти и различаются по названию стилей. Исходник:

<div id="full_logo"><img src="[xfvalue_fullimage]" align="center"/></div>

<div id="full_descripte">[xfvalue_descripte]</div>

<!--реклама-->

<div id="full_text">
<h2>Описание программы:</h2>
{full-story}
</div>

<div id="full_power">
<h2>Минимальные требования:</h2>
[xfvalue_fullpower]
</div>

<div id="full_shots">
<h2>Скриншоты:</h2>
<center>[xfvalue_fullscreens]</center>
</div>

<!--реклама-->

<div id="full_load">
<h2>Скачать </h2>

[xfgiven_ofsiteload]<a href="[xfvalue_ofsiteload]"target=_blank>Скачать {title} с официального сайта</a><br/>[/xfgiven_ofsiteload]

[xfgiven_rutrackerload]<a href="[xfvalue_rutrackerload]"target=_blank> Скачать {title} с RuTracker.org </a><br/>[/xfgiven_rutrackerload]

[xfgiven_rutorload]<a href="[xfvalue_rutorload]"target=_blank>Скачать {title} с Rutor.org </a>[/xfgiven_rutorload]
</div>


Исходник CSS:

/*Доп. поля, единые стили*/
#full_text, #full_power, #full_load, #full_shots, #full_related, #full_descripte, #full_other{

    margin:15px 0px 25px 0px; 
    padding:10px; 
    background:#f2f2f2;
    border-radius:8px;
}


чтоб не заморачиваться и дублировать одно и то же, разделил запятыми. Для скринов чуть поболее, они не обрезаются до своих квадратиков и заливаются в едином варианте - тумб по ширине 550px - предел, который не влазит в окно фулстори. Поэтому для скринов дополнительно задаем сжатие:

/*Скриншоты*/
#full_shots{min-height:150px;}
#full_shots img{width:150px; height:150px; padding:10px; }


xfgiven применяется в случае, когда поля могут быть пустыми. Если обвернуть например блок со скриншотами вот так:

[xfgiven_fullscreens]
<div id="full_shots">
<h2>Скриншоты:</h2>
<center>[xfvalue_fullscreens]</center>
</div>
[/xfgiven_fullscreens]


и при этом ничего в поле не написать, то блок просто не появится или же подставит значение по умолчанию, которое можно задать!

Картинки из дополнительных полей в похожие новости related-news выводятся чуть по другому, стандартно не заработает

Собственно новость является логическим завершением другой - новости в две колонки полностью на css


Понравилась статья "DLE - разработка шаблона на дополнительных полях" из раздела Веб разработка » Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 4 •  Просмотров: 6060   Дата: 02-июл-2013, 13:16

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

Комментарии

#1 Abhishek   

Гости
Great inhtsgi. Relieved I'm on the same side as you.
(26 июля 2013 11:33) • цитировать • •
#2 viktor6   

Новички
как добавить эту статью в закладки
(24 октября 2014 17:34) • цитировать • •

admin
Цитата: viktor6
как добавить эту статью в закладки


Сейчас добавлю такую возможность.

Над похожими новостями, где выводятся все просмотры, комментарии и т.д. "+" зеленый появился)
(24 октября 2014 18:25) • цитировать • •
#4 viktor6   

Новички
Цитата: artemmian
Цитата: viktor6
как добавить эту статью в закладки


Сейчас добавлю такую возможность.

Над похожими новостями, где выводятся все просмотры, комментарии и т.д. "+" зеленый появился)

Спасиб работает.
(24 октября 2014 22:42) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика