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

<?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>

.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:'>';
}