Здравствуйте! сегодня хочу предложить вашему внимание очередной вид материалов для сайта игровой тематике с адаптацией под разные размеры экранов.
По умолчанию вид материала идёт в три колонки, при необходимости это можно легко изменить!
так же при создании данного вида мной было решено сделать разные иконки для разных категорий по умолчанию я сделал только три со своими иконками которые вы также сможете поменять на свои
Установка
Для начало мы просто подключим стили нашего вида
для этого просто скопируйте код и добавьте его в свою таблицу стилей в самый конец
Код
.waak_vid_mat_talantlev_bc {
width: 29%;
float: left;
margin: 10px 2%;
}
.waak_vid_mat_talantlev_bc_img img {
object-fit: cover;
width: 100%;
max-width: 100%;
height: 150px;
}
.waak_vid_mat_talantlev_bc_fot {
position: relative;
padding-left: 70px;
min-height: 40px;
background: #FFF;
}
.img_cat_bs {
width: 50px;
height: 50px;
background: #498BFA;
display: block;
position: absolute;
top: -20px;
left: 10px;
}
.img_cat_bs a {
display: block;
font-size: 22px;
text-align: center;
line-height: 50px;
color: #FFF;
}
.waak_vid_mat_talantlev_name {
font-size: 16px;
font-weight: bold;
color: #434343;
padding: 5px 0;
display: block;
padding-right: 80px;
}
.waak_vid_mat_talantlev_cnopa {
display: block;
width: 70px;
padding: 4px 0;
text-align: center;
background: #498BFA;
position: absolute;
right: 10px;
top: 5px;
}
.waak_vid_mat_talantlev_cnopa a {
color: #FFF;
font-size: 11px;
}
.waak_vid_mat_talantlev_cnopa:hover {
background: #000;
}
@media screen and (max-width: 900px){
.waak_vid_mat_talantlev_bc {width: 46%;}
}
@media screen and (max-width: 600px){
.waak_vid_mat_talantlev_bc {width: 96%;}
}
Теперь сам код вида материалов
Код
<div class="waak_vid_mat_talantlev_bc">
<div class="waak_vid_mat_talantlev_bc_img">
<a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$"></a></div>
<div class="waak_vid_mat_talantlev_bc_fot">
<span class="img_cat_bs">
<a href="$CATEGORY_URL$" title="$CATEGORY_NAME$">
<?if($CID$="1")?><i class="fa fa-folder-open" aria-hidden="true"></i><?endif?>
<?if($CID$="2")?><i class="fa fa-futbol-o" aria-hidden="true"></i><?endif?>
<?if($CID$="3")?><i class="fa fa-frown-o" aria-hidden="true"></i><?endif?>
</a>
</span>
<span class="waak_vid_mat_talantlev_name">$TITLE$</span>
<span class="waak_vid_mat_talantlev_cnopa"><a href="$ENTRY_URL$" title="$TITLE$">подробнее</a></span>
</div>
</div>
В коде выше есть такие строчки
Код
<?if($CID$="1")?><i class="fa fa-folder-open" aria-hidden="true"></i><?endif?>
<?if($CID$="2")?><i class="fa fa-futbol-o" aria-hidden="true"></i><?endif?>
<?if($CID$="3")?><i class="fa fa-frown-o" aria-hidden="true"></i><?endif?>
это и есть условие для вывода разных картинок для категорий
это ид категории
Код
<i class="fa fa-futbol-o" aria-hidden="true"></i>
это иконка которая будет выводится для данной категории
Если нужно увеличить список категорий со своими картинками просто добавьте ещё такую строчку
Код
<?if($CID$="ТУТ ИД КАТЕГОРИИ")?>ТУТ КОД ИКОНКИ<?endif?>
Теперь подключим шрифтовые иконки если они не подключены для этого просто добавьте в самый вер вашей таблицы стилей вот такую строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Подчеркну этот шаг нужно делать тем у кого ещё не подключены данные иконки а у кого подключены просто пропустите этот шаг
Готово!
