How do I prevent rewritten views field output from having ":" stripped out of the <img> sizes attribute?

Question

I'm working on advanced responsive images in a Drupal 8 view, designed to suggest showing different images at various screen sizes around the Bootstrap theme.

Is there a way I can prevent everything up to the ":" from being stripped/filtered out in my views field output sizes attribute?

My views field rewrite looks like this:

<img src="{{ field_product_images }}" 
srcset="{{ field_product_images }} 735w,{{ field_product_images_1 }} 343w,{{ field_product_images_2 }} 210w,{{ field_product_images_3 }} 260w" 
alt="{{ field_product_images_4 }}" 
sizes="(min-width: 0px) 100vw, (min-width: 769px) 50vw, (min-width: 993px) 25vw"  
class="img-responsive">

It renders for the most part. However, the resulting html looks like this:

<img src="/sites/default/files/styles/product_listing_lg/public/products/2017-01/IMG_0196.JPG?itok=pUdgY8n9"
srcset="/sites/default/files/styles/product_listing_lg/public/products/2017-01/IMG_0196.JPG?itok=pUdgY8n9 1w,/sites/default/files/styles/product_listing_md/public/products/2017-01/IMG_0196.JPG?itok=t7jNSmMk 769w,/sites/default/files/styles/product_listing_sm/public/products/2017-01/IMG_0196.JPG?itok=NH8p7qki 993w,/sites/default/files/styles/product_listing_xs/public/products/2017-01/IMG_0196.JPG?itok=feCEjmRl 1201w" 
alt="black and gold variegated infinity scarf (wrapped, front)"
sizes=" 993px) 25vw" 
class="img-responsive">

sizes attribute in rewrite:

sizes="(min-width: 0px) 100vw, (min-width: 769px) 50vw, (min-width: 993px) 25vw"

sizes attribute output:

sizes=" 993px) 25vw"

I seem to have the same challenge whether I'm rewriting an image field or specifying replacement patterns in a global text area.

I haven't explored any preprocess or twig template options yet. Is this something I need to resolve outside of views UI to prevent the filtering? What's the best way to proceed?

Answer 1

Based on No Sssweat's comment suggestion, I was able to work out a views field template in my custom theme to resolve this question. As I used the twig tweak module to help apply multiple image styles in node templates, I also used it in my views field template in a similar way.

In views-view-field--[view id]--[display id]--[field id].html.twig (or views-view-field--products--page-1--nothing-2.html.twig in my case):

{#
/**
 * @file
 * Default theme implementation for a single field in a view.
 *
 * Available variables:
 * - view: The view that the field belongs to.
 * - field: The field handler that can process the input.
 * - row: The raw result of the database query that generated this field.
 * - output: The processed output that will normally be used.
 *
 * When fetching output from the row this construct should be used:
 * data = row[field.field_alias]
 *
 * The above will guarantee that you'll always get the correct data, regardless
 * of any changes in the aliasing that might happen if the view is modified.
 *
 * @see template_preprocess_views_view_field()
 *
 * @ingroup themeable
 */
#}
{% set href = path('entity.node.canonical', {'node': row._entity.id}) %}
{% set image = row._entity.field_product_images[0] %}
{% set product_listing_xs = image.entity.uri.value|image_style('product_listing_xs') %} {# requires twig tweak module #}
{% set product_listing_sm = image.entity.uri.value|image_style('product_listing_sm') %} {# requires twig tweak module #}
{% set product_listing_md = image.entity.uri.value|image_style('product_listing_md') %} {# requires twig tweak module #}
{% set product_listing_lg = image.entity.uri.value|image_style('product_listing_lg') %} {# requires twig tweak module #}
<a href="{{ href }}"><img src="{{ product_listing_lg }}" srcset="{{ product_listing_xs }} 735w,{{ product_listing_sm }} 343w,{{ product_listing_md }} 210w,{{ product_listing_lg }} 260w" sizes="(min-width: 0px) 100vw, (min-width: 769px) 50vw, (min-width: 993px) 25vw" alt="{{ image.alt }}" class="img-responsive"></a>

No ":" or other items were stripped from the final output.

As a result of the field template, I was also able to remove six hidden field items in the views settings that were used in the rewrite this template now handles.