Adding custom image sizes limited to 1170 px width?

[raoulunger]

Hi,

I have added some custom image sizes to the functions.php file (in Boostrap Starter 4 child). This works fine (i.e. they appear in the srcset). I also added a function to get these custom sizes to show up in the Media Library insertion page (the drop down menu). The new sizes show up there, but all sizes larger then 1170 px get reduced to 1170px width. I assume this is related to the maximum container width of 1170 in Bootstrap (even though I use a page template without container), but I'd like to figure how to set these image sizes tot their actual intended (by me) width. Below is the code I used.
Anyone any ideas? Thanks a lot!

// New registered images sizes:

   add_image_size( 'IMG-Size-1250', 1250, 0, false );
   add_image_size( 'IMG-Size-1500', 1500, 0, false );

// Add custom sizes to WordPress Media Library:

function roodlof_image_sizes( $sizes ) {
   return array_merge( $sizes, array(
      'IMG-Size-1250' => 'IMG-Size-1250',
      'IMG-Size-1500' => 'IMG-Size-1500',
   ) );
}
add_filter( 'image_size_names_choose', 'roodlof_image_sizes' );

[mdo]

We set a max-width on images in Bootstrap so they don't break out of their parent element can cause unexpected layout issues. To get past it, set max-width: none in your CSS or inline on the images.

[raoulunger]

Thanks for you answer. However, I was referring to the different sizes of an image that Wordpress produces at the moment an image is uploaded. By default there are four sizes, but a developer can add sizes to that set to better fit his layout. That is done with the code in my post above. Bootstrap does not allow those sizes to go over 1170 px (as explained) but that behaviour is not controlled with css. I figured out that the limit to custom image sizes is controlled (instead) by Boostrap's content-width which is set in functions.php. By removing that filter, and redefining it again (both done in the child theme's functions.php) I was able to make the max content-width wider (2000 px in this example), and thus make Bootstrap allow for custom image sizes wider than 1170px. Below is the code I used:

// Remove a filter from the parent theme:

function remove_parent_filters(){
	remove_filter('init', 'wp_bootstrap_starter_content_width');
}
add_action( 'after_setup_theme', 'remove_parent_filters' );

// Redefine 'wp_bootstrap_starter_content_width':

function wp_bootstrap_starter_child_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'wp_bootstrap_starter_content_width', 2000 );
}
add_action( 'after_setup_theme', 'wp_bootstrap_starter_child_content_width', 1 );

[ffoodd]

Bootstrap is HTML, CSS and JavaScript only. No PHP, no WordPress.

You're talking about a WordPress constant that has nothing to do with Bootstrap. Please read your theme's documentation or search on WordPress developer reference.

[raoulunger]

Thanks for your reaction, ffood. I mixed up Boostrap (the framework) with Bootstrap starter (the Wordpress theme). I have found the solution already (as shown above), but next time i'll pay better attention to repository names before starting a thread. Sorry for the confusion!