![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: block editor, full width
-
AuthorPosts
-
October 31, 2022 at 8:52 am #1370756
In my blog articles I use “Block Editor”.
How can I do to ensure that the images using the “Image Full Width” block are displayed correctly, ie across the entire width of the screen?Example:
Full-Width-ImageBest regards
Oriano-
This topic was modified 1 year, 10 months ago by
orianos.
October 31, 2022 at 11:55 am #1370775Hey orianos,
Are you using the default WordPress block editor to create your post? If so, then I guess you would have to find a full width block. We don’t provide support for that editor though, so it might be better if you post this question on a general WordPress support forum.
Best regards,
RikardOctober 31, 2022 at 12:46 pm #1370793Hi Rikard, thanks for answer
Are you using the default WordPress block editor to create your post? If
Yes, I use WordPress block editor to edit this post (see image)
We don’t provide support for that editor though, so it might be better if you post this question on a general WordPress support forum.
well … it’s not nice of you (kriesi) not to consider compatibility with “WordPress block editor” … :(
The Image Full Width block works correctly in almost all the themes I have used (both pro and free themes).
Enfold is my main theme (I’m using 11 licenses), and it’s a big handicap that important Blocks, like “Full Image” on blog Post, don’t work properly.
I can’t ask WordPress.org, to fix a problem that seems to me to be from Enfold :(I believe it is in Enfold’s interest to make this WordPress Block usable in Post.
Best regards
OrianoOctober 31, 2022 at 2:49 pm #1370811Hi,
Thanks for the update. What settings do we need to set in order to reproduce the problem you are seeing on your end?
Best regards,
RikardOctober 31, 2022 at 5:43 pm #1370830Hi Rikard
Please watch this video.
You will see how to add two images in a Post using the Block Editor.
The first image with “None” allignement,
the second image with “Full Width” allignement.Then if I view the page on Enfold, there is no difference between the two images :(
If instead I view the Post with a WordPress default theme, you can see that the two images are exactly as I edited them in the Post:
the first image is normal, the second is Full Width.I hope I have explained the problem :(
Best regards
OrianoOctober 31, 2022 at 7:47 pm #1370855October 31, 2022 at 8:15 pm #1370858Hi Rikard, thank you very much.
Hope this ticket can remain open, awaiting the response from your developers.
Best regards,
OrianoOctober 31, 2022 at 9:04 pm #1370861Hi,
Yes, we’ll keep you posted here once we have a solution for this problem.
Best regards,
RikardNovember 1, 2022 at 7:13 pm #1370948Hey!
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!
IsmaelNovember 1, 2022 at 10:52 pm #1370992Hi Ismael, thank for help.
I have installed your code on a demo site.
1) On this post, the image is with Image Block “Full width”.
2) On this post (a duplicate of the previous post), the image is with Image Block “None” allignement.
As you can see, the full width image overlaps the content that follows.Best regards
OrianoNovember 2, 2022 at 3:48 am #1371003Hi!
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,
IsmaelNovember 2, 2022 at 8:57 am #1371020Hi Ismael
your code for the “Block Image Full Wide” now seems to work correctly.
Thank you.Can I also ask you for the code to be able to use the “Block Image Align Width” correctly?
For the “Block Image AlignWidth” I inserted this css:
/* Align Width Image */ .wp-block-image.alignwide img, .wp-block-image.alignwide img { height: auto; width: 80vw; max-width: none; left: 50%; position: absolute; transform: translateX(-50%); }
This changes the size of the image, but does not eliminate the overlap with the content that follows the image :(
Please see this Post, where the first image is FullWidht, the second image is “Normal” and the third image is “AlignWidth”.
PS: I believe that allowing proper use of the WordPress Block Editor in blog posts can be very useful for Enfold Theme.
Best regards
OrianoNovember 6, 2022 at 6:16 pm #1371543Hi,
To have the image not covering the content below, change your css position: absolute; to position: relative;Best regards,
MikeNovember 6, 2022 at 6:27 pm #1371546Hi Mike, thanks for your help.
It seems to me that your code is working correctly 👍.
Now we can use the “Block Image Full Wide” and “Block Image AlignWidth” on the blog post edit with WordPress block editor.Thanks Enfold, thanks to all the support staff. 👏
Best regads
OrianoNovember 6, 2022 at 6:52 pm #1371550Hi,
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 -
This topic was modified 1 year, 10 months ago by
-
AuthorPosts
- The topic ‘The "Image Full Width" block does not work correctly’ is closed to new replies.