Join Log in
Score:1
Darren avatar Drupal

How do I stop Fields being rendered twice for a node with Paragraph Types using UI Patterns?

in flag
Darren

I'm using UI Patterns within Paragraph Types which is resulting in the Fields being rendered twice in the theme. I'm using a sub theme of the bootsrap5 contrib theme. I have a custom layout twig:-

{#
/**
 * @file
 * Theme override to display a two-column layout.
 *
 * Available variables:
 * - in_preview: Whether the plugin is being rendered in preview mode.
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 */
#}

{%
    set classes = [
        'col-12',
        'col-md-9',
        'col-md-3',
    ]
%}

{% if content %}
    <div{{attributes.addClass('container')}}>
        <div{{attributes.addClass('row')}}>

            {% if content.first %}
                <div {{ region_attributes.first.addClass(classes).removeClass('col-md-9') }}>
                    {{ content.first }}
                </div>
            {% endif %}

            {% if content.second %}
                <div {{ region_attributes.second.addClass(classes).removeClass('col-md-3') }}>
                    {{ content.second }}
                </div>
            {% endif %}

        </div>

    </div>
{% endif %}

Screenshot of the result:-

screenshot of duplicate fields

The resulting HTML is below:-

<div class="field field--name-field-components field--type-entity-reference-revisions field--label-hidden field__items">
              <div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'paragraph' -->
<!-- FILE NAME SUGGESTIONS:
   * paragraph--section--default.html.twig
   * paragraph--section.html.twig
   * paragraph--default.html.twig
   x paragraph.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/paragraphs/templates/paragraph.html.twig' -->
  <div class="paragraph paragraph--type--section paragraph--view-mode--default">
          

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pa_third_2thirds' -->
<!-- FILE NAME SUGGESTIONS:
   x pa-third-2thirds.html.twig
   x pa-third-2thirds.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/layouts/pa-third-2thirds.html.twig' -->


    <div class="container">
        <div class="container row">

                            <div class="col-12 col-md-3">
                    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'ds_entity_view' -->
<!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pattern_alert' -->
<!-- FILE NAME SUGGESTIONS:
   * pattern-alert--variant-warning--layout--paragraph--100056.html.twig
   * pattern-alert--variant-warning--layout--paragraph--ui-suite-test--default.html.twig
   * pattern-alert--variant-warning--layout--paragraph--default.html.twig
   * pattern-alert--variant-warning--layout--paragraph--ui-suite-test.html.twig
   * pattern-alert--variant-warning--layout--paragraph.html.twig
   * pattern-alert--variant-warning--layout.html.twig
   * pattern-alert--layout--paragraph--100056.html.twig
   * pattern-alert--layout--paragraph--ui-suite-test--default.html.twig
   * pattern-alert--layout--paragraph--default.html.twig
   * pattern-alert--layout--paragraph--ui-suite-test.html.twig
   * pattern-alert--layout--paragraph.html.twig
   * pattern-alert--layout.html.twig
   * pattern-alert--variant-warning.html.twig
   x pattern-alert.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/patterns/alert/pattern-alert.html.twig' -->
  
  
<div class="alert-warning alert-dismissible fade show alert">
    <h4 class="alert-heading">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-alert-heading--ui-suite-test.html.twig
   * field--default--paragraph--ui-suite-test.html.twig
   * field--default--paragraph--field-alert-heading.html.twig
   * field--default--field-alert-heading--ui-suite-test.html.twig
   * field--default--ui-suite-test.html.twig
   * field--default--field-alert-heading.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-alert-heading--ui-suite-test.html.twig
   * field--paragraph--field-alert-heading.html.twig
   * field--paragraph--ui-suite-test.html.twig
   * field--field-alert-heading.html.twig
   * field--string.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

  <div class="field field--name-field-alert-heading field--type-string field--label-above">
    <div class="field__label">Heading</div>
              <div class="field__item">This is the heading!</div>
          </div>

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

</h4>
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-simple-text--ui-suite-test.html.twig
   * field--default--paragraph--ui-suite-test.html.twig
   * field--default--paragraph--field-simple-text.html.twig
   * field--default--field-simple-text--ui-suite-test.html.twig
   * field--default--ui-suite-test.html.twig
   * field--default--field-simple-text.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-simple-text--ui-suite-test.html.twig
   * field--paragraph--field-simple-text.html.twig
   * field--paragraph--ui-suite-test.html.twig
   * field--field-simple-text.html.twig
   * field--string-long.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

  <div class="field field--name-field-simple-text field--type-string-long field--label-above">
    <div class="field__label">Message</div>
              <div class="field__item">Hello! I'm a message!</div>
          </div>

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->


      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/patterns/alert/pattern-alert.html.twig' -->



<!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


                </div>
            
                            <div class="col-12 col-md-9">
                    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'ds_entity_view' -->
<!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pattern_card' -->
<!-- FILE NAME SUGGESTIONS:
   * pattern-card--variant-default--layout--paragraph--100057.html.twig
   * pattern-card--variant-default--layout--paragraph--ui-suite-card--default.html.twig
   * pattern-card--variant-default--layout--paragraph--default.html.twig
   * pattern-card--variant-default--layout--paragraph--ui-suite-card.html.twig
   * pattern-card--variant-default--layout--paragraph.html.twig
   * pattern-card--variant-default--layout.html.twig
   * pattern-card--layout--paragraph--100057.html.twig
   * pattern-card--layout--paragraph--ui-suite-card--default.html.twig
   * pattern-card--layout--paragraph--default.html.twig
   * pattern-card--layout--paragraph--ui-suite-card.html.twig
   * pattern-card--layout--paragraph.html.twig
   * pattern-card--layout.html.twig
   * pattern-card--variant-default.html.twig
   x pattern-card.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/patterns/card/pattern-card.html.twig' -->
<div class="card">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-card-media--ui-suite-card.html.twig
   * field--default--paragraph--ui-suite-card.html.twig
   * field--default--paragraph--field-card-media.html.twig
   * field--default--field-card-media--ui-suite-card.html.twig
   * field--default--ui-suite-card.html.twig
   * field--default--field-card-media.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-card-media--ui-suite-card.html.twig
   * field--paragraph--field-card-media.html.twig
   * field--paragraph--ui-suite-card.html.twig
   x field--field-card-media.html.twig
   * field--entity-reference.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/overrides/field/field--field-card-media.html.twig' -->

  <div class="field field--name-field-card-media field--type-entity-reference field--label-above">
    <div class="field__label">Card image</div>
              <div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/image-formatter.html.twig' -->
  

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/image.html.twig' -->
<img src="/sites/default/files/2023-01/turkeys.png" width="400" height="400" alt="turkeys" loading="lazy" typeof="foaf:Image" class="img-fluid">

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/image.html.twig' -->



<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/image-formatter.html.twig' -->

</div>
          </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/overrides/field/field--field-card-media.html.twig' -->


      <div class="card-header">
    
  </div>
    
    <div class="card-footer">
    
  </div>
    </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/patterns/card/pattern-card.html.twig' -->



<!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


                </div>
            
        </div>

    </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/layouts/pa-third-2thirds.html.twig' -->


      </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/paragraphs/templates/paragraph.html.twig' -->

</div>
              <div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'ds_entity_view' -->
<!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pattern_alert' -->
<!-- FILE NAME SUGGESTIONS:
   * pattern-alert--variant-warning--layout--paragraph--100056.html.twig
   * pattern-alert--variant-warning--layout--paragraph--ui-suite-test--default.html.twig
   * pattern-alert--variant-warning--layout--paragraph--default.html.twig
   * pattern-alert--variant-warning--layout--paragraph--ui-suite-test.html.twig
   * pattern-alert--variant-warning--layout--paragraph.html.twig
   * pattern-alert--variant-warning--layout.html.twig
   * pattern-alert--layout--paragraph--100056.html.twig
   * pattern-alert--layout--paragraph--ui-suite-test--default.html.twig
   * pattern-alert--layout--paragraph--default.html.twig
   * pattern-alert--layout--paragraph--ui-suite-test.html.twig
   * pattern-alert--layout--paragraph.html.twig
   * pattern-alert--layout.html.twig
   * pattern-alert--variant-warning.html.twig
   x pattern-alert.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/patterns/alert/pattern-alert.html.twig' -->
  
  
<div class="alert-warning alert-dismissible fade show alert">
    <h4 class="alert-heading">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-alert-heading--ui-suite-test.html.twig
   * field--default--paragraph--ui-suite-test.html.twig
   * field--default--paragraph--field-alert-heading.html.twig
   * field--default--field-alert-heading--ui-suite-test.html.twig
   * field--default--ui-suite-test.html.twig
   * field--default--field-alert-heading.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-alert-heading--ui-suite-test.html.twig
   * field--paragraph--field-alert-heading.html.twig
   * field--paragraph--ui-suite-test.html.twig
   * field--field-alert-heading.html.twig
   * field--string.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

  <div class="field field--name-field-alert-heading field--type-string field--label-above">
    <div class="field__label">Heading</div>
              <div class="field__item">This is the heading!</div>
          </div>

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

</h4>
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-simple-text--ui-suite-test.html.twig
   * field--default--paragraph--ui-suite-test.html.twig
   * field--default--paragraph--field-simple-text.html.twig
   * field--default--field-simple-text--ui-suite-test.html.twig
   * field--default--ui-suite-test.html.twig
   * field--default--field-simple-text.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-simple-text--ui-suite-test.html.twig
   * field--paragraph--field-simple-text.html.twig
   * field--paragraph--ui-suite-test.html.twig
   * field--field-simple-text.html.twig
   * field--string-long.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->

  <div class="field field--name-field-simple-text field--type-string-long field--label-above">
    <div class="field__label">Message</div>
              <div class="field__item">Hello! I'm a message!</div>
          </div>

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field.html.twig' -->


      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/patterns/alert/pattern-alert.html.twig' -->



<!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->

</div>
              <div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'ds_entity_view' -->
<!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pattern_card' -->
<!-- FILE NAME SUGGESTIONS:
   * pattern-card--variant-default--layout--paragraph--100057.html.twig
   * pattern-card--variant-default--layout--paragraph--ui-suite-card--default.html.twig
   * pattern-card--variant-default--layout--paragraph--default.html.twig
   * pattern-card--variant-default--layout--paragraph--ui-suite-card.html.twig
   * pattern-card--variant-default--layout--paragraph.html.twig
   * pattern-card--variant-default--layout.html.twig
   * pattern-card--layout--paragraph--100057.html.twig
   * pattern-card--layout--paragraph--ui-suite-card--default.html.twig
   * pattern-card--layout--paragraph--default.html.twig
   * pattern-card--layout--paragraph--ui-suite-card.html.twig
   * pattern-card--layout--paragraph.html.twig
   * pattern-card--layout.html.twig
   * pattern-card--variant-default.html.twig
   x pattern-card.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/patterns/card/pattern-card.html.twig' -->
<div class="card">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--default--paragraph--field-card-media--ui-suite-card.html.twig
   * field--default--paragraph--ui-suite-card.html.twig
   * field--default--paragraph--field-card-media.html.twig
   * field--default--field-card-media--ui-suite-card.html.twig
   * field--default--ui-suite-card.html.twig
   * field--default--field-card-media.html.twig
   * field--default.html.twig
   * field--theme-ds-field-default.html.twig
   * field--paragraph--field-card-media--ui-suite-card.html.twig
   * field--paragraph--field-card-media.html.twig
   * field--paragraph--ui-suite-card.html.twig
   x field--field-card-media.html.twig
   * field--entity-reference.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/b5subtheme/templates/overrides/field/field--field-card-media.html.twig' -->

  <div class="field field--name-field-card-media field--type-entity-reference field--label-above">
    <div class="field__label">Card image</div>
              <div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/image-formatter.html.twig' -->
  

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/image.html.twig' -->
<img src="/sites/default/files/2023-01/turkeys.png" width="400" height="400" alt="turkeys" loading="lazy" typeof="foaf:Image" class="img-fluid">

<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/image.html.twig' -->



<!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/image-formatter.html.twig' -->

</div>
          </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/overrides/field/field--field-card-media.html.twig' -->


      <div class="card-header">
    
  </div>
    
    <div class="card-footer">
    
  </div>
    </div>

<!-- END OUTPUT from 'themes/custom/b5subtheme/templates/patterns/card/pattern-card.html.twig' -->



<!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' -->

</div>
          </div>
55
1 + 0
Score:2
Darren avatar Drupal
in flag
Darren

So this turned out to be a face palm and a half!

The Field in question had the Display set to "Rendered Entity" with no "UI Limit".

Changing the "UI Limit" to 1 fixed it.

However, as this is a Paragraph Type the Display should really be "Paragraph Type".

Hope this helps anyone experiencing this problem!

+ 1
Andrew Magill avatar
uy flag
Andrew Magill
I have this issue on Drupal 10, and there is no admin field to adjust this. :(
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.