¿Cómo envuelvo dos elementos de la matriz de renderizado en un div?

Dada esta matriz renderizable:

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
    ), 
  );

¿Cómo envuelvo estos dos elementos en un solo DIV?

7 theming

— Justin
fuente

Respuestas:

También puede usar el #containerelemento de formulario y un código similar al siguiente:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
);

El elemento #container envuelve sus elementos secundarios con una <div>etiqueta, cuya clase CSS es la que se pasa en la #attributespropiedad.

Incluso podría usar un contenedor para el elemento "twitter-icon", pero eso no le da ningún profesional, excepto en el caso de que posiblemente pueda agregar un elemento a eso, como con el siguiente código:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('twitter-icon'),
  ),
);

if ($condition) {
  $wrapper['twitter-icon']['twitter-icon-text'] => array(
    '#type' => 'markup',
    '#markup' => t('Icon text'),
  );
}

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
);

— kiamlaluno
fuente

Para mí, esta es la mejor respuesta, ya que utiliza la estructura de matriz física para representar lo que se está envolviendo, copiará y pegará mejor (mover un elemento en la respuesta @ninjascorner podría romper los DIV de apertura / cierre), y no requiere extra funciones temáticas ¡Gracias!

— Justin

Eso es correcto: puede agregar otro elemento que se representa en el mismo contenedor, sin mover la #suffixpropiedad del último elemento, o la #prefixpropiedad del primer elemento, al nuevo elemento agregado. Como dijiste, esto es menos propenso a errores.

— kiamlaluno

¿Es esto lo que estás buscando?

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
      '#prefix' => '<div class="test">',
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/fdgf'),
      '#suffix' => '</div>',
    ), 
);

¡Espero que ayude!

— ninjascorner
fuente

@nija + 1ed, Gran respuesta, me había olvidado de esos atributos. Lea mi respuesta, ¿se puede lograr esto a través de una alternativa basada en temas a su sufijo y prefijo?

— stefgosselin

@stefgosselin, ¿quiere decir que desea crear un archivo tpl para crear un tema?

— ninjascorner

Gracias por esta respuesta Sabía cómo hacer esto en un elemento, pero no se me ocurrió dividir el sufijo y el prefijo. Interesante. Me parece desordenado, pero no puedo expresar por qué, así que realmente no puedo tener un problema.

— Justin

@ninjascorner Perdón por el retraso, no pude encontrar la nota que tenía sobre este tema. Hay también creo que una forma posible menos elegante que otras respuestas, que pueden utilizarse en el tema o módulo que está utilizando el gancho tema theme_render_example_add_div Ver api.drupal.org/api/examples/... )

— stefgosselin

Esto solo es bueno si está súper seguro de que ambos elementos siempre se procesarán. Es fácil terminar con <div> sin cerrar cuando se divide así.

— kufeiko

También puedes crear un tema para esto.

$form['twitter']['#theme'] = 'my_twitter_theme';

$form['twitter']['icon'] = array(
'twitter-icon' => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$form['twitter']['link'] = array(
  '#type' => 'markup',
  '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
);

Y en tu tema de gancho:

function my_hook_theme(){
  return array(
    'my_twitter_theme' => array('form' => NULL)
  );
}

Y en la función de tema:

function theme_my_twitter_theme($form){
  $output = "";

  $output .= "<div class=\"twitter\">";
  $output .= drupal_render($form['icon']);
  $output .= drupal_render($form['link']);
  $output .= "</div>";    

  $output .= drupal_render($form);
  return $output;
}

Lo uso en Drupal 6, no estoy seguro si funciona también en D7 pero espero que sí

— Gnuget
fuente

Sí, descubrí este método después de publicar (bueno, copio el módulo de ejemplos). Funciona muy bien, pero no lo considero el mejor método porque (si lo entiendo correctamente), tiene que poner el nombre de su clase en la función, reduce su reutilización.

— Justin