How do I add a different blog post image for my homepage?

Maybe try this instead:

.home .entry p:first-of-type {
   max-height: 375px;
   overflow: hidden;
}

That works a lot better but I think this is the wrong direction. I want to be able to control the pictures I want to be 600X375 and not have my whole site get changed. And also I want to be able to crop which section gets to be 600X375.

If you don’t know anything else I appreciate the help.

A temporary solution would be to keep targeting the post classes so that the CSS applies to certain posts. Not your whole website.

Each post on the Home page is contained in a <div> element that has a unique class. The Audrey Middleton post has a unique class of “post-4262”. You can use that in CSS like this:

.home .post-4262 .entry p:first-of-type {
   max-height: 375px;
   overflow: hidden;
}

This means you can target it in CSS and not affect other posts on the Home page.

Then for any other posts that you want to target, you find out the unique class and modify your CSS to include it. For example, the next post about “Big Brother 17 Houseguests Revealed” has the unique class of “post-4081”, so you’d use this code instead:

.home .post-4262 .entry p:first-of-type,
.home .post-4081 .entry p:first-of-type {
   max-height: 375px;
   overflow: hidden;
}

You can find out these classes in the Chrome browser really easily, just right click on the post general area and select “Inspect element”. Then you are shown a toolbar with the emulated HTML of the page: https://snag.gy/ITMhX.jpg

That’s actually very helpful. But my question is for some pics I want the 375 height to start a little lower/height than others. Anyway to incorporate that into the code as well? Or is that too complicated and not possible? Thanks again.

Is this really the most effective way to do this? Does the “Manual Image Crop” just not work with my theme? I see that a 600×375 file is made but not sure its that’s aromatic via the functions line or via that plugin.

The regenerate thumbnails plugin will not create the thumbnail, it’ll just replicate the process of re-uploading your images into the Media Library. So, the 600×375 file is made by your functions line.

After 3 days of messing with this I’ve officially gone insane j/k lol Would you know how to modify the code:

.home .post-4262 .entry p:first-of-type,
.home .post-4081 .entry p:first-of-type {
   max-height: 375px;
   overflow: hidden;
}

to have it start the 375 height like 40-50 pixels from the top by post number?

Or would you know just how to start the 375 height like 40-50 pixels from the top by all post numbers that I list? This way it’s not by individual post but simpler.

I guess not many people want to do what I’m doing or else wordpress would make it easier I would assume. Thanks again Andrew.

Do you mean you want to create a gap above the image? If so, try:

.home .post-4262 .entry p:first-of-type,
.home .post-4081 .entry p:first-of-type {
   margin-top: 40px;
   max-height: 375px;
   overflow: hidden;
}

Not a gap in the spacing. If you look at the image itself I want to cut half the space above the persons head since the images has too much blue space. If that makes sense. So basically have the 375 height in the image not start from of the top of the image but a little bit lower.

Try using this code instead:

.home .post-4262 .entry p:first-of-type,
.home .post-4081 .entry p:first-of-type {
   margin-top: -40px;
   max-height: 375px;
   overflow: hidden;
   position: relative;
   border-top: 40px solid white;
}

.home .post-4262 .entry p:first-of-type img,
.home .post-4081 .entry p:first-of-type img {
   margin-top: -40px;
}

Actually this instead:

.home .post-4262 .entry p:first-of-type,
.home .post-4081 .entry p:first-of-type {
   margin-top: -20px;
   max-height: 375px;
   overflow: hidden;
   position: relative;
   border-top: 40px solid white;
}

.home .post-4262 .entry p:first-of-type img,
.home .post-4081 .entry p:first-of-type img {
   margin-top: -40px;
}