By default, the Divi Theme shows featured images at the top of posts, just after the post title. Here's how to have the featured images fill the full content width, above the post title (and sidebar).
First, we can put the image into position with the following CSS:
body.single article.has-post-thumbnail > img:nth-of-type(1),
body.single article.has-post-thumbnail .et_post_meta_wrapper > img:nth-of-type(1) {
position:absolute; left:0; top:0;
}Related Post: Adding CSS to the Divi Theme
All that remains to be done is to move the post title and content, and the sidebar, below the image. We can do this by setting a top-margin on the content-area element, which is equal to the height of the featured image. Rather than try to do this in CSS, a far easier solution is to do it using jQuery, which lets us easily adjust the margin as the image height changes between posts and on browser resizes. Here's the jQuery code:
<script>
jQuery(function($){
var featured = $('body.single article.has-post-thumbnail .et_post_meta_wrapper img:nth-of-type(1)');
if (featured.length) {
adjust_margin();
$(window).resize(function(){ adjust_margin(); });
}
function adjust_margin() {
$('#content-area').css('margin-top', featured.height());
}
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Hey I have the booster, I clicked on the 'Make featured images as wide as the content area' but it makes the image worse, it was displaying the image as 1080px but the site is 1366px. It was cropping a section of the image on the left and right, but after clicking to make as wide as content it crops the image massively to a small box set to the absolute left with no margins like the rest of the site. Does this function needs an update? Im running everything on the latest versions, with php varibles all massive out on 7.3. :)
Hi Brian,
This feature was really designed for pages with sidebars. The idea is that the featured image is moved up and both the post content and sidebar are pushed down. This allows the featured image to be placed above both and to be enlarged to be as wide as the full-width of the content area. I've just checked and it still seems to be working correctly on pages with a sidebar.
However, in your case you are using a full-width post layout. The featured images here are already full-width, so the feature above doesn't really apply. It looks like it is interfering with the full-width page – I'll try and get this sorted out (probably by disabling it on the full-width pages entirely, for the reason mentioned above). In the meantime, I'd suggest keeping it disabled on your site – I don't think it's actually what you need.
Am I right in thinking the main problem you're trying to solve is the cropping of the images to 1080px, and hence the loss of some of the left and right of the image? I think this is caused by the issue I cover in this post:
https://divibooster.com/stop-divi-from-cropping-feature-post-heights/
There's a corresponding Divi Booster feature, at "Divi > Divi Booster > Posts > Prevent featured post height cropping", however, I'm not 100% whether it will work in your case. The feature was designed to stop cropping of the height, rather than the width. I think though, if you use the manual method described in the post and change the part of the code that reads "$sizes['1080×9998']" to something like "$sizes['2000×9998']" that should be sufficient to deal with the cropping in your case (basically replace the "1080" with something larger than your image widths).
I hope that helps, but let me know if not, or if I've misunderstood what you're trying to do. Thanks!
Hello Dan,
thanks a lot but as I'm reading this in 2017 I wonder if those codes still work with the new version of Divi 3.0?
Hi Diana, it's still working with the latest version of Divi (currently v3.0.40) :) Let me know if you have any trouble with it, though.
I used the feature: Make featured images as wide as the content area – it blows up the page and now unchecking this option does not undo this feature. How can I reset?
Hi Ina, I'm sorry to hear this. Once you've unchecked the option and saved, Divi Booster will have removed the offending code. However, if you have caching enabled, it may be that an old version of the Divi Booster style file is being shown. The solution in this case is to clear your site's caches. If you have a caching plugin installed, it should have an option to clear its cache. You may also need to clear your browser history. This post explains the process of clearing your caches in a bit more detail:
https://divibooster.com/divi-booster-and-caching/
Also, if possible, could you to send me a link to the page you're working on so that I can take a look at why the feature wasn't working (you can leave the feature disabled for this)?
Hi,
just tried that but isn't working for me. Is it possible soemthign changed about how divi handles the featured image?
The script for the footer works, but the image stay under the Post title.
Thanks for all your awesome advice!
Hey Chris, a while ago Divi did indeed make a change. I updated my plugin with a fix, but it looks like I forgot to update this post. I've just updated the CSS above to include the fix.
If it's still not working for you after that, perhaps you can send me a link to your site so I can take a look and see if I can spot the problem?