Comment encapsuler deux éléments d'un tableau de rendu dans une div?

Compte tenu de ce tableau rendable:

$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'),
    ), 
  );

Comment encapsuler ces deux éléments dans une seule DIV?

7 theming

— Justin
source

Réponses:

Vous pouvez également utiliser l' #containerélément de formulaire et un code similaire à celui-ci:

$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'),
);

L' élément #container enveloppe ses éléments enfants avec une <div>balise, dont la classe CSS est celle passée dans la #attributespropriété.

Vous pouvez même utiliser un conteneur pour l'élément "twitter-icon", mais cela ne vous donne aucun avantage, sauf dans le cas où vous pourriez éventuellement ajouter un élément à cela, comme avec le code suivant:

$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
source

Pour moi, c'est la meilleure réponse, car elle utilise la structure du tableau physique pour représenter ce qui est enveloppé, copiera et collera mieux (le déplacement d'un élément dans la réponse @ninjascorner pourrait casser les DIV d'ouverture / fermeture), et ne nécessite pas de supplément fonctions thématiques. Merci!

— Justin

C'est exact: vous pouvez ajouter un autre élément qui est rendu dans le même conteneur, sans déplacer la #suffixpropriété du dernier élément, ou la #prefixpropriété du premier élément, vers le nouvel élément ajouté. Comme vous l'avez dit, c'est moins sujet aux erreurs.

— kiamlaluno

C'est ce que tu cherches?

$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>',
    ), 
);

J'espère que cela pourra aider!

— ninjascorner
source

@nija + 1ed, Excellente réponse J'avais oublié ces attributs. Veuillez lire ma réponse, cela peut-il être réalisé grâce à une alternative basée sur le thème de votre suffixe et préfixe.

— stefgosselin

@stefgosselin, vous voulez dire que vous voulez créer un fichier tpl pour le thème?

— ninjascorner

Merci pour cette réponse. Je savais comment faire cela sur un élément, mais je n'ai pas pensé à diviser le suffixe et le préfixe. Intéressant. Cela me semble désordonné, mais je ne peux pas expliquer pourquoi donc je ne peux pas vraiment avoir de problème.

— Justin

@ninjascorner Désolé pour le retard, je n'ai pas pu trouver la note que j'avais à ce sujet. Il y a aussi, je pense, un moyen possible moins élégant que les autres réponses, utilisable dans le thème ou le module qui utilise le hook de thème theme_render_example_add_div Voir api.drupal.org/api/examples/… )

— stefgosselin

Ce n'est bon que si vous êtes super sûr que les deux éléments seront toujours rendus. Il est facile de se retrouver avec <div> non fermé lors du fractionnement comme celui-ci.

— kufeiko

Vous pouvez également créer un thème pour cela.

$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'),
);

Et dans votre thème crochet:

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

Et dans la fonction thème:

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;
}

J'utilise ceci dans Drupal 6, je ne sais pas si ça marche aussi en D7 mais j'espère que oui

— Gnuget
source

Oui, j'ai compris cette méthode après la publication (enfin, je copie le module d'exemples). Cela fonctionne très bien, mais je ne le considère pas comme la meilleure méthode car (si je comprends bien), vous devez mettre votre nom de classe dans la fonction, ce qui réduit sa réutilisabilité.

— Justin