Fix layout for single article images and style comments section

This commit is contained in:
Adolfo Reyna
2026-03-13 00:18:20 -04:00
parent a705a2a33e
commit 78a94fb2d2
3 changed files with 146 additions and 56 deletions

View File

@@ -6,29 +6,32 @@
get_header(); ?>
<main id="primary" class="site-main container my-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<?php
while (have_posts()):
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header text-center mb-5">
<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
<?php echo get_the_category_list(', '); ?>
<span class="mx-2">•</span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
</header>
<?php
while (have_posts()):
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header text-center mb-5">
<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
<?php echo get_the_category_list(', '); ?>
<span class="mx-2">•</span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
</header>
<?php if (has_post_thumbnail()): ?>
<div class="post-thumbnail mb-5">
<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
</div>
<?php endif; ?>
<?php if (has_post_thumbnail()): ?>
<div class="post-thumbnail-full mb-5">
<?php the_post_thumbnail('full', array(
'class' => 'img-fluid rounded shadow-sm w-100',
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
)); ?>
</div>
<?php endif; ?>
<div class="entry-content fs-5 lh-lg font-serif">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="entry-content fs-5 lh-lg font-sans text-dark">
<?php
the_content();
@@ -46,28 +49,28 @@ get_header(); ?>
<?php the_tags('<span class="badge bg-light text-dark text-decoration-none me-2 p-2">Related: ', '</span><span class="badge bg-light text-dark text-decoration-none p-2">', '</span>'); ?>
</div>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
</article><!-- #post-<?php the_ID(); ?> -->
<nav class="navigation post-navigation mt-5" 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 text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
</div>
<div class="col-sm-6 text-end">
<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
</div>
</div>
</nav>
<nav class="navigation post-navigation mt-5" 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 text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
</div>
<div class="col-sm-6 text-end">
<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
</div>
</div>
</nav>
<?php
// If comments are open or we have at least one comment, load up the comment template.
if (comments_open() || get_comments_number()):
comments_template();
endif;
<?php
// If comments are open or we have at least one comment, load up the comment template.
if (comments_open() || get_comments_number()):
comments_template();
endif;
endwhile; // End of the loop.
?>
</div>
endwhile; // End of the loop.
?>
</div>
</div>
</main><!-- #main -->