Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

The $content_width GLOBAL in WordPress effects many themes and even some plugins by limiting the size of images and embeds in posts, it is a requirement for themes submitted to wordpress.org.

It is set by using:

$content_width = 584; // Twenty Twelve example

If you insert a large image (default 1024x1024) into a post it results in:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

If instead you remove this global setting and insert the actual image size, set with add_image_size it results in:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

Removing the global and inserting large images, which is very common, often results in a saving of over 2x, in pages with multiple images I see hundreds of KB saved on page load.

Is using add_image_size and removing the ability to insert full size images not a better option?

ps. I wrote about it here with more accurate data

share|improve this question
1  
This sounds like something to bring up on the wp-hackers mailing list. –  eddiemoya Feb 20 '13 at 0:52

2 Answers 2

up vote 5 down vote accepted
+100

Keep in mind that the $content_width global is not only used for images, but also for embedded objects, such as video. So, any solution won't merely be a case of dropping use/support of $content_width itself.

Usually a Theme will constrain content-area images in a few ways:

  1. Large Image size: Defining $content_width something appropriate for the Theme design
  2. Original/Full Image size: Defining a CSS rule for #content img { max-width: XXX; height: auto; } to ensure that full-size images that get inserted don't break the layout
  3. Thumbnail Image size: Calling set_post_thumbnail_size() to define the Featured Image/Post Thumbnail default thumbnail size. (Note: I do not personally recommend using this method. Define custom image sizes specific to a given location for a featured image, and then call that custom size in the specific template location, via the_post_thumbnail( $size ).)

As you have discovered, because of the way WordPress selects with intermediate image size to use for any given image request, that request could result in a browser-scaled image.

Theme-Defined Values for Large Image

One option would be to redefine the settings for large image dimensions. (Proceed with caution. This is fine for your own site, but a publicly distributed Theme that messes with user configuration settings is... gray area at best.)

The large image dimension settings are stored as:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

So, you could set those values according to your $content_width value:

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(Of course, you'd want to put some failsafe/error-checking around this, as appropriate.)

Remove Option to Insert Full-Sized Images

If you simply want to prevent users from inserting full-size images (again: proceed with caution; this may be Plugin territory), you can filter 'image_size_names_choose':

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Again: you may want to add some sane failsafes here, as this filter is used in more than one place.

Define a custom image size for full-post-width images

Related to the previous option, you can define a 'full-post-width' image size:

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

Then, add it to the list of available options:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );
share|improve this answer
    
Thanks Chip for the comprehensive answer, I did not think about setting the get_option values. The rest is similar to the gist I am using gist.github.com/wycks/4949242 that was linked in my link. Also it does seem to be a grey area on how to make this actually scale if the theme is changed. –  Wyck Feb 20 '13 at 5:12
    
Also I forgot to mention removing the $content_width or not setting it, it still gets applied by default to embedded objects I think. –  Wyck Feb 20 '13 at 5:15
    
Never saw that image_size_names_choose filter until now! I've been that replacing that whole field to get my custom sizes in til now. Is that new in 3.5 Chip? –  sanchothefat Feb 23 '13 at 17:09
    
I think it's been since 3.3, I've been using it to make the labels of add_image_size multilingual, and then I thought it would be also good to use for this image size issue. If you don't need localization you can just smush it into the array instead of hardcoding it. –  Wyck Feb 23 '13 at 18:25
    
@sanchothefat I'm not sure when it was added. Looks like Wyck says it was 3.3? I always love looking through source, when I need to extend/modify something, and finding that a filter has been added to that specific thing. :) –  Chip Bennett Feb 24 '13 at 14:39

Yes I think so. To get around the $content_width issue for themes submitted to the repo I use option filters to force the sizes that I've chosen for the design.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.