Display paragraphs items in comma-seperated series

Question

I have a series of paragraphs items representing two different types of contributors to a publication: staff (user link) and non-staff (text). (See How to control the display of a user account connected via entity reference)

According to Paragraphs preprocess paragraphs handles building the render array for its items in the same way as nodes, comments, etc, so maybe my question is much broader, but here's what I'm trying to do:

I want to send up with a basic comma separated list of items:

Person 1

or

Person 1 and Person 3

or

Person 1, Person 2, and Person 3

with links on the items that should be links. I guess I just am not getting render arrays and the theming functions well enough yet, that I understand how to do it.

The paragraphs preprocess question makes me think maybe I should be overriding the fields_formatter, but what I've been working on up to this point is theme_preprocess_paragraphs_items(). That seems like it should allow me to do what I want, I can see that I could loop through $variables['element']['#items'] or maybe the integer keys of $variables['element'], but how to change those so that they append ', ' or ', and ' or whatever as appropriate (outside of the link on link items is escaping me). (I do understand how to determine what should be appended, just not where to append it to make drupal output what I want.

Answer 1

append ', ' or ', and ' or whatever as appropriate

You can use CSS to accomplish this

HTML

<div class="paragraphs-items paragraphs-items-field-doc-editor paragraphs-items-field-doc-editor-full paragraphs-items-full">
  <div class="label-inline">
    Editor:&nbsp;
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            Person 1
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            Person 2
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            Person 3
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            Person 4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="paragraphs-items paragraphs-items-field-doc-author paragraphs-items-field-doc-author-full paragraphs-items-full">
  <div class="field-doc-author inline">
    <div class="field-label">
      Author:&nbsp;
    </div>
    <div class="field-items">
      <div class="field-item even">
        <div class="entity entity-paragraphs-item paragraphs-item-doc-iges-contrib-pb" about="" typeof="">
          <div class="content">
            <div class="field-pb-doc-iges-staff">
              <div class="field-items">
                <div class="field-item even">
                  <a href="/person4">Person 4</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="paragraphs-items paragraphs-items-field-doc-editor paragraphs-items-field-doc-editor-full paragraphs-items-full">
  <div class="label-inline">
    Translator:&nbsp;
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            <a href="/person5">Person 5</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="entity entity-paragraphs-item paragraphs-item-doc-other-contrib-pb" about="" typeof="">
    <div class="content">
      <div class="field-pb-doc-other-fullname">
        <div class="field-items">
          <div class="field-item even">
            <a href="/person6">Person 6</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.paragraphs-items { /* start each field on a new line*/
    clear: left;
}

.paragraphs-items div { /* eliminate the blocky results of div hell (eliminate some extra spacing in the process)*/
    float: left;
}

.paragraphs-items .entity-paragraphs-item .content:after { /* default to putting commas after every value … */
    content: ", ";
}

.paragraphs-items .entity-paragraphs-item:last-child .content:after { /* … except the last one */
    content: "";
}

.paragraphs-items .entity-paragraphs-item:nth-last-child(2) .content:after { /* The last two items in the series should be separated by a ", and " … */
    content: ", and ";
}

.paragraphs-items .entity-paragraphs-item:nth-last-child(2):nth-child(2) .content:after { /* … unless there are only two items, in which case it should be " and " */
    content: " and ";
}
      

EXAMPLE DEMO

Note in content: ", " since it won't pick up the empty space (by pressing the space bar) I used the ALT+0160 trick to make the empty space.