Add image to category on blog entries

  • Resolved sami13

    (@sami13)


    4 years, 8 months ago

    Hi there,
    I created a page where several posts of different categories are displayed. To distinguish them more easily I wanted to add an image to each category.
    So every post of category 1 should get a certain image, and every post of category 2 a different one.

    Important: I’m not talking about the single.php pages, I’d like to add the images to every blog entry in index.php.

    Does anyone got a clue how to do this? I’m new to php and tried my best, but I’ve got absolutly no idea.

    Thanks in advance!

    Edit:
    I think it would be fine if I knew how to write a loop that checks for the category of each post and then echos a certain image. Something like
    if (is category News) {
    echo image }
    …
    Would something like that be possible?

    • This topic was modified 4 years, 8 months ago by sami13.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    4 years, 8 months ago

    You could do what you suggest.

    is_category is for category archive pages: https://developer.wordpress.org/reference/functions/is_category/

    You could do this on a generalized category archive template or create specific templates for each category: https://codex.wordpress.org/Category_Templates

    If you want category images on a general posts page, where posts of different categories are displayed, you’d need to get the array of categories assigned to each post: https://developer.wordpress.org/reference/functions/get_the_category/

    I’ve done similar things. Using the Advanced Custom Fields plugin, I added a custom field to categories, “cat_image”, and modified the loop that displays posts (in a child theme) to display those images for each category.

    Thread Starter sami13

    (@sami13)

    4 years, 8 months ago

    @sterndata thanks for your advice! Could you explain a little bit further how you modified the loop to display your acf field?
    ‘Cause I actually used the same plugin but I couln’t get it into a loop.. 

    $term = get_queried_object();
$image = get_field('img', $term);
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

    I tried this.. Works fine when I tried to get the category of a page, but it wouldn’t work if I tried to get the category of a post.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    4 years, 8 months ago

    Pages do not have categories, only posts.

    Thread Starter sami13

    (@sami13)

    4 years, 8 months ago

    You’re right there sorry. A category.php does only show posts of a certain category thats what I meant. The code works fine if I write it in my category.php file. But not if I try it on a singular.php or if I try to put it into a loop where the title, content and meta of the post are being put together.
    Do you know why?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    4 years, 8 months ago

    The logic is something like (*SOMETHING LIKE*, not exact code):

    while( have_posts() ) {
   the_post();
   $cats = get_the_category();
   if( !is_empty( $cats ) ) {
      $cat_id = $cats[0]->term_id;
      $img = get_field( 'img', $cat_id ); // not sure about what the 2nd param should be here -- check ACF docs
      echo '<img class="cat_image" src="' . $img['url'] . '">';
      }
   // and the rest of the stuff with title, link, etc goes here
   }
    Thread Starter sami13

    (@sami13)

    4 years, 8 months ago

    That worked pretty well, thank you for your help.

    If anyone is interested, this does the job:

    $cats = get_the_category();
                $cat_id = $cats[0]->term_id;
                $img = get_field( 'img', 'term_'.$cat_id );
                echo '<img id="cat_image" src="' . $img['url'] . '">';
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add image to category on blog entries’ is closed to new replies.