Featured image

The only place Coraline displays featured images is in the header area. If you upload a featured image that meets a certain minimum size – 990px by 400px high, as I mentioned in your other thread a while back – that featured image will be displayed as a custom header on the individual page or post. This featured image would be displayed instead of the default randomizing headers that it looks like you’ve set up under Appearance > Header.

If you’re looking to display featured images in another location in your theme, I try to could help point you in the right direction by using a child theme with some theme edits. Let me know what you had in mind.

I’m totally embarrassed that you’ve had to repeat yourself. So so sorry. I went thru the process, didn’t have success, then was sidetracked. So, I’m back to “git r dun” this time!

Yes, I’m wanting the featured image to be instead of the random images in the header. I worked thru the process again, double checking everything and reloading the image resized to 990×400 and I’m still not having success. https://driftlessprairies.org/?page_id=5853

Thanks for the help!

No worries!

I’m not sure why your page isn’t picking up the featured image if it meets the minimum size requirements.

I just tested on my end, setting the images to randomize under Appearance > Header, and setting a specific featured image to one specific page. That specific page showed the test image, while the images randomized everywhere else.

Would you be able to provide a link to the image you’re trying to set as the featured image on that page so I can take a look at it directly? Maybe it’ll provide some clues. Thanks!

Is this the link you’re wanting: https://driftlessprairies.org/wp-admin/post.php?post=5853&action=edit

What I mean is a a direct link to the image itself, which you’ll find in the Media Library at the top right, in the File URL field. For example:

The path should start with https:// and end with the image extension, likely jpg or png.

https://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-13-1featpic-sized.jpg

As I was looking for this, I notice the pic size is 533×400. I have no idea how that happens when I specifically sized it to 990×400. Could that be the problem? If so, how can I make the sizing “stick”?

Yes, that’s the problem – the image doesn’t meet the minimum size.

How are you doing the resizing? I recommend using an image-editing program outside of WordPress – here’s an article that lists a few programs you might want to try:
https://webtrainingwheels.com/image-editing-tools-web-wordpress/

Just a heads-up that if you try to stretch out that image to 990 x 400 it will look completely distorted, so I recommend trying to find a wider image to work with – you’ll get much better results.

OK– figured it out so I can be certain I get the 990 x400 size!! I’m gonna work on this tomorrow and hopefully will have it “mastered”!!! Again, many thanks!!

Whoopsy — still distorted. https://driftlessprairies.org/?page_id=5853

I’m not understanding how to find a “wider” image than one taken as a landscape. I’m not understanding why a cropped and resized image would appear distorted here when it doesn’t in my files. Is this a Lightroom question?

The image is distorted because the aspect ratio between the height and width isn’t being preserved when you are resizing the image: you’re telling the image to stretch without keeping the relationship between the height and width intact.

Most image-editing programs have an option to “constrain proportions” or something similar when you resize an image. You want to make sure that option is selected so the height and width ratio doesn’t get distorted.

Given that your original image is really small, it may also appear pixillated when you stretch it out, even if you preserve the height and width ratio, which is why I suggested you try to find an image that’s larger to begin with.

I’m so sorry this isn’t working and is taking so much of your time. It’s definitely something quirky with WordPress. The picture was originally 4000×1616 so I was a substantial size. It this isn’t large, then what would be considered a large picture? When I cropped it, I did constrain proportions.

The photo is not distorted or pixillated in the library: https://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-14featpic.jpg

It’s only distorted when it’s on the website. https://driftlessprairies.org/?page_id=5853

I tried another photo, originally sized 5184×3456. Still the same results.
Here’s the link to the media: https://driftlessprairies.org/wp-content/uploads/2014/02/IMG_6394featpic.jpg
And the link to the webpage:https://driftlessprairies.org/?page_id=5923

There is definitely something wrong. I’m following all the steps and using the correction dimensions. The only time the pic is distorted is when it’s on the website.

Then I wondered if there was something with the CSS entry I did. I went to the CSS Stylsheet Editor (is this the right place to have put it?) and have checked the entry:
#branding img {
width: 990px;
height: 400px !important;
}
I keep telling myself….we will prevail, we will prevail!

The image set as the header on the page we’re looking at seems to be 990×180:

https://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-14featpic-990×180.jpg

It’s being distorted because it’s being stretched out vertically to 400px high.

Could you try removing the featured image and reuploading/resetting the larger one as the featured image for that page again? Perhaps give it a really distinctive filename so you can select the right one more easily. perfect-bees.jpg? ??

I’m not sure what you mean by the right one. I’ve been deleting them from the Media Library each time and reuploading them each time so I could recheck the dimensions and I’ve even picked a different photo, thinking it would be a clean start. I did give it the name you suggested but that doesn’t change any of the settings. I see now where the 990×180 is showing up — I had not clicked on the photo once it was on the site to see that. When in the photo edit software, it shows 990×400 and in the Media Library is shows 990×400 but once it’s uploaded as the Feature Pic, it becomes 990×180. Somewhere between the Media Library, which shows it at 990×400 it gets changed to 990×180. How could this be?

I went checking on things and see that the header image is supposed to be 990×180. At least now I know where the 990×180 comes from. What’s the possibility that the designated size for the header as become mixed up with the featured pic sizing in the code?? Again, I don’t know code so I’m just throwing out thoughts.

I’m not sure why this is happening, and why only on this one page – it’s strange indeed.

As a test, could you try creating a brand new page, and try uploading the same bee photo as featured image there, so I can have a look?

For comparison, here’s what the page source looks like for your About page, where the image is OK:

<div id="branding">
<a href="https://driftlessprairies.org/">
<img src="https://driftlessprairies.org/wp-content/uploads/2013/07/cropped-IM003632.jpg" width="990" height="383" alt="" /></a>
</div><!-- #branding -->

And here it is for the bee page:

<div id="branding">
<a href="https://driftlessprairies.org/">
<img width="990" height="180" src="https://driftlessprairies.org/wp-content/uploads/2014/02/Perfect-bees-990x180.jpg" class="attachment-post-thumbnail wp-post-image" alt="Perfect bees" /></a>
</div><!-- #branding -->

You see how the height and width parameters are being added right on the img tag?

width="990" height="180"

I’m not sure where that’s coming from, and why only on this one page.

Let’s see what happens when you do the test I mentioned above!