We are using the uswds design system in our Drupal template.

I have created a view and set the Format type to be grid. I want to setup a responsive grid layout. Under Format -> Grid -> Settings there is a field called "Custom column class". I need to be able to use a colon in the views custom column class field.

For example, mobile column classes are specified like "grid-col-12" and then a desktop column override would be set like "desktop:grid-col-3". This field strips the colon so it breaks the responsiveness.

Is there a way to tell this field to accept colons?

I had tried a few things like html entities, escaping the value, etc. All of those got removed when the layout was rendered on the web page.

Is there a pre-processor for that field in the views I could tap into?

I found a bit of hacky way to fix this for now using twig_vardumper I was able to dump the values from the views-view-grid.html.twig. It appears that the custom classes are apart of the "column.attributes" and are in an array. They must be processed because in the array I see the class that I use the colon doesn't have the colon when it is in the array. In the view settings, if the default classes are set to true, then the custom classes will output in the column div. That seems wrong to me. I think it should always output my custom classes and only output the default classes if I have the checkbox checked.

I'm changing this line:

<div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>

To this:

<div{{ attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>

When I {{ dump(options) }}, I see the options.col_class_custom has the custom classes stored as a string.

I'm setting a new variable to get my custom classes:

{% set custom_class = options.col_class_custom %}

Then in this part of the views-view-grid.html.twig template I added an else statement and this will output only my custom classes and append them to the div for the column:

{% if options.col_class_default %}
    set col_classes = [
      options.alignment == 'vertical' ? 'clearfix',
{% else %}
    set col_classes = [
{% endif %}

I would think there is a better way to do this. I am open to suggestions. Ideally, what I want is for Drupal to not cleanse the custom classes that I enter into the custom classes field. Is there a way to turn that off?

  • What are you referring to when you say "this field"? You've explained the problem, but haven't explained the environment well enough to be able to provide assistance. yet. – Jaypan Dec 2 '19 at 22:05
  • @Jaypan You are right, sorry for not being more clear. I am updating my question now to make it more clear. – Robbiegod Dec 2 '19 at 22:20

Your Answer

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

Browse other questions tagged or ask your own question.