WordPress: adding image size wider than content width

If you want to insert in a post an image that is wider than entry’s width, you’ll find below tips on how to register a new image size and how to style css.

Some images, like infographics are meant to be viewed in close up. If the WordPress theme you are using can fit a larger image (there is space around entry area), it’s better to do that than force users to click on the image to enlarge it. I personally prefer to save the click for another post.

You can check what is your theme’s content width by opening functions.php and finding the piece of code like this:

global $content_width;
if( ! isset( $content_width ) ) $content_width = 600;

The Large image size in Settings / Media Settings usually matches the content width set in functions file.

There are two ways to add image size wider than the one currently set as Large:

• register wider image (let’s call it X-Large), and keep the content width intact (with some issues described below),
• increase content width to X-Large and register a new size of the current Large.

Let’s say your content width is set to 600px (width of Large), and you want to add image that is 900px by 900px.

Register image size wider than content width

First, double-check if your theme supports post thumbnails. Find in the functions.php:

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );  
}

If it’s there, to register a new image size, just add this code (and remember about this basic rule):

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'x-large', 900, 9999 );
}

function new_image_sizes($sizes) {
        $addsizes = array( "x-large" => __( "X-Large") );
        $newsizes = array_merge($sizes, $addsizes);
        return $newsizes;
}
add_filter('image_size_names_choose', 'new_image_sizes');

The width is set to 900px and height is unlimited.

If your theme does not support post thumbnails yet, add both codes from above to functions.php, so it will look like this:

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );  
}

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'x-large', 900, 9999 );
}

function new_image_sizes($sizes) {
        $addsizes = array( "x-large" => __( "X-Large") );
        $newsizes = array_merge($sizes, $addsizes);
        return $newsizes;
}
add_filter('image_size_names_choose', 'new_image_sizes');

Function new_image_sizes will let you choose X-Large size when uploading image to post via Add Media meta box.

In Add Media meta box WordPress won’t display the correct size of X-Large image in a drop down menu. It will show the dimensions of the Large image instead. Ignore it and insert the image in a post. You’ll see that its dimensions are correct. To check it out, inside img tag, at the end of the source file you should see -900×900.jpg.

WordPress apparently doesn’t assume the theme could use the image wider than set in $content_width. Therefore it inserts inside img width and height of the Large image. You’ll see width=”600″ height=”600″ here. You’ll have to remove them to let the image display in full width.

CSS styling

Let’s say you want the X-Large image to be displayed centrally. WordPress will apply a class specific to new image size. It will be size-x-large. You’ll find it inside class tag of img, which looks like that:

class="alignnone size-x-large wp-image-00000"

Open style.css in your theme’s directory and add styling:

.size-x-large {
	width:900px;
	margin-left:-150px;
}

If you are using a responsive theme, you may want to reduce the width of the image in smaller screens, For instance:

@media screen and (max-width : 960px) {
	.size-x-large {
		width:100%;
		margin-left:0;
	}
}

This approach is good when you use big-size images from time to time, as it requires to remove width and height every time after you insert the image.

Increase content width and register a smaller image size

If you plan to use bigger images heavily, you should consider rebuilding your theme in two steps.

1. Increase content width to fit wider image

First thing to do is to change $content_width = 600; to $content_width = 900;

It may result in you theme going crazy, so, again, do it on your test theme. You may need to apply new rules to img and/or alignnone classes in style.css to keep the post image width at 600px.

Plus some plugins, naming only Jetpack’s Tiled Gallery, use content width to adjust the size of the gallery. Once you increase $content_width, tiled galleries will fit 900px not 600px.

2. Register a smaller image size

When you change content width, X-Large becomes Large. Check it out in Dashboard / Settings / Media Settings.

Now, you can register a new image size with 600px width.

With this approach you won’t need any extra steps to insert images, both 900px and 600px, as the new size is smaller than current Large.

• • •

To test if a new image size is available in Add Media meta box, copy and paste functions.php and style.css files to your active theme. Just remember to make a backup of the active theme in case something goes wrong.

Other WordPress tips:

[pi-archive number=5 tag=”wordpress” ]