I looked at the posts linked on that page, and the featured image for each is 800×350 pixels.
The plugin intelligently modifies its behavior based on the size of the featured image–images smaller than your site’s “large” image setting (which is 1024 pixels wide by default) will not be displayed as a backstretch (medium.com) image, because they’ll be blurred and pixelated.
If you choose a larger image (larger than your site’s “large” image setting) for your featured image, the plugin will display it as a backstretch (medium.com) style image.
But what if I want to overstretch those images and then apply a css semi transparent black shadow on them just to make sure the pixellation does not appear while simultaneously serving my purpose?
Is there any way to over ride this behaviour?
Well, there is a filter available to relocate the large image. You’d add something like this to your functions file:
add_filter( 'display_featured_image_genesis_move_large_image', 'prefix_change_large_image_position', 10, 2 );
function prefix_change_large_image_position( $hook ) {
$hook = 'genesis_after_header';
return $hook;
}
Then you would need to do some CSS work to force the image to stretch, and then see what you can do to accomplish the other work you’re wanting.
The other option, which makes more sense to me, would be to use images that are slightly larger (if your “large” image setting is 1024px, you only need an image that is 1025px to get the new behavior). A final option, which I think is less good, would be to change your site’s “large” image setting, which would accomplish the same thing in the end.
How to change the large image setting? I don’t want to add new images to all 300+ of my posts!
In your admin, go to Settings > Media.
I made the large one to 799×349 pixels as I always use 800×350 pixel images, after doing this what more should I do to get that medium styled large featured image?
That should do it–the plugin just compares the width of your featured image to the width of the large image–if it’s larger, then it does the backstretch thing. If you are not seeing it after changing your settings, it may be due to CloudFlare.
I would not worry about changing the height on the large image setting–that’s not part of this computation.
Because of the way the backstretch effect works, I think you will still need to add some CSS, such as the example in the FAQ to set a max-height (in your case, 350px) on the .big-leader container.
I added the following code to my custom css
.big-leader {
max-height: 349px;
}
and disabled all caches, still no luck :/
At this point, if your images are larger than your “large” image setting for your site, they should be displaying as the backstretch image. I’ve used one of your images on a local test site, changed the Media settings, and it does behave as expected, so something else is going on, which I cannot diagnose from the front end of the site.
If you want to use my contact form and send me admin credentials so that I can look into the back end of your site, I may be able to offer better help from there.
