it-swarm.it

Come si aggiunge una classe CSS a un array di rendering?

In un file modello, prima di print render($content['field_image']); Vorrei aggiungere una classe CSS all'immagine nel $content['field_image'] rendering array. Come posso fare questo? Ecco l'array di rendering:

Array
(
[#theme] => field
[#weight] => 2
[#title] => Image
[#access] => 1
[#label_display] => hidden
[#view_mode] => full
[#language] => und
[#field_name] => field_image
[#field_type] => image
[#field_translatable] => 1
[#entity_type] => node
[#bundle] => ll_basic_page
[#object] => stdClass Object
[#items] => Array
    (
        [0] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array
                    (
                    )
            )
    )
[#formatter] => image
[0] => Array
    (
        [#theme] => image_formatter
        [#item] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array ()
            )
        [#image_style] => 
        [#path] => 
    )
)

E questo è l'output HTML:

<div class="field field-name-field-image field-type-image field-label-hidden" thmr="thmr_96">
  <div class="field-items">
    <div class="field-item even">
      <span thmr="thmr_97">
        <span thmr="thmr_98">
          <img typeof="foaf:Image" src="http://..../sites/default/files/imageFile.jpg" alt="alt text" />
        </span>
      </span>
    </div>
  </div>
</div>

Ho provato ad aggiungere una classe a $content['field_image']['#attributes']['class'], ma non ha funzionato.
Hai qualche idea su come posso ottenere quello che sto cercando di fare?

6
Mark

Credo che sarebbe:

$content['field_image'][0]['#attributes']['class'][] = 'my-class';

O per assegnarlo a ogni elemento,

foreach (element_children($content['field_image'] as $key) {
  $content['field_image'][$key]['#attributes']['class'][] = 'my-class';
}
8
tim.plunkett

Le soluzioni di cui sopra non hanno funzionato per me (e non sono state chiaramente descritte in ogni caso). Ecco come ho risolto questo problema esatto. Questo probabilmente non è il modo migliore, e certamente non l'unico, ma è un "modo Drupal" valido e funziona. Apri il file template.php per il tuo modello.

Incolla la seguente funzione, che dovrai MODIFICARE e personalizzare per il tuo scenario di utilizzo. Ad esempio, è necessario sostituire <TEMPLATENAME> Con il nome del modello e aggiungere o sottrarre le classi come desiderato e altre cose, come vedrai.

function <TEMPLATENAME>_preprocess_image(&$variables) {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}

Ho creato un'istruzione "if" per determinare quando aggiungere la classe all'immagine, ma dovrai personalizzarla come preferisci: potresti eliminarla del tutto se desideri una classe su TUTTE le immagini del campo immagine, oppure potrebbe dire if (drupal_is_front_page()) se vuoi solo applicarlo sulla prima pagina, ecc.

Nel mio caso, ho creato uno stile di immagine (Configurazione> Media> Stili di immagine) per Staff Photos e ho aggiunto la clausola if per applicare solo le mie classi preferite alle immagini di quello specifico stile di immagine. Penso che sia un ottimo modo per farlo, ma puoi fare quello che ti piace.

Ora, ogni volta che sto visualizzando un nodo che contiene un campo immagine con lo stile dell'immagine di "Staff Photo", le classi appaiono magicamente nel tag IMG, che è proprio quello di cui avevo bisogno.

4
Matt F

Questo problema sembra risolto nel nucleo 7.23

Nel nodo tpl aggiungi questo in alto:

<?php
$content['field_name'][0]['#item']['attributes']['class'][] = 'your-class';
?>
2
FVANtom

Puoi anche fare qualcosa del genere:

  $array['container']['#prefix'] = '<div id = "container">';
  $array['container']['#suffix'] = '</div>';
2
starsinmypockets

Se hai bisogno di alcune condizioni per applicare la classe, dovrai raccogliere informazioni sui campi della pagina.

Puoi farlo con la funzione template_preprocess_field(&$variables).

template_preprocess_field(&$variables) {
  if ($variables['element']['#field_type'] == 'image') {
        $variables['items'][0]['#item']['attributes']['class'][] = 'your-class';
  }
}
0
Aporie

Per quelli di voi in un "campo - field-image.tpl.php", usare questo:

$item['#item']['attributes']['class'][] = 'your-class';
0
ben.hamelin

Stavo cercando una soluzione simile, ma per lo styling di un elemento di input del modulo e non di un'immagine. All'interno del mio commerce_coupon.checkout_pane.inc personalizzato ho aggiunto un array #attributes contenente le classi necessarie.

Quindi, se stai cercando una soluzione aggrovigliata modulo anziché modello incorporato, questa potrebbe essere una buona alternativa.

In esecuzione su Drupal 7.39

  $pane_form['coupon_add'] = array(
    '#type' => 'button',   
    '#value' => t('Add coupon'),    
    '#name' => 'coupon_add',    
    '#limit_validation_errors' => array(),    
    '#ajax' => array(    
      'callback' => 'commerce_coupon_add_coupon_callback',    
      'wrapper' => 'commerce-checkout-coupon-ajax-wrapper',    
    ),
    '#attributes' => array('class' => array('btn', 'btn-13')),
0
rawdesk.be