Aggiungi classe al campo contenuto (collegamento)

Voglio aggiungere una classe al <a>tag di un campo che consiste in un collegamento e un testo. (È un campo di tipo Link .) Il nome del campo è content.field_c_button_link.

Nel file modello, voglio aggiungere qualcosa di simile al seguente.

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

Come posso aggiungere correttamente una classe?

Secondo la risposta di Patrick Scheffer, ho esaminato le impostazioni di un campo in cui posso aggiungere ulteriori classi CSS, ma non sono riuscito a trovarne. Questo è uno screenshot di ciò che posso modificare nel campo del link.

Questa è una soluzione che ho trovato, ma non è davvero utile da usare ... Voglio davvero una soluzione migliore, come qualcosa direttamente dai modelli di ramoscelli.

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

Il modo più semplice per raggiungere questo obiettivo sarebbe utilizzare uno di questi due moduli.

1. Classe di collegamento: il modulo della classe di collegamento fornisce un nuovo modulo widget per il tipo di campo Collegamento. Questo widget consente all'editor di aggiungere classe ai campi Link collegato al loro contenuto.

2. Attributi di collegamento: il widget Attributi di collegamento fornisce un widget aggiuntivo per il campo di collegamento presente nel core di Drupal. Il widget consente agli utenti di impostare gli attributi sul proprio collegamento.

Inoltre, il modulo modifica il campo di collegamento del contenuto del collegamento di menu predefinito per utilizzare questo widget, consentendo anche ai collegamenti di menu di avere attributi

id, classe, nome, target, rel, accesskey

Dopo aver abilitato uno dei due, possiamo impostare le impostazioni del widget per il campo "Collegamento" in "Gestisci visualizzazione modulo" per il campo di collegamento specifico.

Vedi l'immagine allegata per riferimento.

Una volta impostato, inserisci ogni classe separata da uno spazio nel campo che appare al momento della creazione del contenuto.

Se modifichi quel campo link nel tuo tipo di contenuto (admin / struttura / types / manage / your_contenttype / fields / field_c_button_link), c'è un campo Classi CSS extra .

Tuttavia, le classi inserite qui si applicano a tutti i collegamenti creati con 'field_c_buton_link'. Se vuoi aggiungere una classe in una posizione specifica, puoi dare un'occhiata a hook_preprocess_field] o anche theme_link.

Modificare:

In Drupal 8 c'è anche un field_preprocess_field . Quindi penso che tu possa fare qualcosa del genere:

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

Non l'ho provato, quindi penso che sia necessario apportare alcune modifiche per farlo funzionare.

Per aggiungere alla risposta di Tony Fisler sopra, in Drupal 8.1.2 ho dovuto cercare #field_name invece del nome per aggiungere una classe. Questo è ciò che funziona per me.

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

Questo è se vuoi la classe sul <a>tag. La soluzione della classe di link offerta è più semplice, ma quando l'ho provato si applicava solo alla classe sul wrapper di a. Quindi, se stai usando Bootstrap per esempio, il modulo della classe di link non funzionerebbe.

È possibile utilizzare la classe Project Link che consente di aggiungere classi nel campo Link. È necessario impostare il widget su "Collega con classe". Vedi screenshot.

Per fare questo in ramoscello usando il modello di campo (es. field--field-c-button-link.html.twig)

Normalmente il modello di campo passerà sopra i tuoi link usando:

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

Ma puoi cambiarlo in qualcosa del genere:

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

trattando il titolo del link e l'URL separatamente.

È facile creare il tuo formatter personale che sovrascrive il formatter di collegamento. Anche se, ora che vedo che esiste un modulo per questo ( Link ), potresti volerlo usare, dato che puoi impostarlo a livello di campo, piuttosto che come impostazione nel formatter. Ma ho pensato che questo potrebbe essere utile a qualcuno, che vuole costruire il proprio formattatore per un collegamento in cui è possibile aggiungere una 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;
  }

}

Lo sto ancora testando per eventuali bug, ma inserendolo nel tuo file .theme aggiungerò il nome del campo come classe per tutti i campi. Questo è per Drupal 8.2:

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

Sembra qualcosa che ogni tema dovrebbe includere per facilitare lo styling.

Tutte le altre soluzioni aggiungono classi al wrapper di campo. Questo aggiunge una classe al <a>tag stesso:

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

Ecco la soluzione semplice -

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