Remove field-collection-view and field-collection-container fromt field output

Question

I am using the following modules:

• Paragraphs
• Field Collection

I am trying to Foundation 5 classes to re-create the zurb foundation orbit slider with unlimited slides. Initially my problem was limiting what seems to be unnecessary Drupal <div> tags and classes so I could control the HTML output as much as possible. My workaround was simply installing Fences which gave me great results. I have the debugging turned on in the settings.php file to just make sure my naming conventions are correct and to make sure my code is outputting correctly. So far it is but with one slight problem.

So far I have spent days trying to nut out why the output of my field collection "field_add_image" is rendering a containing div of <div class="field-collection-container clearfix active">, nested within that is another containing div which the field collection out is located. Each item is nested within another div tag like so <div class='field-collection-view clearfix active">. This has an unlimited field which can be added to a paragraph item.

I went into the field collection module to identify where the classes to these containing div's were added which seem to be using the field_collection_field_formatter_view() which I found in the function within the module file.

I have installed Fences as well, which may be conflicting. the settings of Fences is set to:

• Override the default wrapper markup with Fences lean markup (single div wrapper)
• Use Drupal's default classes" set as the default classes

All the fields are outputting the correct HTML output which is great, but for the life of me I cannot remove those two containing divs.

Here is the folder structure of the files I have copied from the systems folder within Drupal core and placed in templates folder. Below is the naming conventions I used with the machine names.

Theme name

jacob_d7_theme

Field collection name

field_add_image

Paragraph Bundle

paragraphs-item--scrolling_image.tpl.php code below

<ul class="example-orbit" data-orbit> 
<?php print render($content['field_add_image']); ?>
</ul>

Fields in field_add_image

• Banner Image: field_3_col_img1
• Caption: field_caption

Templates folder includes

Paragraphs

paragraphs-item--scrolling_image.tpl.php

All code in document

<ul class="example-orbit" data-orbit>
<?php print render($content['field_add_image']); ?>
</ul>

Fields

• field--field_add_image.tpl.php
• field--field_caption.tpl.php

Both of these field files have the same code in them to remove any unneccesary div containers for fields.

<?php foreach ($items as $delta => $item): ?>
<?php print render($item); ?>
<?php endforeach; ?>

I have also experimented with but with no avail.

• field--field_add_image--scrolling_image.tpl.php
• field--field-add-image--scrolling-image.tpl.php

I am not sure what I am missing as all the custom template files that I have made work they just keep getting contained by those two divs.

Answer 1

I managed to find the answer.

Through adding this function I replaced the containing <div class="field-cllection-container> with nothing "".

function jacob_d7_theme_field_attach_view_alter(&$output, $context) {

  // First check we're dealing with a field collection field.
  if(!empty($output['field_add_image'])) {
    // Now check for our specific field collection field.
    if ($output['field_add_image']['#field_name'] === 'field_add_image' ) {

      // Alter the prefix.
      $output['field_add_image']['#prefix'] = '';
    }
  }

}

then to remove the containing div for each field item I created a file called field-collection-view.tpl.php with only the following code. to remove the <div class="field-collection-view clearfix">.

<?php
  print $element['#children'];
?>