1

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.

0

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.

  • @UltraBob do you know why that is? is there some extra div or something that causes it to not work? – No Sssweat Mar 15 '16 at 14:23
  • No, it's just that Apple, and Orange is incorrect – UltraBob Mar 15 '16 at 22:26
  • I got it working if I can live without my beloved oxford comma: jsfiddle.net/20gyk70e/14 but I want to know how to do it for the case when I'm building downloadable citation data and can't rely on css to transform it, but maybe I have a bigger set of issues there, getting it to leave out the markup. – UltraBob Mar 16 '16 at 1:04
  • OK, so after going in a bunch of places and trying to set everything back to default drupal markup to make this as universal as possible, this is what I came up with. jsfiddle.net/ybsp87rd Please have a look, and if you agree with it, modify your answer, then I'll accept. It would be even better if it would work with the oxford comma, but so far I've not thought of a way to make that work. – UltraBob Mar 16 '16 at 8:09
  • 1
    Pierre, you can follow the link to see what she is talking with on that. On the mac I found that pressing alt-space worked. – UltraBob Mar 17 '16 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.