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

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

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

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

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

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

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

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



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

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

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



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

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

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

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

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

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

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

[full-link]
{title}


Раздел: {link-category}  






{short-story}



Просмотров: {views} {favorites}  Скачать

[/full-link]




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

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

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




[xfvalue_descripte]






Описание программы:

{full-story}






Минимальные требования:

[xfvalue_fullpower]






Скриншоты:

[xfvalue_fullscreens]









Скачать 


[xfgiven_ofsiteload]Скачать {title} с официального сайта
[/xfgiven_ofsiteload]

[xfgiven_rutrackerload] Скачать {title} с RuTracker.org 
[/xfgiven_rutrackerload]

[xfgiven_rutorload]Скачать {title} с Rutor.org [/xfgiven_rutorload]




Исходник 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]


Скриншоты:

[xfvalue_fullscreens]




[/xfgiven_fullscreens]


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

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

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


	

	

		

	

	
		
		
		
		


	

	

		
« DLE - картинки из дополнительн...


Bodyclick - отличная альтернат... »

	

	

		 
	

	

		Понравилась статья "DLE - разработка шаблона на дополнительных полях" из раздела Создание сайта » Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
	


	


	   


	

		Комментариев: 4 •  
		Просмотров: 4509   
		Дата: 02-июл-2013, 13:16 
		
			Автор: 
			artemmian