Full width images are a sweet new feature that Gutenberg offers to WordPress theme developers. In order to enable these in your theme, it takes just a few lines of code.
Problem #1
By default, the Gutenberg Image Block only has the three classic alignment options: left-aligned, centered, and right-aligned.
- Gutenberg Default Image Alignment Options
Enabling Wide Images in the Gutenberg Editor
First, a bit of PHP. Add this to your theme’s functions.php, or wherever else you are adding your add_theme_support()
functions.
<?php | |
/** | |
* Add Theme Support for wide and full-width images. | |
* | |
* Add this to your theme's functions.php, or wherever else | |
* you are adding your add_theme_support() functions. | |
* | |
* @action after_setup_theme | |
*/ | |
function jr3_theme_setup() { | |
add_theme_support( 'align-wide' ); | |
} | |
add_action( 'after_setup_theme', 'jr3_theme_setup' ); |
Now, you can find two new icons on your Image Gutenberg Block, wide-align, and full-width.
When one of these options is selected, it will display correctly in the editor. If you select wide-align, the image gets wider, and if you select full-width, the image fills the editor horizontally.
Wide Image Previews in the Gutenberg Editor
- A wide image in the Gutenberg Editor
- A full-width image in the Gutenberg Editor
Problem #2
There’s just one issue: Although WordPress adds special classes to the image markup, this doesn’t affect your actual theme styles.
- An unstyled full-width image in the Theme.
The Solution
To solve this, add your own CSS. Here’s a snippet I came up with:
.alignwide { | |
/* Set these margins to work with your own theme. */ | |
margin-left: -80px; | |
margin-right: -80px; | |
max-width: 100vw; | |
} | |
.alignfull { | |
margin-left: calc(-100vw / 2 + 100% / 2); | |
margin-right: calc(-100vw / 2 + 100% / 2); | |
max-width: 100vw; | |
} | |
.alignfull img { | |
width: 100vw; | |
} |
A few notes about the CSS:
calc()
tells the browser to calculate a value (usually) based on the screen size.vw
refers to “viewport width,” or screen width.
The Result
After the styles are applied:
- A wide-aligned image in the theme after adding the CSS.
- A full-width image in the theme after adding the CSS.
So, with less than 20 lines of code, you can add this powerful and attractive feature to your themes.