0

I am new to PHP and Drupal. I have content type with a type list text field "Infraestructura". The values and labels are these:

  • agua | Agua de pozo
  • incendios | sistema contra incendios
  • electricidad |Electricidad

The quantity options is unlimited, is to say, the user can select unlimited options (Checkbox)

How I do to change the output for this field as image?

I need that output for this field show an image , example:

  • for: agua | agua => <img src ="images/agua.jpg">
  • for: incendios | sistema contra incendios => <img src ="images/incendios.jpg">
  • for: electricidad |Electricidad => <img src ="images/electricidad.jpg">

I'm thinking to do this using preprocess, but I not have idea. Could anyone help me please?

Here is another way to explain what I want to do:

enter image description here

Improve this question
2
  • 3
    It's simple, you just need to use CSS background image. See and try all the examples here except you just need to find the div class or ID name that belongs to each option by inspecting the element with CSS.
    – No Sssweat
    Jun 18, 2016 at 10:37
  • 1
    Also use CSS to break them into columns. Example
    – No Sssweat
    Jun 18, 2016 at 10:43

2 Answers 2

Reset to default
0

You should preprocess the field output and add a class based on the value. Then to theme in css. It's a good idea to keep the images separate and business logic separate.

<?php

/**
 * Implements template_preprocess_field().
 */
function acTheme_preprocess_field(&$vars) {
  $element = &$vars['element'];
  if ($element['#field_infraestructura'] == 'field_infraestructura') {
    $value = $vars['element']['#items'][0]['value'];
    $vars['classes_array'][] = 'type-' . drupal_clean_css_identifier($value);
  }
}

?>

Take this qwith a grain of salt - I don't see the actual code and values in my debugger, but if you replace myfield_name with the name of the field, and mytheme with the theme name (all these machine names), then it should assign the classes based on the values.

Sadly, there may be some need of tweaking this code if some mapping does not fit - so, I hope you know at least some PHP to do that.

The output classes should be somehting like class="type-agua", and then you can theme it. You need to know css, of course - there are samples in the comments under your question.

Improve this answer
4
  • Hi Alexei, thank you for your help, this is precisely what I'm looking. I replaced the parameters that you mentioned but does nothing. Am I replacing right? function acTheme_preprocess_field(&$vars) { $element = &$vars['element']; if ($element['#field_infraestructura'] == 'field_infraestructura') { if(isset($vars['element']['classes_array'])){ $value = $vars['element']['#items'][0]['value']; $vars['classes_array'][''] = 'type-' . drupal_clean_css_identifier($value); } } }
    – cfranco
    Jun 20, 2016 at 19:42
  • I have update the code in my answer - please try it. I have removed some things that could obviously make it fail.
    – Alexei Rayu
    Jun 20, 2016 at 20:26
  • Hi Alexei, thanks for your help. I could still make it work.
    – cfranco
    Jun 21, 2016 at 21:22
  • You mean you could not? Sadly, like I said initially, you need to debug the actual code to make sure that the mappings are correct. It will require you some knowledge of PHP to adjust my code to work in your case. Since you have already delved into it, set up xdebug, get an IDE that supports it, like netbeans, eclipse, or phpstorm (non-free), and check it out. :)
    – Alexei Rayu
    Jun 22, 2016 at 8:27
0

I found the solution, adding html in the same key / value field. enter image description here

Regards!

Improve this answer

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.