Ajouter une classe au champ de contenu (lien)

Je veux ajouter une classe à la <a>balise d'un champ qui se compose d'un lien et d'un texte. (Il s'agit d'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.

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 de modèles de brindilles.

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

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 le noyau Drupal. 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.

Une fois cela 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.

Si vous modifiez ce champ de lien dans votre type de contenu (admin / structure / types / manage / your_contenttype / fields / field_c_button_link), il existe un champ Extra CSS-classes .

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

Éditer:

Dans Drupal 8, il y a également un champ theme_preprocess_field . Je pense donc que vous pouvez faire quelque chose comme ça:

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.

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 soit sur l' <a>étiquette. 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.

Vous pouvez utiliser la classe Project Link 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.

Pour ce faire en brindille en utilisant le modèle de champ (ie 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.

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 pouvez utiliser celui-ci, 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;
  }

}

Je le teste toujours pour tous les bugs, 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.

Toutes les autres solutions ajoutent des classes au wrapper de champ. Celui-ci ajoute une classe à la <a>balise elle-même:

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

Voici la solution simple -

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