1

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?

  • Yes, use a template file. – No Sssweat Jan 8 '17 at 20:36
  • Aye, catching up on D8 views templates now (dialed in to specific field, working out row data part...) – Christopher Stevens Jan 8 '17 at 21:34
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.