The "Image Full Width" block does not work correctly

Hey!

The theme doesn’t support fullwidth image blocks by default but we can add a few modifications to adjust it, without editing the single.php template. You can start by adding this code in the functions.php file, which should dynamically adjust the height of the fullwidth image container on window resize.

function ava_full_image_block_height()
{?>
    <script>
	(function($){
		var win = $(window);

		$(document).ready(function() {
			win.trigger("debouncedresize");
		});

		win.on("debouncedresize", function(){
			$('.wp-block-image.alignfull.size-large').each(function(){
				var imgh = $(this).find('img').height();
				$(this).height(imgh);
			});
		});
	})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'ava_full_image_block_height', 9999);

Then add this css to adjust the width of the image and make it fullwidth.

.wp-block-image.alignfull img, .wp-block-image.alignwide img {
    height: auto;
    width: 100vw;
    max-width: none;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

Let us know if this helps.

Cheers!
Ismael

Hi!

Thank you for the update.

Looks like the script ava_full_image_block_height is not working in your installation. Did you add it in the functions.php file? Please look for this line..

$('.wp-block-image.alignfull.size-large').each(function(){

.., then replace it with:

$('.wp-block-image.alignfull').each(function(){

It should work now.

Best regards,
Ismael

Hi,
To have the image not covering the content below, change your css position: absolute; to position: relative;

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike