web-dev-qa-db-fra.com

Ajouter une classe au champ de contenu (lien)

Je veux ajouter une classe au <a> balise d'un champ composé d'un lien et d'un texte. (C'est un champ de type Lien .) Le nom du champ est content.field_c_button_link.

Dans le fichier modèle, je veux ajouter quelque chose comme ce qui suit.

{{ content.field_c_button_link.0.addClass('button blue') }}

Comment puis-je ajouter une classe correctement?

Selon la réponse de Patrick Scheffer, j'ai examiné les paramètres d'un champ où je peux ajouter des classes CSS supplémentaires, mais je n'en ai pas trouvé. Ceci est une capture d'écran de ce que je peux modifier dans le champ du lien.

screenshot

entities8themingnavigation
15
maidi

C'est une solution que j'ai trouvée, mais ce n'est pas vraiment pratique à utiliser ... Je veux vraiment une meilleure solution, comme quelque chose directement à partir des modèles twig.

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'button';
  }
}
7
Toni Fisler

La façon la plus simple d'y parvenir serait d'utiliser l'un de ces deux modules.

1 . Classe de lien - Le module de classe de lien fournit un nouveau formulaire de widget pour le type de champ Lien. Ce widget permet à l'éditeur d'ajouter une classe aux champs Lien attaché à leur contenu.

2 . Attributs de lien - Le widget d'attributs de lien fournit un widget supplémentaire pour le champ de lien trouvé dans Drupal core. Le widget permet aux utilisateurs de définir des attributs sur leur lien.

De plus, le module modifie le champ de lien de contenu de lien de menu par défaut pour utiliser ce widget, permettant aux liens de menu d'avoir aussi des attributs

id, classe, nom, cible, rel, clé d'accès

Une fois que l'un des deux est activé, nous pouvons définir les paramètres du widget pour le champ "Lien" sous "Gérer l'affichage du formulaire" pour le champ de lien particulier.

Voir l'image ci-jointe pour référence.

enter image description here

Une fois que cela est défini, entrez chaque classe séparée par un espace dans le champ qui apparaît au moment de la création du contenu . enter image description here

6
Prerit Mohan

Si vous modifiez ce champ de lien dans votre type de contenu (admin/structure/types/manage/your_contenttype/fields/field_c_button_link), il y a un champ Classes CSS supplémentaires .

Cependant, les classes saisies ici s'appliquent à tous les liens créés avec 'field_c_buton_link'. Si vous souhaitez ajouter une classe sur un emplacement spécifique, vous pouvez jeter un œil à hook_preprocess_field] ou même theme_link.

Modifier:

Dans Drupal 8 il y a aussi un theme_preprocess_field . Donc je pense que vous pouvez faire quelque chose comme ceci:

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['attributes']['class'][] = 'button';
    $variables['attributes']['class'][] = 'blue';   
  } 
}

Je n'ai pas testé cela, donc je pense que vous devez faire quelques ajustements pour que cela fonctionne.

4
Patrick Scheffer

Pour ajouter à la réponse de Tony Fisler ci-dessus, dans Drupal 8.1.2 je devais vérifier # field_name au lieu de name pour ajouter une classe C'est ce qui fonctionne pour moi.

function yourthemename_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#field_name'] == 'field_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'blarg';
  }
}

C'est si vous voulez que la classe sur le <a> tag. La solution de classe de lien proposée est plus facile, mais quand j'ai essayé, elle ne s'appliquait qu'à la classe à l'encapsuleur du a. Donc, si vous utilisez Bootstrap par exemple, le module de classe de lien ne fonctionnerait pas.

3
Chris Bauer

Il est facile de créer votre propre formateur qui remplace le formateur de liens. Bien que, maintenant que je vois qu'il existe un module pour cela ( Link ), vous voudrez peut-être l'utiliser, car vous pouvez le définir au niveau du champ, plutôt que comme paramètre dans le formateur. Mais j'ai pensé que cela pourrait être utile à quelqu'un, qui veut créer son propre formateur pour un lien où vous pouvez ajouter une classe.

namespace Drupal\mymodule\Plugin\Field\FieldFormatter;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
use Drupal\link\LinkItemInterface;
use Drupal\link\Plugin\Field\FieldFormatter\LinkFormatter;

/**
 * Plugin implementation of the 'link' formatter.
 *
 * @FieldFormatter(
 *   id = "link_with_class",
 *   label = @Translation("Link with Custom Class"),
 *   field_types = {
 *     "link"
 *   }
 * )
 */
class LinkClassFormatter extends LinkFormatter {

  /**
   * {@inheritdoc}
   */
  public static function defaultSettings() {
    return parent::defaultSettings() +
    ['class' => ''];

  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $elements = parent::settingsForm($form, $form_state);

    $elements['class'] = array(
      '#type' => 'textfield',
      '#title' => t('Class on Link'),
      '#default_value' => $this->getSetting('class'),
    );

    return $elements;
  }

  /**
   * {@inheritdoc}
   */
  public function settingsSummary() {

    $summary = parent::settingsSummary();

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $summary[] = t('Class(es) on button = "@classes"', array('@classes' => $settings['class']));
    }

    return $summary;
  }

  /**
   * {@inheritdoc}
   */
  protected function buildUrl(LinkItemInterface $item) {
    $url = parent::buildUrl($item);

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $options = $url->getOptions();
      $options['attributes']['class'] = $settings['class'];
      $url->setOptions($options);
    }

    return $url;
  }

}
2
oknate

Pour ce faire dans twig using the field template (i.e. field--field-c-button-link.html.twig)

Normalement, le modèle de champ bouclera sur vos liens en utilisant:

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

Mais vous pouvez changer cela en quelque chose comme ceci:

  {% for item in items %}
    <a class="btn btn-secondary btn-lg m-1" href="{{ item.content['#url'] }}">{{ item.content['#title']}}</a>
  {% endfor %}

en traitant séparément le titre du lien et l'URL.

2
sdmeyers

Vous pouvez utiliser Project Link class qui permet d'ajouter des classes sur le champ Link. Vous devez définir le widget sur "Lien avec la classe". Voir capture d'écran. enter image description hereenter image description here

2
flocondetoile

Je suis toujours en train de le tester pour détecter des bogues, mais le placer dans votre fichier .theme ajoutera le nom du champ en tant que classe pour tous les champs. C'est pour Drupal 8.2:

function mytheme_preprocess_field(&$variables, $hook) {
  $variables['attributes']['class'][] = $variables['element']['#field_name'];
}

On dirait que chaque thème devrait inclure pour faciliter le style.

0
Will

Toutes les autres solutions ajoutent des classes au wrapper de champ. Celui-ci ajoute une classe au <a> se marque:

/*
 * Implements hook_preprocess__HOOK().
 */
function hook_preprocess_field(&$variables) {
  $classes = [
    'button',
    'blue'
  ];
  $variables['items'][0]['content']['#url']->setOption('attributes', ['class' => $classes]);
}
0
elluca

Voici la solution simple -

function THEME_preprocess_file_link(&$variables)
{
  $variables['attributes']->addClass(array('your_custom_class'));
}
0
sagarjadhav