Insert Images at Master Uniform Height

I’m trying to figure out a way to insert images from the media library into the post editor at a uniform height… but by selecting one option. For example, I set a height like “300” somewhere (like in the media window), and each image I click and insert into the visual editor has for its HTML a height of 300. Does anyone know if this is possible?

The big problem with my website is that I often have to post breaking news. Speed is everything. One of the biggest issues I have with the current WordPress setup is that I have to click the thumbnail size I want for EACH image I insert. What would be really cool is if you could set a “master height” you want each time you open the media window which applies to every image you insert after that point. That’s what I’m basically trying to figure out how to do right now.

One solution I thought if is that I could wrap a shortcode around all the images and change their height via CSS (as in, the shortcode is a div with a name and I set the CSS to change all the images within that div to the height I want. With this option I would also have to remove the HTML width/height from the inserted code too, since otherwise the CSS would be overwritten). But the problem with this approach is that I wouldn’t be able to tell how many images can fit within the space I have since the shortcode would not update the image dimensions in the visual editor. I have my visual editor precisely tuned to match the layout of my news stories so that when I hit Publish, what I see is what gets posted – image sizes, line breaks, and all.

The other solution I thought of is to add different thumbnail sizes for each height I could use. But because of how wildly my image heights can vary, and how precise I am, this would result in a ton of thumbnails being generated for each image. Not to mention that I have to click each thumbnail in the media window, click the dropdown, pick the height I want, and repeat it for each image. This is a real issue when a news story breaks and I have to insert 20 images.

One other thing I could do is insert all the images at a medium height to account for the largest possible thumbnail I could possibly insert – and make this height the only option so I don’t have to click the height for each image. Only problem is that I won’t be able to easily resize all of them once they’re in the editor to reduce them down. In an ideal world it would be really cool if you could highlight all the images and drag them down to the same height like how you can do it with one image. But that’s not currently a feature.

So basically I’m trying to see if I can set a master HTML height each time I open the window for every image I then click and insert. And if I open the window again, I can change the height to something else and it will apply to the next set of images I insert. Does anyone know how I can approach this or if there’s something out there that would accomplish what I want? Or another way to think about this? I’ve been Googling for hours but the only thing I’ve seen is changing the thumbnail sizes, which won’t work for me in my case because of the nature of my site and having to be speedy.

There are multiple solutions:

1. Use CSS for post images:

   .post img { height: 300px; width: auto; }

2. Use a custom thumbnail size. Either in Settings -> Media or use a third-party plugin to generate them. Another way would be to code your own:

   function custom_image_sizes() {
add_theme_support('post-thumbnails');
add_image_size('breaking-news', 9999, 300, true);
}
function add_custom_sizes( $imageSizes ) {
$my_sizes = array(
'breaking-news' => 'My breaking news image'
);
return array_merge( $imageSizes, $my_sizes );
}
add_action('after_setup_theme', 'custom_image_sizes');
add_filter( 'image_size_names_choose', 'add_custom_sizes' );