I can add support for the extra-wide image alignment in the Gutenberg editor to make this feature available. The only downside is that you’ll have to set this alignment for each image.
To automatically expand all images wider than the post content, something like this should work well:
@media all and (min-width: 1000px) {
.post-content .wp-block-image {
position: relative;
left: -10%;
width: 120%;
max-width: 1400px;
}
}
Thanks for your quick reply. I actually do want to set it manually for each image as usually I would not want the image to be wider than the text, only sometimes when the image is important or requires more attention.
in this example:
https://mevusas.com/?p=2206
I’ve changed the layout of the post to be “no side bars” but the image cannot be wider than the text regardless of the additional CSS settings. also once I change it to no sidebars the text is not centered anymore.
Is there a way to have the text centered and one column wide while some specifically chosen images are full-width?
thanks!
Okay in that case, try using this revised snippet instead:
@media all and (min-width: 1000px) {
.post-content .extra-wide-image {
position: relative;
left: -10%;
width: 120%;
max-width: 1400px;
}
}
Then when you click on an image in the editor, open the Advanced section and add a class named “extra-wide-image” like this: https://screenshot.competethemes.com/4guJ9gqr
That will allow you to make certain images wider than normal.
Thanks a lot, it worked. but a follow up to this one – this is possibly due something I have changed with a custom CSS but how can I re-center the posts when I use the no sidebars layout?
Great!
Please try adding this CSS for centering the posts and let me know how it looks:
@media all and (min-width: 50em) {
.layout-no-sidebar.single-post .main {
margin-right: 25%;
}
}
Thanks a lot for all the answers.
You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.
