Wordpress Blog Main Page CSS Issue

1
votes

I'm trying to set blog post featured image size to be consistent on the main blog page.

I tweaked this code:

HTML:

<div class="featured-image-excerpt">
  <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png" alt="infographic-7-blog-post" srcset="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png 2480w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-98x300.png 98w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-768x2341.png 768w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-336x1024.png 336w" sizes="(max-width: 2480px) 100vw, 2480px" width="2480" height="7558">
</div>

CSS

.attachment-post-thumbnail {
    height: 460px;
    width: 100%;
}

But now, as you can see from visiting the page, the infographic featured image gets squished on the main blog page.

What I'd like to do is have the image cut-off at 460px, not for it to get squished to fit into 460px (for the main blog page). In other words, the featured image excerpt should be cut-off at 460px.

Why is this not working? What would?

Thank you in advance.

2
htmlcsswordpress

2 Answers

2
votes

A possible CSS only solution would be to set the dimensions you've given to the image to the wrapper div instead and set overflow: hidden; to cut off the image, e.g.:

.featured-image-excerpt {
    height: 460px;
    width: 100%;
    overflow: hidden;
}
.attachment-post-thumbnail {
    width: 100%;
}

With removing the height from your image rule it should work.

1
votes

Add a new image size in your functions.php file using the add_image_size function. In this case add the following code:

add_image_size( 'custom-size', 240, 180, true );

This will set an image size of 240x180 and crop the image to size. Giving it a name 'custom-size'.

To then use this in your page you would do this:

<div class="featured-image-excerpt">
<?php the_post_thumbnail('custom-size'); ?>
</div>

You may also need to regenerate all your thumbnails, you can do this using one of the many plugins available.