これはもともとビューフィールドの書き換えでしたが、それ以降、
views-view-fields--[view name]--[machine ID].html.twig
そして動作は同じようです:
<a href="{{ fields.path.content}}" class="menu-item">{{fields.title.content}}<span data-background-image="{{ fields.field_image.content}}"></span></a>
これは、twig debugがdevelopment.services.ymlでfalseに設定されている場合にうまくレンダリングされます。twig debugがオンになっている場合、マークアップが大幅に壊れます。
つまり.
<span data-background-image="
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_field' -->
<!-- BEGIN OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_url_formatter' -->
<!-- BEGIN OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' -->
http://mysite.local/sites/default/files/styles/menus_image/public/menus/image.png?itok=1ZnZSCkX
<!-- END OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' -->
<!-- END OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' -->
"></span>
HTMLは<!-- -->
内部タグをサポートしていません。これは、中心的な問題のようです。これの回避策はありますか、それともTwig debugの制限です)?
_|render|striptags|trim
_ twigフィルターを適用できます:
_<a href="{{ fields.path.content|render|striptags|trim }}" class="menu-item">{{ fields.title.content }}<span data-background-image="{{ fields.field_image.content|render|striptags|trim }}"></span></a>
_
_
div or img tags
_のように保存(削除ではなく)したい場合は、次のように書くこともできます。
{{ fields.field_image.content|render|striptags('<div>, <img>')|trim }}