Bootstrap News: Image Modifciation

Question

I want to improve the design of my website (https://pixelbay.net/). Rather than altering the image myself via Gimp every time I want to post, one feature I want to add is that the main category displays in the corner of the featured image. I basically want something similar to what the CoverNews theme provides, (or the Bootstrap News featured section) but I want to remain on the Bootstrap News theme.

How would I manage something like this, is there a plugin or is this only able to be done via HTML / CSS? What would I search for to learn how to add this feature if it is that way?

Answer 1

You would have to add the category via PHP on top of the image.

First find the PHP template(s) where your page is rendered. This could be archive.php for the overview. For single posts this is usually single.php, or content-single-post.php. It depends on your theme.

Then you find where the post thumbnail is being rendered, and you add some HTML markup, with the right CSS styles, so that you can place text on top of the image. And then you add the php code for printing the category. For instance:

HTML:

<div class="post-thumbnail">
  <?php the_post_thumbnail(); ?>
  <span class="image-overlay"><?php the_category(); ?></span>
</div>

CSS:

.post-thumbnail {
  position: relative;
}

.image-overlay {
  position absolute;
  top: 10px
  right: 10px;
}

The WordPress Codex is a great place to start learning how to theme in WordPress.