[Resolved] Bigger featured image in fist post

[Carlos Paramio]

Tom, I need to give a bigger size to the featured image in the first post of the masonry

I have added the PHP you gave me to create a class for the first post but I’m unable to identify the featured image. This is as far as I have been able to reach:
.blog .first .post-image,
.archive .first .post-image {
width: 500px;
height: 500px;
}

With that I get a lot of empty space around the featured image but the image itself remains the size set in customizer

Thanks

[Carlos Paramio]

I can’t believe I finally made it working by myself with this code, is it right?

.blog .first .attachment-generate-blog {
	width: Auto;
	height: 500px;
}

[Carlos Paramio]

Unfortunately the image height is resized as set in the Customizer (150px) and then, after that I guess, it is enlarged to 300px (the original size of the JPG file), resulting in a pixelated image 🙁

Any ideas?
Thank you

[Tom]

Maybe try this:

.blog .first .post-image img,
.archive .first .post-image img {
      width: 500px;
      height: 500px;
}

[Carlos Paramio]

Same result, the featured image in the first post gets pixelated.

Oddly, when I set in Customizer the height for the featured images, it doesn’t work until I type Auto in the width box.
I mean, Auto is set by default and I can see it in grey colour. Then, I set e.g. 200px in height box, but nothing changes neither in preview nor saving changes.

I have to manually type Auto in the width box (it gets black colour) to make the featured images resized to the height I want.

I have tried deactivating the lightbox plugin with same result.

(I don’t know if this has something to do with the goal I want for the first featured image)

[Tom]

Setting the height to 500px in the CSS will cause the image to lose quality if it’s not the right aspect ratio. Removing the forced height will allow the image to adjust to it’s regular size (at 500px width) without losing quality.

You definitely shouldn’t have to type “Auto” into the size box – just leave it blank.

Let me know 🙂

[Carlos Paramio]

http://www.unedtalavera.es/aulas/aula-de-illescas

Hi again Tom,
Let’s try to sort out this one

Facts:
– I’m always using 300px height files for featured image
– I set “Auto” as “Post Image Width” and 150px as “Post Image Height”
– Everything is fine
– Then I add the CSS you gave me in this topic to set 300px (the original dimension) for the height of the featured image
– It makes the image higher (and wider) but the image gets pixelated
– You can view the same image in the same dimensions, not pixelated, in the complete view

As an aside note, I don’t seem to understand how “Post Image Width” and “Post Image Height” work in Customizer, because I’m obliged to write “Auto” in “Post Image Width” to make “Post Image Height” work

Thanks

[Tom]

Hi Carlos,

If you set the height to 150px, WP will resize the image to that height.

If you then force the height to 300px, you’ll lose considerable quality. If you want the images to be 300px height, I suggest setting that height in the Customizer.

For the “Auto” values – don’t actually write Auto, just leave it blank.

Let me know if that makes sense or not 🙂

[Carlos Paramio]

So there isnt’ any possibility to avoid WP resizing images before forcing it to be higher?

Our wishes were that the first post in the site had a bigger featured image, that’s the reason why I don’t set 300px in customizer.

The “Auto” values keep behaving weird: I delete both boxes in Customizes (“Auto” appears in grey, you know), saved changes.
Then I come back in Customizer to make all the blog feaured images to have a 150px height, so I write 150 down in the “Post Image Height” box, but no changes are made in any post.
Then, if I write “Auto” in the “Post Image Width” box, all the images get the desired 150px height.

Couldn’t it be a bug?
I must be doing something wrong or I’m not having something into account 🙁

[Tom]

Auto should appear in gray – just to let you know it will automatically calculate it.

I’ll have to look into that – the sizer might be wanting the width to be set to something. If you set it to an arbitrary number (9999), WordPress will ignore it and resize proportionally.

That being said, if you want the first post to have a different size, I would leave those fields untouched, then I would do this:

.blog .post:not(:first-child) .post-image img,
.archive .post:not(:first-child) .post-image img {
      height: 150px;
}

That’s some somewhat fancy CSS that will target all post images except for the first one, and will force the height to your value.

This way, the first post will stay at whatever you uploaded/have set.

Let me know if that does it or not 🙂

[Carlos Paramio]

Thanks Tom

So, I’ve deleted those fields in Customizer (of course they now appear as Auto in grey)

Then I’ve added that CSS but that made all the featured images to be 150px, including first one 🙁

By the way, all the images get the 150px height but they don’t have the width resized proportionally. Once again, I have added width: Auto; to the CSS and then they look fine.

To simplify, I don’t care too much about the Auto issue, just need the first-post featured image to be bigger.

I have offered my boss the Meta Slider plugin to give first post more presence, but he hasn’t liked that solution…

Thanks

[Tom]

Hmm, weird that the CSS didn’t affect the first post.

Is the site viewable at all?

[Carlos Paramio]

Yes, please come in at
http://www.unedtalavera.es/aulas/aula-de-illescas

[Tom]

Nice, you already have the firstpost class added to the post.

Try this now (as well as the other CSS):

.firstpost .post-image img {
    height: auto !important;
}

[Carlos Paramio]

Brilliant Tom, thank you very much! 🙂

[Author]

Posts