Wie binde ich zwei Render-Array-Elemente in ein Div ein?

Wenn man dieses darstellbare Array annimmt:

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

Wie verpacke ich diese beiden Elemente in einem einzigen DIV?

7 theming

— Justin
quelle

Antworten:

Sie können auch das #containerFormularelement und den folgenden Code verwenden:

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

Das Element #container umschließt seine untergeordneten Elemente mit einem <div>Tag, dessen CSS-Klasse die in der #attributesEigenschaft übergebene ist.

Sie könnten sogar einen Container für das "twitter-icon" -Element verwenden, aber das bringt Ihnen keinen Vorteil, es sei denn, Sie könnten dem möglicherweise ein Element hinzufügen, wie im folgenden Code:

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

Für mich ist dies die beste Antwort, da sie die physische Array-Struktur verwendet, um darzustellen, was umgebrochen wird, besser kopiert und eingefügt wird (das Verschieben eines Elements in der @ ninjascorner-Antwort kann die öffnenden / schließenden DIVs beschädigen) und erfordert keine zusätzlichen Theme-Funktionen. Vielen Dank!

— Justin

Das ist richtig: Sie können ein anderes Element hinzufügen, das im selben Container gerendert wird, ohne die #suffixEigenschaft vom letzten Element oder die #prefixEigenschaft vom ersten Element zum neu hinzugefügten Element zu verschieben. Wie Sie sagten, ist dies weniger fehleranfällig.

— kiamlaluno

Ist es das wonach du suchst?

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

Ich hoffe, das hilft!

— ninjascorner
quelle

@nija + 1ed, Tolle Antwort, ich hatte diese Attribute vergessen. Bitte lesen Sie meine Antwort, kann dies durch themenbasierte Alternative zu Ihrem Suffix und Präfix erreicht werden.

— Stefgosselin

@stefgosselin, meinst du, du möchtest eine tpl-Datei erstellen, um sie zu gestalten?

— Ninjascorner

Danke für diese Antwort. Ich wusste, wie man das bei einem Element macht, aber es ist mir nicht aufgefallen, das Suffix und das Präfix aufzuteilen. Interessant. Es fühlt sich für mich chaotisch an, aber ich kann nicht artikulieren, warum, also kann ich kein Problem haben.

— Justin

@ninjascorner Entschuldigung für die Verspätung, ich konnte den Hinweis, den ich zu diesem Thema hatte, nicht finden. Es gibt auch glaube ich , eine Art und Weise möglich , weniger elegant als andere Antworten, verwendbar Thema oder Modul, das das Thema Haken mit theme_render_example_add_div See api.drupal.org/api/examples/... )

— stefgosselin

Dies ist nur gut, wenn Sie sehr sicher sind, dass beide Elemente immer gerendert werden. Bei einer solchen Aufteilung kann es leicht zu einem nicht geschlossenen <div> kommen.

— Kufeiko

Sie können auch ein Thema dafür erstellen.

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

Und in Ihrem Themenhaken:

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

Und in der Themenfunktion:

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

Ich benutze dies in Drupal 6, ich bin nicht sicher, ob es auch in D7 funktioniert, aber ich hoffe es

— Gnuget
quelle

Ja, ich habe diese Methode nach dem Posten herausgefunden (nun, ich kopiere das Beispielmodul). Es funktioniert prima, aber ich halte es nicht für die beste Methode, da (wenn ich es richtig verstehe) Sie Ihren Klassennamen in die Funktion einfügen müssen, um die Wiederverwendbarkeit zu verringern.

— Justin