• Скидка на платные статусы  -50%!

    получи безграничный доступ к нашим файлам, скриптам, курсам и другим инфопродуктам со скидкой -50%

     

    Подробнее

Добавляем картинку в поле навигации

Васёк

Проверенные
11.10.17
106
16
#1
Само поле представляет собой ссылки на следующую и предыдущую записи (если кто не знает). Но мне понадобилось внутрь этой ссылки вставить также картинку. Ну и оформить как-то красивее. Возможно, кому-нибудь это пригодится.

1. Создаем файл templates/default/assets/fields/navigation_dk.tpl.php с таким содержимым:
[SUCCESS]
PHP:
<?php $this->addCSS('templates/default/css/field_navigation/styles_dk.css'); ?>

<div class="ctype_navigation_dk">
<?php if($previous){ ?>
<div class="previous_ctype_navigation_dk">
<a href="<?php echo href_to($ctype['name'], $previous['slug'].'.html'); ?>">
<div class="photonavi"><img src="/upload/<?php echo html_image_src($previous['photo'], 'normal'); ?>"/></div>

<span><?php if(empty($field->options['prev_title'])){ ?>
<?php html($previous['title']); ?>
<?php } else { ?>
<?php html($field->options['prev_title']); ?>
<?php } ?></span>

<div class="naviarrow previous"></div>

</a>
</div>
<?php } ?>
<?php if($next){ ?>
<div class="next_ctype_navigation_dk">
<a href="<?php echo href_to($ctype['name'], $next['slug'].'.html'); ?>">
<div class="photonavi"><img src="/upload/<?php echo html_image_src($next['photo'], 'normal'); ?>"/></div>

<span><?php if(empty($field->options['next_title'])){ ?>
<?php html($next['title']); ?>
<?php } else { ?>
<?php html($field->options['next_title']); ?>
<?php } ?></span>

<div class="naviarrow next"></div>
</a>
</div>
<?php } ?>
</div>
[/SUCCESS]
2. Создаем файл templates/default/css/fild_navigation/styles_dk.css с таким содержимым:
[SUCCESS]
Код:
.ctype_navigation_dk {
overflow: hidden;
}
.next_ctype_navigation_dk {
float: right;
}
.previous_ctype_navigation_dk {
float: left;
}
.previous_ctype_navigation_dk, .next_ctype_navigation_dk {
width: calc(50% - 15px);
box-sizing: border-box;
}
.ctype_navigation_dk > div:last-child {
width: 100%;
}
.ctype_navigation_dk .previous_ctype_navigation_dk + .next_ctype_navigation_dk {
width: 50%;
}
.previous_ctype_navigation_dk a, .next_ctype_navigation_dk a {
display: block;
padding: 10px;
text-decoration: none;
height:124px;
box-sizing:border-box;
position:relative;
}

.previous_ctype_navigation_dk a .photonavi, .next_ctype_navigation_dk a .photonavi{
height:102px;
width:40%;
text-align:center;
box-sizing:border-box;
padding:10px;
float:left;
margin-right:15px;
overflow:hidden;
border:1px solid #CBCBC1;
}

.previous_ctype_navigation_dk span, .next_ctype_navigation_dk span{
display: block;
top:10px;
line-height:150%;
padding-right:10px;
}


.previous_ctype_navigation_dk a img, .next_ctype_navigation_dk a img{
height: 82px;
}

@media screen and (max-width: 580px) {
.previous_ctype_navigation_dk, .next_ctype_navigation_dk {
width: 100%;
border: none;
margin: 0 0 5px;
}
.ctype_navigation_dk .previous_ctype_navigation_dk + .next_ctype_navigation_dk {
width: 100%;
margin: 0;
}
}

.content_item .ft_navigation{
padding:15px 0;
}

.content_item .ft_navigation a{
border:1px solid #CBCBC1;
color:#444;
}

.content_item .ft_navigation a:hover{
border:1px solid #31BD38;
color:#31BD38;
}

.naviarrow{
position:absolute;
left:calc(70% - 20px);
bottom:10px;
width:40px;
height:40px;
}

.naviarrow:before{
position:absolute;
top:0;
left:0;
width:38px;
height:38px;
line-height:38px;
text-align:center;
font-size:28px;
border:1px solid #5D626B;
color:#444;
}

.ctype_navigation_dk a:hover .naviarrow:before{
color:#444;
}

.naviarrow.previous:before{
content:'<';
}

.naviarrow.next:before{
content:'>';
}
[/SUCCESS]
3. В настройках поля выбираем шаблон вывода navigation_dk
Возможно, для вашего шаблона придется внести еще какие-то правки в файле css.