css - Bootstrap News: Image Modifciation

admin管理员组

文章数量:1130349

I want to improve the design of my website (/). 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?

I want to improve the design of my website (https://pixelbay/). 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?

• css
• html
• twitter-bootstrap
• design

Share Improve this question asked Oct 21, 2018 at 10:17 Gabriel Stanford-ReisingerGabriel Stanford-Reisinger 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

I want to improve the design of my website (/). 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?

I want to improve the design of my website (https://pixelbay/). 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?

• css
• html
• twitter-bootstrap
• design

Share Improve this question asked Oct 21, 2018 at 10:17 Gabriel Stanford-ReisingerGabriel Stanford-Reisinger 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： cssBootstrap News Image Modifciation