Ajouter un attribut de style pour afficher les champs

12

Je voudrais ajouter un attribut de style à chaque champ de titre à mon avis. J'ai créé un champ pour une couleur. J'ai essayé de réécrire le résultat comme ceci:

<h2 style="color: [field_color];">[title_1]</h2>

Mais l'attribut style sera supprimé. J'utilise Drupal 7.

Toute aide appréciée.

Ksn
la source
Pourquoi est-il supprimé? Avez-vous essayé d'utiliser un champ de texte global à la place?
Alex Gill
Merci pour votre réponse! Que voulez-vous dire par un champ de texte global? Les paramètres à mon avis: Format: Liste non formatée Afficher: Champs
Ksn
Vous avez la possibilité d'ajouter un champ «texte global». Ce champ doit aller après tout autre champ que vous avez déjà ajouté. Vous pouvez ensuite utiliser des jetons dans ce champ personnalisé pour créer des éléments similaires à ce que vous avez fait ci-dessus. Vous pouvez ensuite masquer les champs affichés dans le champ personnalisé.
Alex Gill
1
Votre meilleure option est probablement de créer un fichier de modèle personnalisé pour ce champ ou d'utiliser une classe basée sur le jeton mentionné ci-dessous.
Alex Gill
1
Si vous regardez sous «Avancé» sur le côté droit, il y a une option pour «Informations sur le thème», ici il vous donnera quelques suggestions de modèles.
Alex Gill

Réponses:

4

Vous pouvez définir une classe dans le champ de titre à l'aide des paramètres de style, comme illustré ci-dessous. Vous pouvez utiliser des remplacements de jetons dans les paramètres de style pour définir la classe dans le champ de titre.

entrez la description de l'image ici

En utilisant un petit javascript ou jquery, lisez le champ de classe de titre et définissez la même couleur que le nom de classe en utilisant la propriété CSS .

Anil Sagar
la source
2
Peut-être que votre solution fonctionne, mais je dois résoudre ce problème sans Javascript. Est-ce possible?
Ksn
2
Vous ne pouvez pas injecter directement la valeur du champ dans la propriété de style en raison de problèmes de sécurité. Voir le problème ici drupal.org/node/853880
Anil Sagar
Ensuite, vous devez écrire une classe CSS distincte pour chaque couleur, mais dans le pire des cas, vous devez écrire 16 millions de classes :(. Javascript ou jquery serait mieux.
Mathankumar
2
Anil, j'ai essayé votre solution mais Drupal a supprimé # de la couleur, j'ai donc trouvé une autre solution avec jQuery. J'ai ajouté les données d'attribut au champ: <h2 data-color = "[field_color]"> [title_1] </h2> J'ai étudié d'autres solutions avec des modèles, mais je n'ai pas trouvé la bonne façon de le résoudre.
Ksn
1

Vous pouvez créer un tpl pour ce champ (exemple: views-view-field-MY-VIEW-NAME-page.tpl.php), dans ce tpl vous pouvez ajouter le jeton en écrivant ceci:

<h2 style="color: <?php print $field->last_tokens['[field_color]'] ?>;"><?php print $field->last_tokens['[title_1]'] ?></h2>
David Motilla
la source
1

J'ai également dû inclure la valeur d'un champ comme couleur en ligne pour un champ particulier. Après avoir parcouru le Web pour une solution facilement personnalisable, j'ai fini par faire ceci:

  1. Ajoutez la valeur de la couleur en tant que jeton de classe CSS, tout comme l'image dans le post précédent.
  2. Réécrivez la fonction hook_preprocess_views_view_field () comme ceci:

     function hook_preprocess_views_view_fields(&$vars) {
      $view = $vars['view'];
    
      // Loop through the fields for this view.
      $previous_inline = FALSE;
      $vars['fields'] = array(); // ensure it's at least an empty array.
      foreach ($view->field as $id => $field) {
    
        // render this even if set to exclude so it can be used elsewhere.
        $field_output = $view->style_plugin->get_field($view->row_index, $id);
        $empty = $field->is_value_empty($field_output, $field->options['empty_zero']);
        if (empty($field->options['exclude']) && (!$empty || (empty($field->options['hide_empty']) && empty($vars['options']['hide_empty'])))) {
          $object = new stdClass();
          $object->handler = & $view->field[$id];
          $object->inline = !empty($vars['options']['inline'][$id]);
    
          $object->element_type = $object->handler->element_type(TRUE, !$vars['options']['default_field_elements'], $object->inline);
          if ($object->element_type) {
            $class = '';
            if ($object->handler->options['element_default_classes']) {
              $class = 'field-content';
            }
    
            if ($classes = $object->handler->element_classes($view->row_index)) {
              if ($class) {
                $class .= ' ';
              }
              $class .= $classes;
            }
    
            $class_array = explode(' ', $class);
            foreach ($class_array as $cid => $candidate) {
              // Find the color hex code.
              if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
                $style = 'color:#' . $candidate . ';';
                unset($class_array[$cid]);
              }
            }
    
            $pre = '<' . $object->element_type;
            if ($class) {
              $pre .= ' class="' . implode(' ', $class_array) . '"';
            }
            if ($style) {
              $pre .= ' style="' . $style . '"';
            }
            $field_output = $pre . '>' . $field_output . '</' . $object->element_type . '>';
          }
    
          // Protect ourself somewhat for backward compatibility. This will prevent
          // old templates from producing invalid HTML when no element type is selected.
          if (empty($object->element_type)) {
            $object->element_type = 'span';
          }
    
          $object->content = $field_output;
          if (isset($view->field[$id]->field_alias) && isset($vars['row']->{$view->field[$id]->field_alias})) {
            $object->raw = $vars['row']->{$view->field[$id]->field_alias};
          }
          else {
            $object->raw = NULL; // make sure it exists to reduce NOTICE
          }
    
          if (!empty($vars['options']['separator']) && $previous_inline && $object->inline && $object->content) {
            $object->separator = filter_xss_admin($vars['options']['separator']);
          }
    
          $object->class = drupal_clean_css_identifier($id);
    
          $previous_inline = $object->inline;
          $object->inline_html = $object->handler->element_wrapper_type(TRUE, TRUE);
          if ($object->inline_html === '' && $vars['options']['default_field_elements']) {
            $object->inline_html = $object->inline ? 'span' : 'div';
          }
    
          // Set up the wrapper HTML.
          $object->wrapper_prefix = '';
          $object->wrapper_suffix = '';
    
          if ($object->inline_html) {
            $class = '';
            if ($object->handler->options['element_default_classes']) {
              $class = "views-field views-field-" . $object->class;
            }
    
            if ($classes = $object->handler->element_wrapper_classes($view->row_index)) {
              if ($class) {
                $class .= ' ';
              }
              $class .= $classes;
            }
    
            $object->wrapper_prefix = '<' . $object->inline_html;
            if ($class) {
              $object->wrapper_prefix .= ' class="' . $class . '"';
            }
            $object->wrapper_prefix .= '>';
            $object->wrapper_suffix = '</' . $object->inline_html . '>';
          }
    
          // Set up the label for the value and the HTML to make it easier
          // on the template.
          $object->label = check_plain($view->field[$id]->label());
          $object->label_html = '';
          if ($object->label) {
            $object->label_html .= $object->label;
            if ($object->handler->options['element_label_colon']) {
              $object->label_html .= ': ';
            }
    
            $object->element_label_type = $object->handler->element_label_type(TRUE, !$vars['options']['default_field_elements']);
            if ($object->element_label_type) {
              $class = '';
              if ($object->handler->options['element_default_classes']) {
                $class = 'views-label views-label-' . $object->class;
              }
    
              $element_label_class = $object->handler->element_label_classes($view->row_index);
              if ($element_label_class) {
                if ($class) {
                  $class .= ' ';
                }
    
                $class .= $element_label_class;
              }
    
              $pre = '<' . $object->element_label_type;
              if ($class) {
                $pre .= ' class="' . $class . '"';
              }
              $pre .= '>';
    
              $object->label_html = $pre . $object->label_html . '</' . $object->element_label_type . '>';
            }
          }
    
          $vars['fields'][$id] = $object;
        }
      }
    
    }

