You are here

twig-tweak-test.html.twig in Twig Tweak 8.2

{% set image_attributes = {style: 'width: 30px; height 30px;'} %}
<style>
  .tt-test > div {
    margin: 15px;
    padding: 10px;
    outline: solid 2px dodgerblue;
  }
  .tt-test > div::before {
    content: attr(class);
    font-weight: bold;
    display: block;
    font-style: italic;
    border-bottom: solid 1px dodgerblue;
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: dodgerblue;
  }
</style>
<div class="tt-test">
  <div class="tt-view-default">{{ drupal_view('twig_tweak_test') }}</div>
  <div class="tt-view-page_1">{{ drupal_view('twig_tweak_test', 'page_1') }}</div>
  <div class="tt-view-page_1-with-argument">{{ drupal_view('twig_tweak_test', 'page_1', 1) }}</div>
  <div class="tt-view-result">{{ drupal_view_result('twig_tweak_test', 'page_1')|length }}</div>
  <div class="tt-block">{{ drupal_block('system_branding_block', {use_site_name: false}, false) }}</div>
  <div class="tt-block-with-wrapper">{{ drupal_block('system_branding_block', {label: 'Branding'}) }}</div>
  <div class="tt-region">{{ drupal_region('sidebar_first') }}</div>
  <div class="tt-entity-default">{{ drupal_entity('node', 1) }}</div>
  <div class="tt-entity-teaser">{{ drupal_entity('node', 1, 'teaser') }}</div>
  <div class="tt-entity-from-url">{{ drupal_entity('node') }}</div>
  <div class="tt-entity-add-form">{{ drupal_entity_form('node', values={type: 'page'}) }}</div>
  <div class="tt-entity-edit-form">{{ drupal_entity_form('node', 1) }}</div>
  <div class="tt-field">{{ drupal_field('body', 'node', 1) }}</div>
  <div class="tt-menu-default">{{ drupal_menu('twig-tweak-test') }}</div>
  <div class="tt-menu-level">{{ drupal_menu('twig-tweak-test', 2) }}</div>
  <div class="tt-menu-depth">{{ drupal_menu('twig-tweak-test', 1, 1) }}</div>
  <div class="tt-form">{{ drupal_form('Drupal\\system\\Form\\CronForm') }}</div>
  <div class="tt-image-by-fid">{{ drupal_image(1, attributes=image_attributes) }}</div>
  <div class="tt-image-by-uri">{{ drupal_image('public://image-test.png', attributes=image_attributes) }}</div>
  <div class="tt-image-by-uuid">{{ drupal_image('b2c22b6f-7bf8-4da4-9de5-316e93487518', attributes=image_attributes) }}</div>
  <div class="tt-image-with-style">{{ drupal_image(1, 'thumbnail', image_attributes) }}</div>
  <div class="tt-image-with-responsive-style">{{ drupal_image(1, 'example', image_attributes, true) }}</div>
  <div class="tt-token">{{ drupal_token('site:name') }}</div>
  <div class="tt-token-data">{{ drupal_token('node:title', {'node': node}) }}</div>
  <div class="tt-config">{{ drupal_config('user.settings', 'anonymous') }}</div>
  <div class="tt-title">{{ drupal_title() }}</div>
  <div class="tt-url">
    <div data-case="default">{{ drupal_url('node/1', {absolute: true}) }}</div>
    <div data-case="with-langcode">{{ drupal_url('node/1', {absolute: true, langcode: 'ru'}) }}</div>
  </div>
  <div class="tt-link">{{ drupal_link('Edit', 'node/1/edit', {absolute: true}) }}</div>
  <div class="tt-link-html">{% set link_text %}<b>Edit</b>{% endset %}{{ drupal_link(link_text, 'node/1/edit', {absolute: true}) }}</div>
  <div class="tt-messages">{{ drupal_messages() }}</div>
  <div class="tt-breadcrumb">{{ drupal_breadcrumb() }}</div>
  <div class="tt-link-access">{{ drupal_link('Administration', 'admin', {absolute: true}, true) }}</div>
  <div class="tt-contextual-links">{{ contextual_links('node:node=1') }}</div>
  <div class="tt-token-replace">{{ 'Site name: [site:name]' | token_replace }}</div>
  <div class="tt-preg-replace">{{ 'FOO' | preg_replace('/(foo)/i', '$1-bar') }}</div>
  <div class="tt-image-style">{{ 'public://images/ocean.jpg' | image_style('thumbnail') }}</div>
  <div class="tt-transliterate">{{ 'Привет!' | transliterate('ru') }}</div>
  <div class="tt-check-markup">{{ '<b>bold</b> <strong>strong</strong>' | check_markup('twig_tweak_test') }}</div>
  <div class="tt-format-size">{{ 12345|format_size() }}</div>
  <div class="tt-truncate">{{ 'Hello world!'|truncate(10, true, true) }}</div>
  <div class="tt-with">{{ {'#markup':'Example'}|with('#prefix', '<b>')|with('#suffix', '</b>') }}</div>
  <div class="tt-with-nested">{{ {alpha: {beta: {gamma: 123}}}|with(['alpha', 'beta', 'gamma'], 456)|json_encode|replace({'"':''}) }}</div>
  <div class="tt-children">
    {%-
      set build = {
        're': {'#markup': 're'},
        '#sol':  {'#markup': '#sol'},
        'mi': {'#markup': 'mi'},
        '#fa': {'#markup': '#fa'},
        'do':  {'#markup': 'do', '#weight': -10},
      }
    -%}
    {%- for value in build|children(true) -%}
      {{- value -}}
    {%- endfor -%}
  </div>
  <div class="tt-node-view">{{ node|view }}</div>
  <div class="tt-field-list-view">{{ node.title|view }}</div>
  <div class="tt-field-item-view">{{ node.title[0]|view }}</div>
  <div class="tt-file-uri-from-image-field">{{ node.field_image|file_uri }}</div>
  <div class="tt-file-uri-from-image-field-delta">{{ node.field_image[0]|file_uri }}</div>
  {% set media_uri = node.field_media|file_uri %}
  <div class="tt-file-uri-from-media-field">{{ media_uri }}</div>
  {% if media_uri is not null %}
    <div class="tt-image-style-from-file-uri-from-media-field">{{ media_uri|image_style('thumbnail') }}</div>
  {% endif %}
  <div class="tt-file-url-from-uri">{{ 'public://image-test.png'|file_url }}</div>
  <div class="tt-file-url-from-image-field">{{ node.field_image|file_url }}</div>
  <div class="tt-file-url-from-image-field-delta">{{ node.field_image[0]|file_url }}</div>
  <div class="tt-file-url-from-media-field">{{ node.field_media|file_url }}</div>
