ISTWCMS-2448 Use responsive images

templates/paragraphs/paragraph--uw-para-options-block.html.twig

@@ -6,8 +6,6 @@
           link_uri: item['#paragraph'].field_uw_option_link.value[0]['uri'],
           link_title: item['#paragraph'].field_uw_option_link.value[0]['title'],
           link_colouring: item['#paragraph'].field_uw_option_colouring.value,
-          img_src: file_url(item['#paragraph'].field_uw_option_image.entity.uri.value),
-          img_alt: item['#paragraph'].field_uw_option_image.alt
       }])
     %}
 {% endfor %}
@@ -15,5 +13,9 @@
 {% include '@organisms/single-page/options-block/options-block.twig' with {
   'display_title': display_title,
   'title': content.field_uw_block_title|field_value,
-  'options': options
+  'options': options,
+  'sources': sources,
+  'output_image_tag': output_image_tag,
+  'img_element': img_element['#uri'],
+  'alt': alt
 }%}

uw_fdsu_theme_resp.theme

@@ -122,16 +122,36 @@ function uw_fdsu_theme_resp_preprocess_paragraph(&$variables) {
         $variables['display_title'] = "Off";
       }
 
+      //Get value from field_uw_options field;
+      $field_values = $variables['paragraph']->get('field_uw_options')->getValue();
 
-      //$field = $variables['paragraph']->get('field_uw_options')->first();
-      //vardumper($field);
-      //$a = $variables['paragraph']->get('field_uw_options');
-      //vardumper($a);
+      foreach ($field_values as $field_value) {
 
-      //$options[0]['img_src'] = 'img src';
-      //$options[0]['img_src'] = 'img src';
-      break;
+          // Get paragraph entity of field_uw_options field from the target_id.
+          $p = \Drupal\paragraphs\Entity\Paragraph::load($field_value['target_id']);
+
+          // Get the field entity from the paragraph.
+          $field = $p->field_uw_option_image->first();
+
+          // Set the alt tag from the field entity.
+          $variables['alt'] = $field->get('alt')->getValue();
+
+          // Set the file entity based on the field name.
+          $file = $field->entity;
 
+          // If there is a file present, set responsive image variables.
+          if ($file) {
+            // Set uri and image style id.
+            $variables['uri'] = $file->getFileUri();
+            $variables['responsive_image_style_id'] = 'uw_resp_is_sph_header_image';
+
+            // Call template function from responsive image core module.
+            // It sets variables for srcset, media, type and img_element
+            // for the responsive image style.
+            template_preprocess_responsive_image($variables);
+          }
+      }
+      break;
   }
 }