User Interface/Experience (UI/UX) Tips, Tricks, and Tools

User Interface/Experience (UI/UX) Tips, Tricks, and Tools
Category
Developers
Site Administrators
esembrat3
Drupal Version
Version Agnostic

User Interface (UI) design refers to the forward facing look and feel of a website.

User Experience (UX) design refers to how users will interact with and navigate through a website.

This section provides details about useful tips, tricks, and tools relating to both areas of website design.  Accessibility is related to UI and UX, but is covered in its own section of the handbook.

Drupal Twig Stubs

Drupal Twig Stubs
Category
Developers
esembrat3
Drupal Version
Drupal 10

Twig stubs and code-samples to aid your Twig template development.

External Resources

  • Twig data stubs (from the Ivan Allen College's web development resources website)

Check for (non-)empty fields

Check for (non-)empty fields
Category
Developers
esembrat3
Drupal Version
Drupal 10

Satisfies a comment on drupal.org:

Someday I would like to spend the time to make a list of the various field types and the best way to check whether they are empty so I can stop Googling this thread every few months.

Basic field

Expensive (render) check

{% if content.field|render is not empty %}
     {{ content.field }}
{% endif %}

Note that this can be an expensive (resource-wise) check to make.

Basic check

{% if node.field.value %}
  {{ content.field }}
{% endif %}

Entity Reference fields

{% if content.field['#items'].getValue() %}
    {{ content.field }}
{% endif %}

Note

This should be compiled over on drupal.org in the near future, anyways.

Field Boilerplate Help Text

Field Boilerplate Help Text
Category
Developers
Site Administrators
esembrat3
Drupal Version
Version Agnostic

Per Georgia Tech's accessibility requirements, certain fields likely need additional explanatory text accompanying them:

Video Fields (e.g. YouTube)

Any publicly available video must be captioned for end-users. MediaSpace and YouTube automatic captions are not enough to meet full guidance: any automatic captions must be manually reviewed and corrected.

Please see the Video Captioning and Audio Transcripts page of the Resources for Webmasters website for more information.

Image Field

Any non-decorative image must have alternative text describing the visual component of the text.

Please see the Ivan Allen College's Web Accessibility Primer for additional information on alternative text for images.

Whitelisting Tags in Module Output

Whitelisting Tags in Module Output
Category
Developers
kp37
Drupal Version
Drupal 10

Here's how to whitelist HTML tags in your module output that are normally stripped out by the XSS filter:

    $tagList = array('input');
  
    return array(
      '#markup' => $buffer,
      '#allowed_tags' => array_merge(\Drupal\Component\Utility\Xss::getAdminTagList(), $tagList),
    );

And here's how to allow data URLs in your module output for displaying images with data that you've already pulled in from a data source (code updated 2017-12-11 to a better format that avoids whitescreening in certain use cases):

  $allowedProtocols = \Drupal\Component\Utility\URLHelper::getAllowedProtocols();
  $allowedProtocols[] = 'data';
  \Drupal\Component\Utility\URLHelper::setAllowedProtocols($allowedProtocols);