You are here

Home » API reference » UIkit Components 8.3

uikit-comment.html.twig in UIkit Components 8.3

Default theme implementation for a UIkit Comment.

Available variables:

  • attributes: HTML attributes to be applied to the comment.
  • avatar: An assocative array containing:
    • style_name: The name of the image style to be applied.
    • uri: URI of the source image before styling.
    • height: The height of the image.
    • width: The width of the image.
    • alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft allows the alt attribute to be omitted in some cases. Therefore, this variable defaults to an empty string, but can be set to NULL for the attribute to be omitted. Usually, neither omission nor an empty string satisfies accessibility requirements, so it is strongly encouraged for code using '#theme' => 'image_style' to pass a meaningful value for this variable.

    • title: The title text is displayed when the image is hovered in some popular browsers.
    • attributes: Associative array of attributes to be placed in the img tag.
  • title: The title to display in the comment header.
  • meta: An array containing the metadata to display in the comment header.
  • comment: The content to display for the comment body.

See also

template_preprocess_image_style()

\Drupal\uikit_components\Element\UIkitComment

template_preprocess_uikit_comment()

https://getuikit.com/docs/comment

File

templates/components/uikit-comment.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for a UIkit Comment.

  5.  *

  6.  * Available variables:

  7.  * - attributes: HTML attributes to be applied to the comment.

  8.  * - avatar: An assocative array containing:

  9.  *   - style_name: The name of the image style to be applied.

  10.  *   - uri: URI of the source image before styling.

  11.  *   - height: The height of the image.

  12.  *   - width: The width of the image.

  13.  *   - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0

  14.  *     always require an alt attribute. The HTML 5 draft allows the alt

  15.  *     attribute to be omitted in some cases. Therefore, this variable defaults

  16.  *     to an empty string, but can be set to NULL for the attribute to be

  17.  *     omitted. Usually, neither omission nor an empty string satisfies

  18.  *     accessibility requirements, so it is strongly encouraged for code using

  19.  *     '#theme' => 'image_style' to pass a meaningful value for this variable.

  20.  *     - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8

  21.  *     - http://www.w3.org/TR/xhtml1/dtds.html

  22.  *     - http://dev.w3.org/html5/spec/Overview.html#alt

  23.  *   - title: The title text is displayed when the image is hovered in some

  24.  *     popular browsers.

  25.  *   - attributes: Associative array of attributes to be placed in the img tag.

  26.  * - title: The title to display in the comment header.

  27.  * - meta: An array containing the metadata to display in the comment header.

  28.  * - comment: The content to display for the comment body.

  29.  *

  30.  * @see template_preprocess_image_style()

  31.  * @see \Drupal\uikit_components\Element\UIkitComment

  32.  * @see template_preprocess_uikit_comment()

  33.  * @see https://getuikit.com/docs/comment

  34.  *

  35.  * @ingroup uikit_components_theme_render

  36.  */

  37. #}

  38. {% if comment %}

  39.   <article{{ attributes }}>

  40.     {% if avatar or title or meta %}

  41.       <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>

  42.         {% if avatar %}

  43.           <div class="uk-width-auto">

  44.             {{ avatar }}

  45.           </div>

  46.         {% endif %}

  47.         <div class="uk-width-expand">

  48.           {% if title %}

  49.             <h4 class="uk-comment-title uk-margin-remove">{{ title }}</h4>

  50.           {% endif %}

  51. 

  52.           {% if meta %}

  53.             <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">

  54.               {% for item in meta %}

  55.                 <li>{{ item }}</li>

  56.               {% endfor %}

  57.             </ul>

  58.           {% endif %}

  59.         </div>

  60.       </header>

  61.     {% endif %}

  62. 

  63.     {{ comment }}

  64.   </article>

  65. {% endif %}

Related topics

Render API Overview
Overview of the UIkit Components Theme system and Render API.