DLE 9.4 и выше - Изменяяем похожие новости

DLE 9.4 и выше - Изменяяем похожие новости


Если у вас ДЛЕ ниже 9.4, то вам сюда

В отличие от всех остальных движков DLE, начиная с версии 9.4 похожим новостям выделили отдельный файл шаблона relatednews.tpl . Вот его то мы и будем править. Поставить хак вывода похожих новостей для дле с картинкой и описанием или же вывести их в горизонтальной или вертикальной проекции достаточно просто, инструкция ниже:

Вертикальное расположение новостей
1. Открываем свой шаблон templates/{THEME}/relatednews.tpl и находим там всего одну примерно похожую строку:

<li><a href="{link}">{title}</a></li>


2. Удаляем и на ее место ставим новую:


<table border="0">
<tr>
   <td valign="top"><a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/></a></td>
   <td valign="top"><b><a href="{link}">{title}</b></a><br>{text limit="255"}</td>
</tr>
</table>  
<hr/>


3. Теперь открываем файл стилей вашего шаблона, обычно templates/{THEME}/css/style.css и дописываем строку:


/*Related News*/
.imagestory { float: center; width: 80px; height: 80px; margin: 0 8px 6px 0; }


Все, теперь макет формирования похожих новостей будет почти такой же, как и на скрине выше. Для версий ДЛЕ ниже 9.4 это все тоже реально, но требует правки нескольких файлов в папке engine


Горизонтальное расположение новостей
Файл с шаблоном для вывода похожих новостей это простейший html код, задаем для таблицы id и в css для этого стиля пишем выравнивание по горизонтали. Помимо этого, нужно высчитать размеры, да бы все блоки влезли в рамер фулстори!

1. Открываем свой шаблон templates/{THEME}/relatednews.tpl и находим там всего одну примерно похожую строку:

<li><a href="{link}">{title}</a></li>


2. Удаляем и на ее место ставим новую:

<div class="relatednews">
<a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/><br/>{title}</a>
</div>


3. Открываем файл стилей и дописываем:

/*Related News*/
.relatednews{display:inline-block; width:19%; vertical-align:top;}
.relatednews img{width:105px; height:125px;}


Ширину картинок в 105px я вычислил, исходя из размера окна фулстори, который равен 538px. Высчитываем:

538/5 = 107.6


Два с половиной пикселя я оставил на отступы и на всякий случай под разные разрешения экранов. И 20% для блока я по тем же причинам не стал ставить, а пооставил 19%

Т.е. сами блоки имеют отступы друг от друга на 1%, а это 5.38px и картинки внутри блоков тоже имеют отступы 2.6px. Можно уменьшить числа, но в шаблоне на скриншоте выше фон маскирует все отступы и они настолько мизерны, что все отлично смотрится!

Если картинка выводится через дополнительное поле, статья тут: DLE - картинки из дополнительных полей в похожие новости related-news
Понравилась статья "DLE 9.4 и выше - Изменяяем похожие новости" из раздела Создание сайта » Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 20 •  Просмотров: 15685   Дата: 02-июл-2013, 11:37

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

Комментарии

#1 Юрий   

Гости
Спасибо за такой простой и надежный хак! Весь интернет перекопал, этот оказался самым простым))
(7 марта 2012 16:09) • цитировать • •

admin
Цитата: Юрий
Спасибо за такой простой и надежный хак! Весь интернет перекопал, этот оказался самым простым))


Да незачто, сам когда то долго искал решение.
(8 марта 2012 00:35) • цитировать • •

Гости
Спасибо большое всё работает отлично!!! Только вот искал немного другое. Вы не подскажите как сделать тоже самое, только что бы похожие новости были горизонтально, т.е. картинка, а под ней название, типа как тизеры.
Спасибо!
(9 октября 2012 18:14) • цитировать • •
#4 majami   

Гости
Ага и мне интересно, весь интернет перелопатил, только такие и есть. Еще нашел картинки можно литать, при навидении появляется текст, но это походу больше для фильмом.
(9 декабря 2012 10:14) • цитировать • •

admin
Цитата: Алексангдр
похожие новости были горизонтально

Это простейший HTML. Заменить часть кода и будет горизонтально!

