Dirty Trick To Style Views Fields in Drupal 8

Have you ever try it out creating a views field template in Drupal 8? When I started working with Casper, I was trying to create a template base on a views field template and I notice few things inusual. First, there is no longer theming information from the views UI level instead they encourage you to use theme_debug (https://www.drupal.org/node/2362413). Sadly theme_debug does not show all the suggestion possible (https://www.drupal.org/node/2118743) and one of those suggestion is views field templates.

I have been Drupal for quite a while so I know my work around to write a template without a suggestions. So I wrote something like this views-view-field--frontpage--title.html.twig to be able to add wrapper to title of the views frontpage, without need of a preprocess function. From here I use kint to debug which variables are available at this template and I run into multiple issues. First issue was a server error similar to this ..

Drupal\Core\Database\DatabaseExceptionWrapper: SQLSTATE[HY000]: General error: 2006 MySQL server has gone away:
CREATE TABLE {cache_render} ( `cid` VARCHAR(255) BINARY CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL DEFAULT
'' COMMENT 'Primary Key: Unique cache ID.', `data` LONGBLOB NULL DEFAULT NULL COMMENT 'A collection of data to cache.',
`expire` INT NOT NULL DEFAULT 0 COMMENT 'A Unix timestamp indicating when the cache entry should expire, or -1 for never.
', `created` DECIMAL(14, 3) NOT NULL DEFAULT 0 COMMENT 'A timestamp with millisecond precision indicating when the cache
entry was created.', `serialized` SMALLINT NOT NULL DEFAULT 0 COMMENT 'A flag to indicate whether content is serialized
(1) or not (0).', `tags` LONGTEXT NULL DEFAULT NULL COMMENT 'Space-separated list of cache tags for this entry.', `checksum`
VARCHAR(255) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL COMMENT 'The tag invalidation checksum when this entry
was saved.', PRIMARY KEY (`cid`), INDEX `expire` (`expire`) ) ENGINE = InnoDB DEFAULT CHARACTER SET utf8mb4 COMMENT
'Storage for the cache API.'; Array ( ) in Drupal\Core\Render\RenderCache->set() (line 275 of core/lib/Drupal/Core/Render/RenderCache.php).
The website encountered an unexpected error. Please try again later.

This can be fix by increasing MAX_ALLOWED_PACKET.

Second issue was my browser crashing while trying to debug the variables available . Using {{ kint() }} will cause my browser to crash because it will try to get raw data from the sql query and that is too much for kint. After some investigation I found out a workaround to be able to add wrappers to views fields. By adding a preprocess function that turn views row into a variables. This will allows you to have a variables that you can added wrappers around it. Here is an example of preprocess function:

function MYTHEME_preprocess_views_view_field(&$variables) {
  $variables['output'] = $variables['field']->advancedRender($variables['row']);
}

Once you have the above preprocess function in your project (theme/module) you can get a variables called output in your twig template. Just like this…

<div class="wrapper">{{ output }}</div>

And there you got that is how you can style views fields in Drupal 8. You can also achieve the same goal by creating a preprocess function that allow you to add a wrapper for a specify views field. However, I prefer to do it on a row level because it will automatically apply to any view field.

Most of the information from this article was taken from a discussion at Drupal Answers, if you wish to see the original discussion please visit - http://drupal.stackexchange.com/questions/186165/how-to-get-variables-of-field-from-a-view-in-twig