Enable lazy loading for recommendation images

config/core.extension.yml

@@ -41,6 +41,7 @@ module:
   migrate_tools: 0
   node: 0
   opdavies_blog: 0
+  opdavies_recommendations: 0
   opdavies_talks: 0
   options: 0
   page_cache: 0

web/modules/custom/recommendations/opdavies_recommendations.info.yml

@@ -0,0 +1,5 @@
+name: Oliver Davies Recommendations
+description: Custom code for recommendations.
+type: module
+core_version_requirement: ^8 || ^9
+package: Oliver Davies

web/modules/custom/recommendations/opdavies_recommendations.module

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * @file
+ * Oliver Davies Recommendations module.
+ */
+
+declare(strict_types=1);
+
+/**
+ * Implements hook_preprocess_image_style().
+ */
+function opdavies_recommendations_preprocess_image_style(array &$variables): void {
+  if ($variables['style_name'] == 'recommendation') {
+    $image = &$variables['image'];
+
+    $image['#attributes']['class'][] = 'bg-gray-200';
+    $image['#attributes']['height'] = 100;
+    $image['#attributes']['loading'] = 'lazy';
+    $image['#attributes']['width'] = 100;
+  }
+}

web/themes/custom/opdavies/tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
       // Include any classes stored within body fields.
       'body-field-values.txt'
     ],
+    whitelist: ['bg-gray-200']
   },
   theme: {
     typography: (theme) => ({