How to name drupal 8 views view field templates html.twig files.
In drupal 7 views we used to have the theming information button in the view that would give all the names for the tpl files. In drupal 8 we don’t have that anymore but here is how you name your html.twig files.
Here is the template for naming your files:
views-view-field--[view_machine_name]--[page OR block machine_name]--[field-machine_name].html.twig
Here is an example:
1. I take the view name from the view edit page URL “case_management”
When I want to create a field template for the views field “Check Same Two-parties” field.
2. The view display name would be “page1_incoming” from the url but I want to effect all displays so I do not care about it.
3. I click to edit the field
3.1 Click: “REWRITE RESULT”
3.2 Click: Override the output of this field with custom text
3.3 Click: “REPLACEMENT PATTERNS”
3.4 The Second to last is the name of the field
Using the formula
views-view-field--[view_machine_name]--[page OR block machine_name OR LEAVE this to affect all displays]--[field-machine_name].html.twig
the result is the following file name.
views-view-field--case_management--field_case_check_party.html.twig
Take the file content of the file
“\core\modules\views\templates\views-view-field.html.twig”
and create your own.
{#
/**
* @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
*/
#}
// {{ view.field.path.original_value}} -- if you want to access other fields
<div class="have-fun">
{{ output -}}
</div>
Cheers!
It doesn’t work, even after clearing cache. Name of the file is views-view-field–game_stats–details.html where game_stats = machine name and details = field name. Content of the file {% set val = 2 %}
{{ val }} returns nothing when I refresh view page.
Hi Sebastian!
I’m assuming ‘game_stats’ = machine name of the view. AND ‘details’ is machine name of field.
Double check if field name is not ‘field_details’ instead of just details. Double check the ending of the file it needs to be ‘twig.html’ instead of just ‘html’
file name should be
views-view-field--game_stats--details.html.twigthen clear cache.
Cheers,
Lehel
Thanks for this great tutorial. but i dont know how to access the field variable on template file views-view-field.html.twig for example i have a field with machine name field_blog this field is taxonomy term field that also have some field like field_author_image this is image field. i can not access it using {{ field.field_author_image }}
Thanks
Hi Aldo!
Just to recap what you have here, you are:
– printing out a taxonomy term in the view
– the taxonomy term has a field added to it `field_blog`
– the taxonomy term has another image field added to it `field_author_image`
In the view template you want to print out both of these fields
Suggestions:
1. Add these two fields to the view itself, they will use a relationship based on the taxonomy, and it will be printed out.
— or if you need extra logic in there
2. Use a `preprocess_views_view_field` function in your theme to do some magic, look at this tutorial
http://www.lehelmatyus.com/944/drupal-8-preprocess-views-view-field
— or if you need to access it from the field template as you say
3. add field aliases and you can access other fields in a field template from the view row like so `row[field.field_alias]`
I hope this helps.
Lehel
Thanks for your suggestion. I have tried this proprocess but it does not show up on views-view-field–blog.html.twig
============
function logichub_preprocess_views_view_field(array &$variables){
$id = $variables[‘field’]->realField;
if($id==’field_blog_authors_target_id’){// || $id==’field_image_target_id’
$terms = $variables[‘field’]->getValue($variables[‘row’]);
$tids = array();
foreach($terms as $t){
$tids[] = intval($t);
}
//log_status(‘tids ‘.json_encode($tids));
$terms = \Drupal\taxonomy\Entity\Term::loadMultiple($tids);
$output = ”;
foreach ($terms as $term) {
$author_img_url = $term->field_author_image[0]->entity->uri->value;
$output .= ”;
}
$variables[‘output’] = $output;
}
}
==========
views-view-field–blog.html.twig
{{ output }}
Hi Aldo,
You can add code snippets in comment by closing it in < pre >< / pre > for multiple lines or for one line < code > < / code > (no spaces inside)
The code looks good at first glance.
1. The preprocess is overriding “field_blog_authors_target_id” usually this field is hidden in the view, since it’s an id. be sure you are not hiding this field in the view.
2. Since these is nothing special in the twig file i would suggest to remove it for now to be sure that’s not the problem.
3. I check the field name like so
if ($variables['field']->field == 'field_NAME_OF_YOUR_FIELD') {but i assume your if is good too.4. for now swap the code out with this one http://www.lehelmatyus.com/944/drupal-8-preprocess-views-view-field just to see if anything gets printed out and continue debugging from there.
Let me know if you were able to figure out what is causing the problem.
Lehel
Thank you. After the theme information feature was removed from Drupal 8 views, this post helped clear up my confusion around views field template naming.
Thanks, for your comment! I am glad I was able to help!
Mr. Mátyus –
In the above, how does one change or control the output of {{ output -}} within views-view-field–XXX?
For instance, say I have a view field that is being shown as a link that I want to theme in a specific way. I know I can add markup around {{ output – }} as above. But what about changing what’s in {{ output -}} itself?
Thanks in advance for any insight.
Mr Graber,
Thank you for your comment. The template file can only change the surroundings of the data that has been passed to it. Some times you can dig in the data if its an array but not if its already rendered html markup. This is the later case.
In order to change what’s in the {{output -}} you have manipulate the data that has been returned by the view.
Essentially pre-process the data in a function called a hook. This way you hook into the data that is being returned from the view before it hits the template file. For this check out my blog post https://www.lehelmatyus.com/944/drupal-8-preprocess-views-view-field feel free to ask more questions in the comment section of that post if you need any further guidance.
Bests,
Lehel Mátyus
Thanks for writing this up!