Цитата: majami
Ага и мне интересно, весь интернет перелопатил, только такие и есть. Еще нашел картинки можно литать, при навидении появляется текст, но это походу больше для фильмом.

Текст появляется, если задан параметр title для картинки! Он будет вскакивать в любом случае. Стилизуется такая штука почти на любом языке, но наиболее популярными являются JQ+CSS
(12 января 2013 22:14) • цитировать • •
#6 michka   

Гости
Спасибо вам огромное, вы очень выручили.
(8 мая 2013 00:07) • цитировать • •

admin
Цитата: michka
Спасибо вам огромное, вы очень выручили.


Незачто. Всегда рад помочь!
(10 мая 2013 02:06) • цитировать • •

Гости
majami,
можете поподробнее... Мне как раз на фильм о кино может пригодится. Дайте ссылку.

Цитата: artemmian
ссылку.

Буду вам признателен, если скажете, как выводятся эти похожие записи? Нужно облако тегов создавать или как? Дело в том, что я добавил код и у меня ничего не вывелось. Облако тегов отсутствует.
Человеческое спасибо!
(3 июня 2013 18:58) • цитировать • •

admin
Цитата: Александр
Буду вам признателен, если скажете, как выводятся эти похожие записи? Нужно облако тегов создавать или как? Дело в том, что я добавил код и у меня ничего не вывелось. Облако тегов отсутствует.Человеческое спасибо!


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

Файл fullstory.tpl и в нужном месте тег: {related-news}



Пример: ЭТОТ сайт! Чуть выше есть блок с похожими новостями, идентичными на скринах.
(8 июня 2013 01:23) • цитировать • •

Гости
Здравствуйте, очень полезная информация. А как сделать, что бы горизонтальные новости были по центру (не прижимались к левому краю) и описание под картинкой выравнивалось не по левому краю а посередине?
Заранее Благодарю!
(16 июля 2013 23:36) • цитировать • •
#11 Rifler   

Гости
a как сделать так же, но в 4 колонки? что править?
(28 июля 2013 19:51) • цитировать • •

admin
Цитата: Сергей
Здравствуйте, очень полезная информация. А как сделать, что бы горизонтальные новости были по центру (не прижимались к левому краю) и описание под картинкой выравнивалось не по левому краю а посередине?Заранее Благодарю!


Цитата: Rifler
a как сделать так же, но в 4 колонки? что править?


разобраться в стилях CSS и HTML ибо только стилями нужно отрегулировать нужные дистанции и колонки.

В 4 колонки поставить в настройках 4 похожие новости
(2 августа 2013 15:00) • цитировать • •
#13 Lika   

Гости
А у меня не получилось(( Вобще никаких изменений не произошло на сайте( recourse у меня dle 9.7
(20 августа 2013 15:15) • цитировать • •

admin
Цитата: Lika
А у меня не получилось(( Вобще никаких изменений не произошло на сайте( у меня dle 9.7


Я уверен, вы что-то сделали неправильно
(21 августа 2013 14:17) • цитировать • •

Гости
Большое спасибо за статью! Материал очень пригодился.
(8 ноября 2013 20:25) • цитировать • •

admin
Цитата: Flyer Dell
Большое спасибо за статью! Материал очень пригодился.


Незачто, пользуйтесь!
(8 ноября 2013 21:23) • цитировать • •

Гости
Спасибо ребятки, весь рунет перепахал руками, а тут на тебе всё наглядно и понятно. Поставил у себя на сайте всё супер.
(17 января 2014 23:31) • цитировать • •

admin
Цитата: Виталий
Спасибо ребятки, весь рунет перепахал руками, а тут на тебе всё наглядно и понятно. Поставил у себя на сайте всё супер.


Всегда пожалуйста!
(18 января 2014 10:08) • цитировать • •

Гости
Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.

Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.
(8 мая 2016 19:25) • цитировать • •

admin
Цитата: djdeath666
Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.



<div class="related">
	<a href="{link}">
		<div class="related_img"><img src="{image-1}"/></div>
		<br/>
		{title}
	</a>
</div>

.related{
	width: 24%;	
	padding: 0.5%;
	margin: 10px 0% 30px 0%;
	height: 156px;
	overflow: hidden;
	float: left;
	display: inline-block;
	text-align: center;
}

а дальше играйтесь значениями под свой дизайн
(23 мая 2016 21:43) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика