[Resolved] Bigger featured image in fist post

Home Forums Support Bigger featured image in fist post

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #103736
    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

    #103737
    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;
    }
    #103738
    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

    #103909
    Tom
    Lead Developer
    Lead Developer

    Maybe try this:

    .blog .first .post-image img,
    .archive .first .post-image img {
          width: 500px;
          height: 500px;
    }
    #104209
    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)

    #104220
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #111397
    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

    #111437
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #111724
    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 🙁

    #111858
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #112092
    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

    #112171
    Tom
    Lead Developer
    Lead Developer

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

    Is the site viewable at all?

    #112185
    Carlos Paramio
    #112188
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #112238
    Carlos Paramio

    Brilliant Tom, thank you very much! 🙂

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.