Modify featured image size (only) on posts

  • Unknown's avatar
    kazeatari · Member ·

    Hi there. I really hope someone here can help me.

    My problem is this. I’ve modified Motif’s main column from 705px to 800px, but featured images on posts are still the same size (705px).
    It’s not a browser problem.
    I posted just a few featured images on posts (a lot on full page templates), so I thought I could just remove them, updated, re-set them one by one, but it doesn’t work.
    Media width in customize is set on 770px, so it has nothing to do with this issue, I guess.
    With Firefox’s inspect element I can see some HTML that set the image to w=705 (and crop=1, which I’d like to remove), but in the CSS I just have a max-width:100%.
    I have no idea how should I modify the CSS to make it look how I want it, please help me.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    madeincosmos · Member ·

    Hi there, the following code will set the width of all feature images to 800px:

    .post .entry-thumbnail img {
    width: 800px;
    height: auto;
}
  • Unknown's avatar
    kazeatari · Member ·

    Thank you very much, you made my day!

  • Unknown's avatar
    kazeatari · Member ·

    If I may ask again… How can I ensure the featured image is centered when it’s smaller than 800px and it’s not cropped when it’s bigger?

  • Unknown's avatar
    madeincosmos · Member ·

    Hi,

    I checked your blog again and I am afraid there can be a small problem to achieve the result you want. All images bigger than 800px are scaled down to fit in the thumbnail area. However, it may not be possible to display smaller images centered at the same time. Here is why.

    The template you chose doesn’t use original pictures for feature images, because they would take too much time to load. Instead, it asks the server for 705px version of each image, the server resizes them and sends back the smaller versions. This way the whole page works much faster and takes less time to load.

    Now when we want to display those images in 800px, the template takes those 705px thumbnails and scales them up to 800px. The difference between 705 and 800 is not that big, so the output quality is still pretty good. But when I wrote the CSS to scale down the images bigger than 800px and center those which are smaller, all thumbnails were still 705px wide, because this is the version sent by the WordPress server.

    Unfortunately, we cannot modify the template logic and make it ask for bigger images. I think in the current situation there are three solutions:

    1. Leave all images scaled to 800px (and remember not to set very small thumbnail images, as they could look blurry after expanding to 800px).

    2. Leave big images at 705px with a small margin added on each side – here is some example how it would look like: http://pasteboard.co/1TztpHoE.png

    This way if the image is smaller than 705px, we could just leave it centered without scaling.

    If you are happy with such a solution, try the code below:

    .post .entry-thumbnail {
    text-align: center;
}

.post .entry-thumbnail img {
    width: auto;
    height: auto;
    max-width: 800px;

    display: inline-block;
    margin-top: 45px;
}

    3. Bring back the main column size to 705px.

    I hope you find this helpful. I know the whole topic may be quite complicated, so please let me know if I you still have any questions.

  • Unknown's avatar
    kazeatari · Member ·

    Hi madeincosmos

    I think I’ll go with the first solution, because I really like how pictures are slightly bigger than text column.
    Not exactly what I hoped for, but at least now that I know how the system works I feel I can make better posts.

    Thank you very much for your time and your advices.

  • The topic ‘Modify featured image size (only) on posts’ is closed to new replies.