0

I'm new to WP and I am not quite sure how to approach my goal - I'd like to make featured images in blog posts 1920px wide x 350px high that will become full width banner images at the top of the page.

How do I go about that?

Currently I am using pretty simple .css rules that simply position a background image at the top of the page below the navigation with text written over it - but I'd like that to be applied to all blog posts...

How would you tackle this?

Thanks for all direction...

1
  • Please provide more information, such as where exactly you want to show it (top of the page has a lot of meanings) and add some codes, if possible.
    – Johansson
    Commented Apr 1, 2017 at 17:04

2 Answers 2

0

You could start by having a look at Post Thumbnails and how to enable them for your theme. You will need this to enable the functionality of setting a featured image for your post. This page is great for learning lots about how Post Thumbnails in WordPress work, you should really read all of it.

You will then most likely want to add a new size for your "top banner thumbnails" by using add_image_size(). This helps you to define new image sizes, which WordPress generates when a file is uploaded. Images can be cropped or resized to fit your size. This takes care of having images which are 1920 x 350 pixels large.

Finally you will have to create some kind of markup, either for a background image or whatever, and will need to output your top banner image. Using get_the_post_thumbnail() or the_post_thumbnail_url() and passing your new image size as a parameter can help you with this.

0

You'd definitely want to follow @flomei's directions. I'd also like to add that you'll likely want to place your call to the_post_thumbnaill_url() in single.php or single-post.php to apply the changes to all posts.

Making a child theme will also be necessary in this case since you'll be editing template files and you don't want any theme updates to overwrite your changes.

Better yet, find a theme that has what you're looking for as a feature to save yourself the trouble of maintaining custom code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.