Comme vous pouvez le voir, j'ai ajouté ces lignes:

$style = '';
$class_array = explode(' ', $class);
foreach ($class_array as $cid => $candidate) {
  // Find the color hex code.
  if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
    $style = 'color:#' . $candidate . ';';
    unset($class_array[$cid]);
  }
}

Et changez la ligne sous:

$pre = '<' . $object->element_type;
if ($class) {
  $pre .= ' class="' . implode(' ', $class_array) . '"';
}
if ($style) {
  $pre .= ' style="' . $style . '"';
}
Pol Dellaiera
la source
0

ajoutez un nom dans le champ anil suggéré puis ouvrez style.css dans votre dossier de thème et tapez ".my-css-name" suivi des résultats css souhaités tels que:

.my-css-name {couleur: rouge; fond: vert; }

aaronStarK
la source
0

Je fais juste quelque chose de similaire et voici ce que j'ai fait:

1- Créez une vue avec des champs de couleur et de titre.

2- Créez un "views-view-fields.tpl" personnalisé pour cette vue. (Un modèle personnalisé uniquement pour le champ de couleur, m'a montré une erreur)

3- A la field->contentligne, ajoutez / remplacez ce dont vous avez besoin ....<h2 style="color: #<?php print $field->content; ?>">

/ / / / A partir de maintenant, je ne l'ai pas testé, mais ça devrait fonctionner correctement / / / /

4- Exclure le champ de titre et l'afficher sur l'en-tête / groupe

5- Créez un "views-view-unformatted.tpl" personnalisé pour cette vue.

6- Dans cette vue, nous ajoutons <?php print $title; ?></h2>après <?php print $row; ?>. (nous ajoutons le titre et fermons la balise H ouverte dans le premier modèle)


DERNIÈRE ÉDITION:

Vous pouvez simplement utiliser des vues PHP pour imprimer tout ce dont vous avez besoin et le style ne sera pas filtré.

Federico Arena
la source
0

J'ai eu ce même problème et je l'ai résolu en créant un modèle nommé

views-view-field--field_name_here.tpl.php

Dans mon cas, le code que j'ai utilisé pour créer le code HTML dont j'avais besoin était:

<?php

$bg_color = $variables["row"]->field_field_button_background_color[0]["raw"]["rgb"];
$link_title = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["title"];
$link_url = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["url"];

echo '<a style="background-color:'.$bg_color.'" href="'.$link_url.'">'.$link_title.'</a>';

Activation du module Devel et utilisation

dpm($row);

dans le fichier modèle était TRÈS utile. Je n'aurais pas pu comprendre ça sans ça.

evanmcd
la source
0

La solution la plus simple que j'ai pu trouver était d'insérer la valeur comme attribut de données. Ensuite, dans mon JavaScript, je prends la valeur du champ de données et met à jour le CSS pour refléter le changement.

Hawkee
la source