Customize HTML for field in field collection

Question

My field collection template is ds-1col--field-collection-item-field-video-item.tpl.php. I need to access the Image field so that I can customize the HTML. I've tried the following by neither work:

<?php print $fields['field_video_image'][0]['und']['value']; ?>

and

<?php print $fields['field_video_image']->content; ?>

I also need to wrap each field collection item in its own div. For instance, each image should be wrapped in a videoClip div but right now all field items are rendering inside videoClip. Also I need to get the delta value of each field item to add it to as part of a CSS class. How can I do this?

Current fields wrapped in custom HTML together:

<div class="ds-1col entity entity-field-collection-item field-collection-item-field-video-item view-mode-full clearfix">
<div class="videoClip">
    <div class="videoImg">
        <div class="featuredVideo"></div>
        <div class="field field-name-field-video-image field-type-image field-label-hidden">
            <div class="field-items">
                <div class="field-item even"><!-- image here --></div>
                <div class="field-item odd"><!-- image here --></div>
            </div>
        </div>
    </div>
</div>
<div class="field field-name-field-video-caption field-type-text field-label-hidden">
    <div class="field-items">
        <div class="field-item even"><!-- video caption --></div>
        <div class="field-item odd"><!-- video caption --> </div>
    </div>
</div>

Answer 1

If your template is being recognized you can access the fields and field content through the $content array. Below is the normal field collection item template file that comes with the field_collection module.

<?php

/**
 * @file
 * Default theme implementation for field collection items.
 *
 * Available variables:
 * - $content: An array of comment items. Use render($content) to print them all, or
 *   print a subset such as render($content['field_example']). Use
 *   hide($content['field_example']) to temporarily suppress the printing of a
 *   given element.
 * - $title: The (sanitized) field collection item label.
 * - $url: Direct url of the current entity if specified.
 * - $page: Flag for the full page state.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. By default the following classes are available, where
 *   the parts enclosed by {} are replaced by the appropriate values:
 *   - entity-field-collection-item
 *   - field-collection-item-{field_name}
 *
 * Other variables:
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess()
 * @see template_preprocess_entity()
 * @see template_process()
 */
?>
<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <div class="content"<?php print $content_attributes; ?>>
    <?php
      print render($content);
    ?>
  </div>
</div>

Using devel you can use dpm($content); and you will see the below setup.

So as you see in field collection item you could use $content['field_field_1'][0]['#markup'] if your field has extra markup (like for instance if it was set to display as a link to from entity_reference). You could use $content['field_field_1']['#items'][0]['safe_value'] to get the safe value of the field (sanitized). If you want to customize the markup around a certain field you can hide the field and the render it somewhere else. See the below code for an example.

<?php

/**
 * @file
 * Default theme implementation for field collection items.
 *
 * Available variables:
 * - $content: An array of comment items. Use render($content) to print them all, or
 *   print a subset such as render($content['field_example']). Use
 *   hide($content['field_example']) to temporarily suppress the printing of a
 *   given element.
 * - $title: The (sanitized) field collection item label.
 * - $url: Direct url of the current entity if specified.
 * - $page: Flag for the full page state.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. By default the following classes are available, where
 *   the parts enclosed by {} are replaced by the appropriate values:
 *   - entity-field-collection-item
 *   - field-collection-item-{field_name}
 *
 * Other variables:
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess()
 * @see template_preprocess_entity()
 * @see template_process()
 */
?>
<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // Hide field collection field.
      hide($content['field_image']);
      print render($content);
    ?>
  </div>
</div>
<section class="row">
  <div class=" large-4 columns">
    <!-- Render field_image field collection field-->
    <?php print render($content['field_image']); ?>
  </div>
</section>

Hopefully all of this helps, if not let me know and I can adjust to what exactly you are needing or explain more :)

Answer 2

You need to assign field collection field in hook_preprocess_node as a variable then use this variable in your node template file. Some thing like this