</div>

File

tests/twig_tweak_test/templates/twig-tweak-test.html.twig
View source
  1. {% set image_attributes = {style: 'width: 30px; height 30px;'} %}
  2. <style>
  3. .tt-test > div {
  4. margin: 15px;
  5. padding: 10px;
  6. outline: solid 2px dodgerblue;
  7. }
  8. .tt-test > div::before {
  9. content: attr(class);
  10. font-weight: bold;
  11. display: block;
  12. font-style: italic;
  13. border-bottom: solid 1px dodgerblue;
  14. margin-bottom: 10px;
  15. padding-bottom: 5px;
  16. color: dodgerblue;
  17. }
  18. </style>
  19. <div class="tt-test">
  20. <div class="tt-view-default">{{ drupal_view('twig_tweak_test') }}</div>
  21. <div class="tt-view-page_1">{{ drupal_view('twig_tweak_test', 'page_1') }}</div>
  22. <div class="tt-view-page_1-with-argument">{{ drupal_view('twig_tweak_test', 'page_1', 1) }}</div>
  23. <div class="tt-view-result">{{ drupal_view_result('twig_tweak_test', 'page_1')|length }}</div>
  24. <div class="tt-block">{{ drupal_block('system_branding_block', {use_site_name: false}, false) }}</div>
  25. <div class="tt-block-with-wrapper">{{ drupal_block('system_branding_block', {label: 'Branding'}) }}</div>
  26. <div class="tt-region">{{ drupal_region('sidebar_first') }}</div>
  27. <div class="tt-entity-default">{{ drupal_entity('node', 1) }}</div>
  28. <div class="tt-entity-teaser">{{ drupal_entity('node', 1, 'teaser') }}</div>
  29. <div class="tt-entity-from-url">{{ drupal_entity('node') }}</div>
  30. <div class="tt-entity-add-form">{{ drupal_entity_form('node', values={type: 'page'}) }}</div>
  31. <div class="tt-entity-edit-form">{{ drupal_entity_form('node', 1) }}</div>
  32. <div class="tt-field">{{ drupal_field('body', 'node', 1) }}</div>
  33. <div class="tt-menu-default">{{ drupal_menu('twig-tweak-test') }}</div>
  34. <div class="tt-menu-level">{{ drupal_menu('twig-tweak-test', 2) }}</div>
  35. <div class="tt-menu-depth">{{ drupal_menu('twig-tweak-test', 1, 1) }}</div>
  36. <div class="tt-form">{{ drupal_form('Drupal\\system\\Form\\CronForm') }}</div>
  37. <div class="tt-image-by-fid">{{ drupal_image(1, attributes=image_attributes) }}</div>
  38. <div class="tt-image-by-uri">{{ drupal_image('public://image-test.png', attributes=image_attributes) }}</div>
  39. <div class="tt-image-by-uuid">{{ drupal_image('b2c22b6f-7bf8-4da4-9de5-316e93487518', attributes=image_attributes) }}</div>
  40. <div class="tt-image-with-style">{{ drupal_image(1, 'thumbnail', image_attributes) }}</div>
  41. <div class="tt-image-with-responsive-style">{{ drupal_image(1, 'example', image_attributes, true) }}</div>
  42. <div class="tt-token">{{ drupal_token('site:name') }}</div>
  43. <div class="tt-token-data">{{ drupal_token('node:title', {'node': node}) }}</div>
  44. <div class="tt-config">{{ drupal_config('user.settings', 'anonymous') }}</div>
  45. <div class="tt-title">{{ drupal_title() }}</div>
  46. <div class="tt-url">
  47. <div data-case="default">{{ drupal_url('node/1', {absolute: true}) }}</div>
  48. <div data-case="with-langcode">{{ drupal_url('node/1', {absolute: true, langcode: 'ru'}) }}</div>
  49. </div>
  50. <div class="tt-link">{{ drupal_link('Edit', 'node/1/edit', {absolute: true}) }}</div>
  51. <div class="tt-link-html">{% set link_text %}<b>Edit</b>{% endset %}{{ drupal_link(link_text, 'node/1/edit', {absolute: true}) }}</div>
  52. <div class="tt-messages">{{ drupal_messages() }}</div>
  53. <div class="tt-breadcrumb">{{ drupal_breadcrumb() }}</div>
  54. <div class="tt-link-access">{{ drupal_link('Administration', 'admin', {absolute: true}, true) }}</div>
  55. <div class="tt-contextual-links">{{ contextual_links('node:node=1') }}</div>
  56. <div class="tt-token-replace">{{ 'Site name: [site:name]' | token_replace }}</div>
  57. <div class="tt-preg-replace">{{ 'FOO' | preg_replace('/(foo)/i', '$1-bar') }}</div>
  58. <div class="tt-image-style">{{ 'public://images/ocean.jpg' | image_style('thumbnail') }}</div>
  59. <div class="tt-transliterate">{{ 'Привет!' | transliterate('ru') }}</div>
  60. <div class="tt-check-markup">{{ '<b>bold</b> <strong>strong</strong>' | check_markup('twig_tweak_test') }}</div>
  61. <div class="tt-format-size">{{ 12345|format_size() }}</div>
  62. <div class="tt-truncate">{{ 'Hello world!'|truncate(10, true, true) }}</div>
  63. <div class="tt-with">{{ {'#markup':'Example'}|with('#prefix', '<b>')|with('#suffix', '</b>') }}</div>
  64. <div class="tt-with-nested">{{ {alpha: {beta: {gamma: 123}}}|with(['alpha', 'beta', 'gamma'], 456)|json_encode|replace({'"':''}) }}</div>
  65. <div class="tt-children">
  66. {%-
  67. set build = {
  68. 're': {'#markup': 're'},
  69. '#sol': {'#markup': '#sol'},
  70. 'mi': {'#markup': 'mi'},
  71. '#fa': {'#markup': '#fa'},
  72. 'do': {'#markup': 'do', '#weight': -10},
  73. }
  74. -%}
  75. {%- for value in build|children(true) -%}
  76. {{- value -}}
  77. {%- endfor -%}
  78. </div>
  79. <div class="tt-node-view">{{ node|view }}</div>
  80. <div class="tt-field-list-view">{{ node.title|view }}</div>
  81. <div class="tt-field-item-view">{{ node.title[0]|view }}</div>
  82. <div class="tt-file-uri-from-image-field">{{ node.field_image|file_uri }}</div>
  83. <div class="tt-file-uri-from-image-field-delta">{{ node.field_image[0]|file_uri }}</div>
  84. {% set media_uri = node.field_media|file_uri %}
  85. <div class="tt-file-uri-from-media-field">{{ media_uri }}</div>
  86. {% if media_uri is not null %}
  87. <div class="tt-image-style-from-file-uri-from-media-field">{{ media_uri|image_style('thumbnail') }}</div>
  88. {% endif %}
  89. <div class="tt-file-url-from-uri">{{ 'public://image-test.png'|file_url }}</div>
  90. <div class="tt-file-url-from-image-field">{{ node.field_image|file_url }}</div>
  91. <div class="tt-file-url-from-image-field-delta">{{ node.field_image[0]|file_url }}</div>
  92. <div class="tt-file-url-from-media-field">{{ node.field_media|file_url }}</div>
  93. </div>