File: /var/www/zaklada/wp-content/themes/zaklada/single.php
<?php
get_header();
?>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$image_alt = get_image_alt($thumbnail_id);
$pageUrl = get_permalink();
?>
<main class="">
<section class="hero-secondary">
<div class="hero-secondary__left">
<div class="hero-secondary__img-wrap">
<img data-src="<?= get_the_post_thumbnail_url(null, '9x6_large'); ?>" class="lazyload hero-secondary__img" alt="<?= $image_alt; ?>">
</div>
</div>
<div class="hero-secondary__right hero-secondary__right--align-left-mid">
<div class="hero-secondary__content">
<h1 class="hero-secondary__title"><?= the_title(); ?></h1>
<time class="hero-secondary__date" datetime="<?= get_the_date('Y-m-d') ?>"><?= get_the_date('d.m.Y.') ?></time>
</div>
</div>
</section>
<article class="news-single">
<div class="container">
<div class="font-controls hide-desktop">
<button class="font-controls__increment">A</button>
<button class="font-controls__decrement">A</button>
</div>
<div class="row">
<div class="col-12 offset-md-1 col-md-10">
<h2><?= get_field('main_subtitle') ?></h2>
<div class="news-single__lead">
<?= get_field('intro_text') ?>
</div>
</div>
</div>
<div class="row">
<div class="col-12 offset-md-1 col-md-1 mobile-second">
<aside class="share-bar">
<a href="#Share" class="share-bar__link js-facebook-share">
<svg class="share-bar__img icon-facebook"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-facebook"></use></svg>
</a>
<a href="#Share" class="share-bar__link js-twitter-share">
<svg class="share-bar__img icon-twitter"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-twitter"></use></svg>
</a>
<a href="#Share" class="share-bar__link js-linkedin-share">
<svg class="share-bar__img icon-linkedin"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-linkedin"></use></svg>
</a>
<a href="mailto:?subject=<?= the_title(); ?>&body=<?= $pageUrl; ?>" class="share-bar__link js-mail-share">
<svg class="share-bar__img icon-mail"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-mail"></use></svg>
</a>
</aside>
</div>
<div class="col-12 col-md-8 mobile-first">
<div class="news-single__content">
<?php the_content(); ?>
</div>
</div>
<div class="col-12 col-md-2 font-controls-col">
<div class="font-controls">
<button class="font-controls__increment">A</button>
<button class="font-controls__decrement">A</button>
</div>
</div>
</div>
</div>
</article>
<section class="other-articles">
<div class="container">
<div class="row">
<?php $previous_post = get_previous_post();
if($previous_post){ ?>
<div class="col-12 col-sm-6 col-md-5 offset-md-1">
<a href="<?= get_the_permalink($previous_post->ID); ?>" class="other-articles__link"><?= __('Prethodni članak', 'dinamo'); ?></a>
<article class="news-box">
<a href="<?= get_the_permalink($previous_post->ID); ?>" class="news-box__img-wrap">
<img class="lazyload news-box__img" data-src="<?= get_the_post_thumbnail_url($previous_post->ID, '9x6_small'); ?>" alt="">
</a>
<div class="news-box__content">
<h2><a href="<?= get_the_permalink($previous_post->ID); ?>"><?= get_the_title($previous_post->ID); ?></a></h2>
<time datetime="<?= get_the_date("Y-m-d", $previous_post->ID); ?>"><?= get_the_date("d.m.Y.", $previous_post->ID); ?></time>
<p><?= get_the_excerpt($previous_post->ID); ?></p>
<div class="news-box__cta">
<a href="<?= get_the_permalink($previous_post->ID); ?>" class="btn btn--dark"><?= __('Saznaj više', 'dinamo'); ?></a>
<div class="share-box-wrap">
<svg class="news-box__share-icon js-share-box icon-share"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-share"></use></svg>
<!-- share tooltip -->
<div class="share-box">
<a href="#Share" class="share-box__link js-share-box-facebook">
<svg class="share-box__img icon-facebook"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-facebook"></use></svg>
</a>
<a href="#Share" class="share-box__link js-share-box-twitter">
<svg class="share-box__img icon-twitter"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-twitter"></use></svg>
</a>
<a href="#Share" class="share-box__link js-share-box-linkedin">
<svg class="share-box__img icon-linkedin"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-linkedin"></use></svg>
</a>
<a href="mailto:?subject=<?= get_the_title($previous_post->ID); ?>&body=<?= get_the_permalink($previous_post->ID); ?>" class="share-box__link js-share-box-mail">
<svg class="share-box__img icon-mail"><use xlink:href="<?php echo THEMEROOT; ?>frontend/icons/icons.svg#icon-mail"></use></svg>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
<?php }
$next_post = get_next_post();
if($next_post){
?>
<div class="col-12 col-sm-6 col-md-5 offset-md-1">
<a href="<?= get_the_permalink($next_post->ID); ?>" class="other-articles__link"><?= __('Sljedeći članak', 'dinamo'); ?></a>
<article class="news-box">
<a href="<?= get_the_permalink($next_post->ID); ?>" class="news-box__img-wrap">
<img class="lazyload news-box__img" data-src="<?= get_the_post_thumbnail_url($next_post->ID, '9x6_small'); ?>" alt="">
</a>
<div class="news-box__content">
<h2><a href="<?= get_the_permalink($next_post->ID); ?>"><?= get_the_title($next_post->ID); ?></a></h2>
<time datetime="<?= get_the_date("Y-m-d", $previous_post->ID); ?>"><?= get_the_date("d.m.Y.", $next_post->ID); ?></time>
<p><?= get_the_excerpt($previous_post->ID); ?></p>
<div class="news-box__cta">
<a href="<?= get_the_permalink($next_post->ID); ?>" class="btn btn--dark"><?= __('Saznaj više', 'dinamo'); ?></a>
<img class="news-box__share-icon" src="<?php echo THEMEROOT; ?>frontend/img/icons/share.svg" alt="">
<!-- share tooltip -->
</div>
</div>
</article>
</div>
<?php } ?>
</div>
</div>
</section>
</main>
<?php endwhile;
endif;
?>
<?php
get_footer();
?>