Refine Medium layout: wider hero image, reordered comments, thumbnail nav
This commit is contained in:
40
single.php
40
single.php
@@ -39,7 +39,7 @@ get_header(); ?>
|
||||
<?php if (has_post_thumbnail()): ?>
|
||||
<div class="post-thumbnail-full mb-5">
|
||||
<?php the_post_thumbnail('full', array(
|
||||
'class' => 'img-fluid w-100',
|
||||
'class' => 'img-fluid article-hero-image rounded',
|
||||
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
|
||||
)); ?>
|
||||
</div>
|
||||
@@ -71,11 +71,41 @@ get_header(); ?>
|
||||
<div class="col-lg-8 col-xl-7">
|
||||
<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts">
|
||||
<div class="row justify-content-between g-4">
|
||||
<div class="col-sm-6 text-start">
|
||||
<?php previous_post_link('<div class="text-muted small fw-bold mb-1">Previous</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
|
||||
<div class="col-md-6 text-start">
|
||||
<?php
|
||||
$prev_post = get_previous_post();
|
||||
if (!empty($prev_post)):
|
||||
?>
|
||||
<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"
|
||||
class="text-decoration-none d-flex align-items-center gap-3">
|
||||
<?php if (has_post_thumbnail($prev_post->ID)): ?>
|
||||
<?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
|
||||
<?php endif; ?>
|
||||
<div>
|
||||
<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Previous</div>
|
||||
<div class="fw-bold text-dark lh-sm"><?php echo esc_html($prev_post->post_title); ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="col-sm-6 text-end">
|
||||
<?php next_post_link('<div class="text-muted small fw-bold mb-1">Next</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
|
||||
<div class="col-md-6 text-end">
|
||||
<?php
|
||||
$next_post = get_next_post();
|
||||
if (!empty($next_post)):
|
||||
?>
|
||||
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"
|
||||
class="text-decoration-none d-flex align-items-center justify-content-end gap-3 text-end">
|
||||
<div>
|
||||
<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Next</div>
|
||||
<div class="fw-bold text-dark lh-sm"><?php echo esc_html($next_post->post_title); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (has_post_thumbnail($next_post->ID)): ?>
|
||||
<?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user