diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index 8888ba5b4..4b1c85610 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -54,6 +54,7 @@ } ); add_filter( 'single_template_hierarchy', __NAMESPACE__ . '\modify_single_template' ); add_filter( 'taxonomy_template_hierarchy', __NAMESPACE__ . '\modify_taxonomy_template_hierarchy' ); +add_filter( 'wp_calculate_image_sizes', __NAMESPACE__ . '\modify_grid_image_sizes', 10, 5 ); add_filter( 'wp_get_attachment_image_attributes', __NAMESPACE__ . '\eager_load_first_card_rows_images', 10, 3 ); add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' ); add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\set_site_breadcrumbs' ); @@ -168,6 +169,17 @@ function eager_load_first_card_rows_images( $attr, $attachment, $size ) { return $attr; } +/** + * Modify the image sizes attribute to improve performance by loading the size that is closest to the grid column width. + */ +function modify_grid_image_sizes( $sizes, $size, $image_src, $image_meta, $attachment_id ) { + if ( is_front_page() || is_archive() || is_search() || is_page( 'my-courses' ) ) { + return '(max-width: 768px) 100vw, (max-width: 1270px) 50vw, 33vw'; + } + + return $sizes; +} + /** * Sensei doesn't enqueue learning mode styles for Lessons which are not part of a course. * Enqueue the styles and add the required body class if needed. diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss index 7e4598690..5ddd87a69 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss @@ -9,6 +9,7 @@ .wp-block-post-excerpt, .wp-block-post-featured-image { max-width: 100%; + min-width: 100%; } .course, @@ -74,6 +75,10 @@ left: 24px; } + .sensei-lms-course-list-featured-label__image-wrapper { + min-width: 100%; + } + .sensei-lms-course-list-featured-label__text, .taxonomy-level { display: none;