1

I have a content type called resources which has a bunch of fields including a screenshot image field. When I order the items the screenshot shows at the bottom (or at whatever weight I set it). But what I want is for the screenshot to appear to the RIGHT of the text in the other fields (basically like a float:right with css). But although I have the class of the item using Firebug and have styled it float:right accordingly it still doesn't go next to the other fields, it gets placed below them...to the right.

I think what I need to do is find a way to add a wrapper to the other fields so I can float that left and my screenshot field right...but I don't know how to add a wrapper to fields in a content type.

Anyone know of a good way to do this?

Improve this question
1
  • There is no best way, just plenty of ways depending on your setup and requirement. Do you have Display Suite installed already? then use it. Do you want to do it in the theme? Do you want to do it via a contrib module. The list goes on.
    – J. Reynolds
    Feb 16, 2015 at 11:42

5 Answers 5

Reset to default
1

If you want to take a theme based approach you can provide a theme function in template.php or a template file. You can see the details here: https://api.drupal.org/api/drupal/modules!field!field.module/function/theme_field/7

I'd put a specific theme function in the template file based on the link above and alter it for my own needs.

    function MY_THEME_field_field_SCREENSHOT($variables) {
      $output = '';

      // Render the label, if it's not hidden.
      if (!$variables['label_hidden']) {
        $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
      }

      // Render the items.
      $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
      foreach ($variables['items'] as $delta => $item) {
        $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
        $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
      }
      $output .= '</div>';

      // Render the top-level DIV.
      $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

      return $output;
    }

I'd do that rather than add a module because it seems more efficient to me, but your use case may be different.

Improve this answer
1
  • 1
    thanks! I'm going with your approach, although I appreciate everyone's responses. I prefer a code-based approach whenever possible. I actually decided to go this route: drupalwatchdog.com/volume-2/issue-2/angry-themer. That allows me to hide specific $content variables (tease them out if you will) and then print them out where I want them (a la the screenshot variable) so that I can then apply a <div> tag around print render($content) and print render($content['screenshot']) explicitly.
    – Sage
    Feb 17, 2015 at 1:19
2

Maybe the Field Group module is what you are looking for? According to the documentation, it provides many kind of wrappers.

Hope that helps,

Improve this answer
0

You can use Field Formatter Class Module

Allows site administrators to add classes to the outer HTML wrapper for any field display, so that CSS and Javascript can target them.

OR

You can use the hook_form_alter and can add your wrapper div as a prefix and suffix to the fields, in your custom module eg: $form['title']['#prefix'] = '<div class="form-box">';

Improve this answer
0

It might be overkill for this issue, but what I would do is copy node.tpl.php to node--resources.tpl.php and put the wrapper in this template file.

Improve this answer
0

If you are familiar with Views, there is "Style settings: customize field and label wrapper"(see screenshot) option per field. Then, set the path per content type with "%"(whildcard).

PS: They even have the "Global: Custom text" field in Views, so you have the full control with "Replacement Patterns".

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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