functions - add_image_size() parameter four ($crop = true) is ignored: the_post_thumbnail() returns scaled image(s) instead of h

Good Day!

I am trying to achieve hard cropping of thumbnails in a custom WordPress theme. In functions.php I have added add_image_size('blog-large', 860, 484, true);. Thus, the fourth parameter ($crop=true) should hard crop any image larger than 860x484 pixels to that size. My test image is 1920x1200 pixels. The 'blog-large' is confirmed as an image size in the "regenerate thumbnail plugin" I use and the plugin's frontend says it regenerates the images without issues. The problem is that the image is rendered in the browser (Firefox on Windows 11) as 774 x 484, not 860x484. In other words it seems to scale the image down to 484 in height, retaining the image aspect ratio of 1.6 (774/484 ≈ 1.6 <=> 1920/1200 ≈ 1.6).

I am outputing the image through the WP function the_post_thumbnail(). My current configuration is simply: if (has_post_thumbnail()){ the_post_thumbnail('blog-large'); }.

I have tried:

• Removing all images from the media library, then inserting two images larger than 860x484, several times.
• Regenerated new post thumbnails, several times.
• Tested the two above in different orders.
• added the add_image_size() code inside a function initiated right afterwards with an add_action('after_setup_theme', 'df_theme_support') hook.
• Checked for any CSS that might affect the image - turned off every style for the element available in the Inspector. I have also turned off all styling for parent element(s) such as flex etc. I have also moved around the code inside the loop, going inside different elements (<article>, <main>, <div>, etc.).
• Added: Also checked for PHP errors. Nothing is outputed in the debug.log file.
• Added: I have also deactivated all the seven (7) plugins and tried again with no change.
• Added: Check in wp-content/uploads/2024/12 reveals that only the original files are there despite use of Regenerate Thumbnails plugin AND re-upload of image(s).

The outputed image is inside the Wordpress loop.

Single.php:

              if(have_posts()) {
                while(have_posts()) {
                  the_post();
                  get_template_part('template-parts/content', 'article');
                }
              }

content-article.php (Updated php/HTML 2024-12-10 14:12):

<?php 
 if (has_post_thumbnail()):?>
      <img src="<?php the_post_thumbnail_url('blog-large');?>">
<?php endif;?>

functions.php:

<?php

function df_theme_support() {
  //Adds dynamic title tag support
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_theme_support('widgets');
  add_post_type_support('page', 'excerpt');
}
add_action('after_setup_theme', 'df_theme_support');

// Custom Image Sizes
add_image_size('blog-large', 860, 484, true);
//true crops it
// add_image_size('blog-small', 300, 200, true); //random size

// load css into the website's front-end (admin and login-page also possible). See guide.
function df_register_styles() {
  // mt_rand(20,9999)
  $version = wp_get_theme()->get('Version');
  wp_enqueue_style('style', get_template_directory_uri() . '/style.css', array(), $version, 'all');
}
add_action('wp_enqueue_scripts', 'df_register_styles');


function df_register_scripts() {
  //footer loaded
  wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true);
  //header loaded
  wp_enqueue_script('ham-navbar', get_template_directory_uri() . '/assets/js/ham-navbar.js', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'df_register_scripts');


function df_widget_areas(){
  register_sidebar(
    array(
      'name' => 'Sidopanel 1',
      'id' => 'sidebar-primary',
      'description' => 'Primär sidopanel (sidebar widget area)',
      'before_sidebar' => '',
      'after_sidebar' => '',
      'before_widget' => '<section class="sect generic-sidebar-section">',
      'after_widget' => '</section>',
      'before_title' => '<h3 class="aside-section-h3">',
      'after_title' => '</h3>'
    )
  );
  register_sidebar(
    //Mobile/tablet ham ("aside") navigation search widget.
    array(
      'name' => 'Sökfunktion för sidomeny (ham)',
      'id' => 'searchfunction-sidemenu',
      'description' => '',
      'before_sidebar' => '',
      'after_sidebar' => '',
      'before_widget' => '',
      'after_widget' => '',
      'before_title' => '',
      'after_title' => ''
    )
  );
}
add_action('widgets_init', 'df_widget_areas');

The link to the image when testing out this (the one 1920x1280): /

The HTML src attribute value retrieved from the browser: http://localhost/test-page/wp-content/uploads/2024/12/fishing-9246364_1920.jpg

The HTML of (1) thumbnail (featured image) of a post and (2) another image inserted into a page: (1) <img src="http://localhost/test-site/wp-content/uploads/2024/12/fishing-9246364_1920.jpg"> (2) <img fetchpriority="high" decoding="async" aria-describedby="caption-attachment-166" class="size-full wp-image-166" src="http://localhost/test-site/wp-content/uploads/2024/12/christmas-8453176s_1920.jpg" alt="qwq" width="1920" height="1302">

Greatful for any tips. Have a good day. With regards//Daniel