Как сделать ссылки на схожие материалы с фото материала?

голоса: 0

Здравствуйте. Как сделать Ссылки на схожие материалы? Спасибо

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

| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: webanet
Материал дополнен!

Ответов: 1

голоса: +2
 
Лучший ответ

В результате получим примерно следующее:

1. Редактируем шаблон - http://ваш-сайт.ру/panel/?a=tmpl;m=3;t=4 удаляем код вида:

<li class="uRelatedEntry"><a href="$ENTRY_URL$">$TITLE$</a></li>

2. Вместо стандартного кода устанавливаем:

<div class="rel-mat">
<img src="<?if($IMG_SMALL_URL$)?>$IMG_SMALL_URL$<?else?>ссылка на фото если у материала нет фото<?endif?>" alt="$TITLE$"> 
<a href="$ENTRY_URL$" class="rel-link" title="$TITLE$">$TITLE$</a>
<span>$MESSAGE$</span>
</div>

3. Идем в шаблон страницы комментариев модуля и в нужном месте где-то после кода $MESSAGE$ устанавливаем код:

<div id="rel"> <span>Смотрите также:</span> 
<?$RELATED_ENTRIES$(6)?>
</div> 

4. Перейти в Панель управления - Главная - Дизайн - Управление дизайном(CSS), в самый низ прописать стили:

.rel-mat {text-align:left!important;float:left;width: 150px;height: 350px;margin: 1px;overflow: hidden;border: 1px solid #aea79f!important;display: inline-block;border-radius:3px;box-shadow: 0 0 2px rgb(177, 172, 172);background: #fff;}
.rel-mat span {display:block;position: relative;top: 5px;}
.rel-mat p:before{ content:""; display:block; height:70px; position:relative; top:210px; background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%); }
.rel-mat p:nth-child(1){text-align: left;padding: 0 5px 0 5px;display:inherit!important;}
.rel-mat p:nth-child(1n+1) {display:none;}
.rel-mat img {border-bottom:1px solid #aea79f;width: 150px;max-height: 95px;}
a.rel-link {color: #337ab7;float: left;text-align: center;position: relative;z-index: 10;}
#rel {width: 100%;margin-bottom: 10px;padding-bottom: 20px;display: inline-block;border: 1px solid #cdc7c7;border-radius: 5px;background: #FFF;}
#rel span:nth-child(1) {font-size: 18px;font-family: serif;color: green;margin-left: 10px;border-bottom: 1px dashed green;position: relative;top: 4px;}

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

  • Дополню, фото будет выводиться если оно крепится к материалу с помощью доп поля Изображения, если же вы пользуетесь ссылками на фото с сторонних сервисов, ничего выводиться не будет.
  • Если не хотите чтобы выводилось описание к материалу, с кода выше удалите - <span>$MESSAGE$</span> и с стилей height: 350px;overflow: hidden;
  • Хотите сделать блоки шире, регулируйте в стилях выше значение width: 150px; и конечно не забываем о коде <?$RELATED_ENTRIES$(6)?> где вместо выделенного пишем значение сколько вы хотите видеть материлов от 1-20 не более.
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
вы не прочитали инструкцию. у вас изображения подгружаются со сторонних источников. а нужно прикреплять к материалам для вывода
webanet,
Да я понял вот и пытаюсь что то сделать
Андрей Рыбаков,

Писал же выше, крепим фото с помощью доп поля Изображения:

Yuri_Geruk,
Спасибо! я сделал без изображения
...