Fix single article column structure to center wider images
This commit is contained in:
Adolfo Reyna
191
single.php
191
single.php
@@ -11,112 +11,105 @@ get_header(); ?>
|
|||||||
the_post();
|
the_post();
|
||||||
?>
|
?>
|
||||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||||
<div class="row justify-content-center">
|
<header class="entry-header mb-4 mx-auto px-3" style="max-width: 680px;">
|
||||||
<div class="col-lg-8 col-xl-7">
|
<?php the_title('<h1 class="entry-title display-4 fw-bold font-serif lh-sm mb-4">', '</h1>'); ?>
|
||||||
<header class="entry-header mb-4">
|
|
||||||
<?php the_title('<h1 class="entry-title display-4 fw-bold font-serif lh-sm mb-4">', '</h1>'); ?>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center mb-4 pb-4 border-bottom">
|
<div class="d-flex align-items-center mb-4 pb-4 border-bottom">
|
||||||
<div class="me-3">
|
<div class="me-3">
|
||||||
<?php echo get_avatar(get_the_author_meta('ID'), 48, '', '', array('class' => 'rounded-circle')); ?>
|
<?php echo get_avatar(get_the_author_meta('ID'), 48, '', '', array('class' => 'rounded-circle')); ?>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
|
<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
|
||||||
<div
|
<div class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
|
||||||
class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
|
<span><?php echo wisdom1_reading_time(); ?></span>
|
||||||
<span><?php echo wisdom1_reading_time(); ?></span>
|
<span>•</span>
|
||||||
<span>•</span>
|
<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
|
||||||
<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
|
<?php if (get_comments_number() > 0): ?>
|
||||||
<?php if (get_comments_number() > 0): ?>
|
<span>•</span>
|
||||||
<span>•</span>
|
<span><?php comments_number('0', '1 Response', '% Responses'); ?></span>
|
||||||
<span><?php comments_number('0', '1 Response', '% Responses'); ?></span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<?php if (has_post_thumbnail()): ?>
|
|
||||||
<div class="post-thumbnail-full mb-5">
|
|
||||||
<?php the_post_thumbnail('full', array(
|
|
||||||
'class' => 'img-fluid article-hero-image rounded',
|
|
||||||
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
|
|
||||||
)); ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<div class="entry-content fs-5 lh-lg font-sans text-dark" style="max-width: 680px; margin: 0 auto;">
|
|
||||||
<?php
|
|
||||||
the_content();
|
|
||||||
|
|
||||||
wp_link_pages(
|
|
||||||
array(
|
|
||||||
'before' => '<div class="page-links mt-5"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
|
|
||||||
'after' => '</div>',
|
|
||||||
)
|
|
||||||
);
|
|
||||||
?>
|
|
||||||
</div><!-- .entry-content -->
|
|
||||||
|
|
||||||
<footer class="entry-footer mt-5 pt-4 border-top">
|
|
||||||
<div class="entry-tags d-flex flex-wrap gap-2">
|
|
||||||
<?php the_tags('<span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span><span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span>'); ?>
|
|
||||||
</div>
|
|
||||||
</footer><!-- .entry-footer -->
|
|
||||||
</div><!-- .col-lg-7 -->
|
|
||||||
</div><!-- .row -->
|
|
||||||
</article><!-- #post-<?php the_ID(); ?> -->
|
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<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-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-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; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<?php if (has_post_thumbnail()): ?>
|
||||||
|
<div class="post-thumbnail-full mb-5 mx-auto" style="max-width: 1000px;">
|
||||||
|
<?php the_post_thumbnail('full', array(
|
||||||
|
'class' => 'img-fluid w-100 rounded',
|
||||||
|
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
|
||||||
|
)); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="entry-content fs-5 lh-lg font-sans text-dark mx-auto px-3" style="max-width: 680px;">
|
||||||
<?php
|
<?php
|
||||||
// If comments are open or we have at least one comment, load up the comment template inside the constrained column.
|
the_content();
|
||||||
if (comments_open() || get_comments_number()):
|
|
||||||
comments_template();
|
wp_link_pages(
|
||||||
endif;
|
array(
|
||||||
|
'before' => '<div class="page-links mt-5"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
|
||||||
|
'after' => '</div>',
|
||||||
|
)
|
||||||
|
);
|
||||||
?>
|
?>
|
||||||
</div>
|
</div><!-- .entry-content -->
|
||||||
|
|
||||||
|
<footer class="entry-footer mt-5 pt-4 border-top mx-auto px-3" style="max-width: 680px;">
|
||||||
|
<div class="entry-tags d-flex flex-wrap gap-2">
|
||||||
|
<?php the_tags('<span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span><span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span>'); ?>
|
||||||
|
</div>
|
||||||
|
</footer><!-- .entry-footer -->
|
||||||
|
</article><!-- #post-<?php the_ID(); ?> -->
|
||||||
|
|
||||||
|
<div class="mx-auto px-3" style="max-width: 680px;">
|
||||||
|
<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-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-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>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// If comments are open or we have at least one comment, load up the comment template inside the constrained column.
|
||||||
|
if (comments_open() || get_comments_number()):
|
||||||
|
comments_template();
|
||||||
|
endif;
|
||||||
|
?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php endwhile; // End of the loop. ?>
|
<?php endwhile; // End of the loop. ?>
|
||||||
|
|||||||
11
style.css
11
style.css
@@ -302,17 +302,6 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --- 5. Article Details Custom Styles --- */
|
/* --- 5. Article Details Custom Styles --- */
|
||||||
.article-hero-image {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.article-hero-image {
|
|
||||||
width: calc(100% + 20%);
|
|
||||||
margin-left: -10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-thumbnail {
|
.post-nav-thumbnail {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
|||||||
Reference in New Issue
Block a user