custom taxonomy - Display term picture of each post in a loop

admin管理员组

文章数量:1203458

I'm trying to solve a problem I have for many days. I'm posting it here in case some of you would know the answer.

• I want to display a grid of 9 posts on my homepage. Each of these posts has one custom taxonomy apply to them. It's their issue name.

• If one of the posts doesn't have a featured image, I want the issue image to appear. I added a field with ACF to be able to have a picture for my custom taxonomy.

Thanks in advance for your help.

François

<?php

$args = [
    "posts_per_page" => 9,
    "post_type" => "post",
    "post_status" => "publish",
    "order" => "ASC",
];
$query = new WP_Query($args);
if ($query->have_posts()): ?>

<section class="home-grid">

<?php while ($query->have_posts()):
    $query->the_post(); ?>

<div>

<div class="pb-3">

<?php if (has_post_thumbnail()): ?>

<a href="<?php the_permalink(); ?>">

<?php the_post_thumbnail("article-large"); ?>

</a>

<?php else:$terms = wp_get_post_terms($post->ID, "issues");

    foreach ($terms as $cat):

        $size = "article-large";

        $image_id = get_field("image_tag", $cat, false);
        $image = wp_get_attachment_image_src($image_id, $size);
        ?>


<img src="<?php echo $image[0]; ?>" />

<?php endforeach;endif; ?>

</div>

<div class="px-1">


<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

<div class="author-link">
<?php $confirm = get_field("other_type_of_byline"); ?>

<h4><?php the_field("other_type_of_byline"); ?></h4>

</div>

<div class="read-more"><a href="<?php the_permalink(); ?>">
<span class="text">read</span><span class="icon">
     <svg xmlns="; viewBox="0 0 32 32" style="width:24px;height:24px;margin-left:5px;fill:#F46767"><path d="M 21.1875 9.28125 L 19.78125 10.71875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 19.78125 21.28125 L 21.1875 22.71875 L 27.90625 16 Z"></path></svg>                   
</span></a></div>

</div>
</div>

<?php
endwhile; ?>


</section>
<?php endif;
wp_reset_postdata();

?>

I'm trying to solve a problem I have for many days. I'm posting it here in case some of you would know the answer.

• I want to display a grid of 9 posts on my homepage. Each of these posts has one custom taxonomy apply to them. It's their issue name.

• If one of the posts doesn't have a featured image, I want the issue image to appear. I added a field with ACF to be able to have a picture for my custom taxonomy.

Thanks in advance for your help.

François

<?php

$args = [
    "posts_per_page" => 9,
    "post_type" => "post",
    "post_status" => "publish",
    "order" => "ASC",
];
$query = new WP_Query($args);
if ($query->have_posts()): ?>

<section class="home-grid">

<?php while ($query->have_posts()):
    $query->the_post(); ?>

<div>

<div class="pb-3">

<?php if (has_post_thumbnail()): ?>

<a href="<?php the_permalink(); ?>">

<?php the_post_thumbnail("article-large"); ?>

</a>

<?php else:$terms = wp_get_post_terms($post->ID, "issues");

    foreach ($terms as $cat):

        $size = "article-large";

        $image_id = get_field("image_tag", $cat, false);
        $image = wp_get_attachment_image_src($image_id, $size);
        ?>


<img src="<?php echo $image[0]; ?>" />

<?php endforeach;endif; ?>

</div>

<div class="px-1">


<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

<div class="author-link">
<?php $confirm = get_field("other_type_of_byline"); ?>

<h4><?php the_field("other_type_of_byline"); ?></h4>

</div>

<div class="read-more"><a href="<?php the_permalink(); ?>">
<span class="text">read</span><span class="icon">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width:24px;height:24px;margin-left:5px;fill:#F46767"><path d="M 21.1875 9.28125 L 19.78125 10.71875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 19.78125 21.28125 L 21.1875 22.71875 L 27.90625 16 Z"></path></svg>                   
</span></a></div>

</div>
</div>

<?php
endwhile; ?>


</section>
<?php endif;
wp_reset_postdata();

?>

• custom-taxonomy
• post-thumbnails
• terms

Share Improve this question edited Mar 10, 2022 at 17:07 François asked Mar 10, 2022 at 15:56 FrançoisFrançois 2744 bronze badges 3

• can you fix the indenting of your code? It makes it very difficult to work with or read – Tom J Nowell ♦ Commented Mar 10, 2022 at 16:16
• @TomJNowell Thanks for the comment. I just changed it. – François Commented Mar 10, 2022 at 16:20
• I'm not seeing fixed indenting, it looks like you removed all indenting and flattened it, which is also difficult to read as now all the structure is hidden, take a look at codehs.gitbooks.io/introcs/content/Programming-with-Karel/… – Tom J Nowell ♦ Commented Mar 10, 2022 at 16:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

So, I finally found the solution. Maybe there are better ways to arrive to the same result, but at least, it works.

Here it goes:

<?php       

    $terms = get_the_terms( $post->ID , 'issues' );
    
    foreach ($terms as $key) :
            
        $size = "article-small";

        $image_id = get_field("image_tag", $key, false);
        $image = wp_get_attachment_image_src($image_id, $size);

        ?>


<img src="<?php echo $image[0]; ?>" />

<?php endforeach;  ?>

本文标签： custom taxonomyDisplay term picture of each post in a loop