In the last days I developed the ZURB Foundation Views integration module for Drupal 8. To match the markup required by foundation accordion we first had to write a views style plugin in our module. A tutorial on this topic can for example be found here: https://www.drupal.org/docs/8/creating-custom-modules/building-a-views-…
Also you may have a look in our module code.
Beside the implementation of the various settings we then needed to override the views-view-fields.html.twig template to create the correct DOM structure. For example we had to
- add a link wrapper to the first field
- wrap all other fields into a div container
- add various (data-)attributes and classes
- handle special cases, for example with only one field
And that's where the trouble began. It wasn't easy to find out how to override that theme file (generally and especially only if our style plugin is active).
So what I was first looking for was a theme override based on the used style plugin, but that isn't implemented (Theme suggestions are created in ViewExecutable::buildThemeFunctions)
And I saw I opened Pandora's Box...
... as I found out that views doesn't use "hook_theme_suggestions" (see https://www.drupal.org/project/drupal/issues/2923634).
Even worse there are other problems with theme suggestions (see https://www.drupal.org/project/drupal/issues/2752443) and finally I had to find out that views-view-fields.html.twig is even special because it has no HOOK_theme implementation as it seems....
So after digging digging around the various issues I finally decided to use a different method and completely override the #theme hook for all rows. And that's the snippet I'd like to share with you, if you should run into a similar situation in your Drupal 8 views style plugin:
/**
* Preprocess function for views_accordion_foundation_view template.
*
* Default template: views-accordion-foundation-view.html.twig.
*
* @{inheritdoc}
*
* We just want our own template to be able to guarantee some markup.
* @see template_preprocess_views_view_unformatted()
*/
function template_preprocess_views_accordion_foundation_view(&$variables) {
\Drupal::moduleHandler()->loadInclude('views', 'inc', 'views.theme');
// [...] a lot of unrelated code for settings, etc.
// We have to exchange the views_view_fields theme formatter with our own to do custom handling in view-views-accordion-foundation-fields.html.twig if our style plugin is active.
// This was hard and ugly to determine because theme suggestion altering doesn't work for
if(!empty($variables['rows'])){
foreach($variables['rows'] as $key => $row){
foreach($variables['rows'][$key]['#theme'] as $idx => $theme_hook_suggestion){
// Replace views_view_fields suggestions with views_accordion_foundation_view_fields suggestions:
$variables['rows'][$key]['#theme'][$idx] = str_replace('views_view_fields', 'views_accordion_foundation_view_fields', $variables['rows'][$key]['#theme'][$idx]);
}
}
}
// Delegate to default preprocess function from views now for doing all other stuff:
template_preprocess_views_view_unformatted($variables);
}
/**
* Implements hook_theme().
*/
function views_accordion_foundation_theme($existing, $type, $theme, $path)
{
// Add our own views-view-fields.html.twig implementation for this style plugin:
return array(
'views_accordion_foundation_view_fields' => array(
'variables' => array(
'view' => NULL,
'options' => [],
'row' => NULL,
'field_alias' => NULL,
'attributes' => [],
'title_attributes' => [],
'content_attributes' => [],
'title_prefix' => [],
'title_suffix' => [],
'fields' => []
),
'path' => drupal_get_path('module', 'views_accordion_foundation') . '/templates',
),
);
}
function views_accordion_foundation_preprocess_views_accordion_foundation_view_fields(&$variables){
// Delegate the whole handling to the default views_view_fields implementation.
return template_preprocess_views_view_fields($variables);
}
?>
Did you run into the same problem or have a different solution? Please leave a comment.
