How to have a separate image style for an image field for the 1st views row? First I tried with views_conditional (which was already installed on the site) to check for 1st row and output the specific image but it does not seem to work as per this issue

Ideally I want to do it without installing an extra module. 

I tried with THEMENAME_preprocess_views_view_field but the image was already rendered at this stage.  Have used the somewhat hackish str_replace but it does not actually work.

function THEMENAME_preprocess_views_view_field(&amp;$vars) {
  if($vars['view']-&gt;element['#name'] == "free_write" 
      &amp;&amp; $vars['field']-&gt;field == "field_main_image" 
      &amp;&amp; $vars['row']-&gt;index == 1 
      ){
    $html = str_replace("teaser_media_small","teaser_media_medium",$vars["output"]-&gt;__toString());
    $vars["output"] = Drupal\Core\Render\Markup::create($html);
  }
}


what is the proper way to do this in a preprocess function or perhaps in a twig template ?
A solution can be Add an Attachment Display to the View, in the Attachment you can select to show only one element with a different style and you can give as position Before.



In the Page then you select to skip 1 element.



This will output something like this: