How to add the class class="text-truncate" to the text in inbox ?

See the screenshots.

CommentFileSizeAuthor
#7 Capture d’écran du 2019 12 14 00 54 43.png214.93 KBzenimagine
#5 Capture d’écran du 2019-12-13 11-14-43.png127.12 KBzenimagine
#4 Screenshot 2019-12-13 at 1.06.01 PM.png114.98 KBanmolgoyal74
#3 Capture d’écran du 2019-12-12 19-55-44.png229.25 KBzenimagine
#3 Capture d’écran du 2019-12-12 19-55-26.png207.39 KBzenimagine
Capture d’écran du 2019-12-12 17-31-05.png304.37 KBzenimagine
Capture d’écran du 2019 12 12 17 28 04.png354.63 KBzenimagine
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

zenimagine created an issue. See original summary.

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented
Status: Active » Needs review

You have to override the template for the messages. If you enable to debug mode, you can see the template file name suggestion. Create the file in your custom theme.

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented
FileSize
Capture d’écran du 2019-12-12 19-55-26.png207.39 KB
Capture d’écran du 2019-12-12 19-55-44.png229.25 KB

@anmolgoyal74 I have several models. Which model should I use ? Thank you

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented
FileSize
Screenshot 2019-12-13 at 1.06.01 PM.png114.98 KB

You can use the highlighted field template file.
template override

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented
FileSize
Capture d’écran du 2019-12-13 11-14-43.png127.12 KB

@anmolgoyal74 It does not work. I test with this templates :

private-message--inbox.html.twig

But how do you display false fields ?

The following code does not work. I want to display the fields in the screenshot :

{#
/**
 * @file
 * Default theme implementation to display a private message.
 *
 * Available variables:
 * - private_message: The private message entity
 *    with limited access to object properties and methods.
 * - content: All private message items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - url: Direct URL of the current private message.
 * - view_mode: View mode; for example, "teaser" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 *
 * @see template_preprocess_private_message()
 *
 * @ingroup themeable
 */
#}
{{ content.field_message }}
anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

Create the template file with name "field--private-message--message--private-message.html.twig" and place it under template folder in your theme.
and add the following code in it.

{#
/**
 * @file
 * Theme override for a field.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override
 * theming for a subset of fields using
 * @link themeable Theme hook suggestions. @endlink For example,
 * here are some theme hook suggestions that can be used for a field_foo field
 * on an article node type:
 * - field--node--field-foo--article.html.twig
 * - field--node--field-foo.html.twig
 * - field--node--article.html.twig
 * - field--field-foo.html.twig
 * - field--text-with-summary.html.twig
 * - field.html.twig
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 *
 * @see template_preprocess_field()
 */
#}
{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes.addClass(classes, 'field__items') }}>
      {% for item in items %}
        <div{{ attributes.addClass(classes, 'field__item') }}><p class="text-truncate">{{ item.content['#text']|convert_encoding('UTF-8', 'HTML-ENTITIES')|striptags|trim }}</p></div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes.addClass(classes, 'field__item') }}><p class="text-truncate">{{ item.content['#text']|convert_encoding('UTF-8', 'HTML-ENTITIES')|striptags|trim }}</p></div>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes.addClass(classes) }}>
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}
      <div class="field__items">
    {% endif %}
    {% for item in items %}
      <div{{ attributes.addClass(classes, 'field__item') }}><p class="text-truncate">{{ item.content['#text']|convert_encoding('UTF-8', 'HTML-ENTITIES')|striptags|trim }}</p></div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}
zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented
FileSize
Capture d’écran du 2019 12 14 00 54 43.png214.93 KB

@anmolgoyal74

Thanks but it changes the conversation and the inbox. I'm looking to modify only the inbox. See the screen capture.

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

For this requirement, You might have to create the template file for the block.

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented

Is it possible to add a parameter in "manage the display" to customize the class ?

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

I don't think it is possible. Even it is, Then it will be added to both block and the conversion.
What you can do is that you can target the block using block's classes and then implement custom CSS for the block if it solves the problem.

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented

Is it possible to do this in the .theme file ?

To add the class to

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

With "this", what are you referring to?

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented

I have the following file in my theme. is there a code to add in to add a class to the

tag in the inbox ?

bootstrap_subtheme_front_office_old.theme

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

I don't think you have to add any code in the .theme file for this. Just create the template file, you might have all the variables available in the template file already.

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented

The model closest to the

tag is as follows :

https://git.drupalcode.org/project/private_message/blob/8.x-2.x/template...

The name suggest is private-message--inbox.html.twig

But I don't know how to add the class. Is it possible to add TWIG code in the model to customize the fields ?

Currently we cannot customize anything for private message with this TWIG file.

<div id="private-message-1552" data-message-id="1552" class="private-message private-message-inbox private-message-author-other form-group" style="
    /* display: block; */
    /* position: relative; */
">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'private_message' -->
<!-- FILE NAME SUGGESTIONS:
   * private-message--inbox.html.twig
   x private-message.html.twig
-->
<!-- BEGIN OUTPUT from 'modules/contrib/private_message/templates/private-message.html.twig' -->
<div>
  

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--private-message--created--private-message.html.twig
   * field--private-message--created.html.twig
   * field--private-message--private-message.html.twig
   * field--created.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' -->

            <div class="field field--name-created field--type-created field--label-hidden field--item">Il y a : 2 semaines</div>
      
<!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' -->



<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--private-message--owner--private-message.html.twig
   * field--private-message--owner.html.twig
   * field--private-message--private-message.html.twig
   * field--owner.html.twig
   * field--entity-reference.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' -->

            <div class="field field--name-owner field--type-entity-reference field--label-hidden field--item">Még22</div>
      
<!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' -->



<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   x field--private-message--message--private-message.html.twig
   * field--private-message--message.html.twig
   * field--private-message--private-message.html.twig
   * field--message.html.twig
   * field--text-long.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/bootstrap_subtheme_front_office_old/templates/private message/field--private-message--message--private-message.html.twig' -->
<div class="field__item"><p class="text-truncate"></p></div>

            <div class="field__item"><p class="">J'ai pas tout lu mais ça m'a l'air clair et bien expliqué </p></div>
      
<!-- END OUTPUT from 'themes/custom/bootstrap_subtheme_front_office_old/templates/private message/field--private-message--message--private-message.html.twig' -->


</div>

<!-- END OUTPUT from 'modules/contrib/private_message/templates/private-message.html.twig' -->

</div>
anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented

zenimagine,
Is this issue resolved?

zenimagine’s picture

zenimagine CreditAttribution: zenimagine commented

I solved a problem by adding the style directly to my CSS file, but I would have preferred to use the class in TWIG

anmolgoyal74’s picture

anmolgoyal74 CreditAttribution: anmolgoyal74 at OpenSense Labs for DrupalFit commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.