Increase width of featured image on posts

Hi there,

You can use a block element – hook to insert the featured image outside the content container, and disable the default one from the theme.

Can I have a look at one of your single post?

Let me know 🙂

Hi Neal,

In order to do that, first go to Customize > Layout > Blog. Then under Featured Images, click the Posts tab and uncheck the Display Featured Images option.

Then create a new Hook element in Appearance > Elements, and inside the content area add this code:

<?php if ( is_single() ) : 
           if ( has_post_thumbnail() ) { ?>
               <div class="featured-image-after-header">
                   <?php the_post_thumbnail(); ?>
               </div>
           <?php }
endif; ?>

Set the Hook to generate_after_header, check the Execute PHP option and under Display Rules, set Location to Posts > All posts.

Lastly go to Customize > Additional CSS, add this:

.featured-image-after-header {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

.featured-image-after-header img { 
    width: 100%; 
}

Do you have any security plugins activated? If so, try deactivating them first and then retry.

Okay, so the constant may be added to the wp-config.php file. Can you ask your hosting if they can temporarily remove this line from there, if possible?
define( 'DISALLOW_FILE_EDIT', true );

No problem, just let us know 🙂

Hi Neal,

Have you heard back from the hosting support?

The layout is actually easy to achieve if you can use Block Element, but since you’re not using the block editor, we have to approach this in an alternative way as I suggested earlier.