Klasse zum Inhaltsfeld hinzufügen (Link)

Ich möchte dem <a>Tag eines Feldes, das aus einem Link und Text besteht , eine Klasse hinzufügen . (Es ist ein Feld vom Typ Link .) Der Name des Feldes lautet content.field_c_button_link.

In der Vorlagendatei möchte ich Folgendes hinzufügen.

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

Wie kann ich eine Klasse richtig hinzufügen?

Laut der Antwort von Patrick Scheffer habe ich mir die Einstellungen für ein Feld angesehen, in dem ich zusätzliche CSS-Klassen hinzufügen kann, aber keine gefunden habe. Dies ist ein Screenshot dessen, was ich im Linkfeld bearbeiten kann.

Dies ist eine Lösung, die ich gefunden habe, die aber nicht sehr praktisch ist ... Ich möchte wirklich eine bessere Lösung, wie etwas, das direkt aus Zweigvorlagen stammt.

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

Dies lässt sich am einfachsten mit einem dieser beiden Module erreichen.

1. Link-Klasse - Das Link-Klassenmodul bietet ein neues Widget-Formular für den Feldtyp Link. Mit diesem Widget kann der Editor Klassen zu Feldern hinzufügen, die mit ihrem Inhalt verknüpft sind.

2. Link - Attribut - Ein Link Attribut Widget ein zusätzliches Widget für das Link - Feld in Drupal Kern gefunden bietet. Mit dem Widget können Benutzer Attribute für ihren Link festlegen.

Darüber hinaus ändert das Modul das Standardfeld für Menüverknüpfungsinhaltsverknüpfungen, um dieses Widget zu verwenden, sodass Menüverknüpfungen auch Attribute haben können

id, class, name, target, rel, accesskey

Sobald eine der beiden Optionen aktiviert ist, können wir die Widget-Einstellungen für das Feld "Verknüpfung" unter "Formularanzeige verwalten" für das jeweilige Verknüpfungsfeld festlegen.

Siehe beigefügtes Bild als Referenz.

Sobald dies festgelegt ist, geben Sie jede Klasse getrennt durch ein Leerzeichen in das Feld ein, das zum Zeitpunkt der Inhaltserstellung angezeigt wird.

Wenn Sie dieses Linkfeld in Ihrem Inhaltstyp bearbeiten (admin / structure / types / manage / your_contenttype / fields / field_c_button_link), gibt es ein Feld Zusätzliche CSS-Klassen .

Die hier eingegebenen Klassen gelten jedoch für alle mit 'field_c_buton_link' erstellten Links. Wenn Sie eine Klasse an einem bestimmten Ort hinzufügen möchten, können Sie sich hook_preprocess_field] oder theme_link ansehen.

Bearbeiten:

In Drupal 8 gibt es auch ein theme_preprocess_field . Ich denke, Sie können so etwas tun:

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

Ich habe das noch nicht getestet, daher denke ich, dass Sie einige Anpassungen vornehmen müssen, damit dies funktioniert.

Um die Antwort von Tony Fisler zu ergänzen, musste ich in Drupal 8.1.2 nach #field_name anstatt nach name suchen , um eine Klasse hinzuzufügen. Das funktioniert bei mir.

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

Dies ist, wenn Sie die Klasse auf dem <a>Tag möchten . Die angebotene Linkklassenlösung ist einfacher, aber als ich sie ausprobierte, galt sie nur für den Wrapper der Klasse a. Wenn Sie also beispielsweise Bootstrap verwenden, funktioniert das Linkklassenmodul nicht.

Sie können die Project Link-Klasse verwenden , mit der Sie Klassen zum Link-Feld hinzufügen können. Sie sollten das Widget auf "Link with class" setzen. Siehe Screenshot.

Dazu im Zweig die Feldvorlage verwenden (dh field--field-c-button-link.html.twig)

Normalerweise durchläuft die Feldvorlage Ihre Links wie folgt:

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

Aber Sie können das so ändern:

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

indem Sie den Linktitel und die URL separat behandeln.

Es ist einfach, einen eigenen Formatierer zu erstellen, der den Link-Formatierer überschreibt. Obwohl ich jetzt sehe, dass es ein Modul dafür gibt ( Link ), können Sie dieses verwenden, da Sie es auf Feldebene anstatt als Einstellung im Formatierer festlegen können. Aber ich dachte, dies könnte für jemanden nützlich sein, der einen eigenen Formatierer für einen Link erstellen möchte, über den Sie eine Klasse hinzufügen können.

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;
  }

}

Ich teste es immer noch auf Fehler, aber wenn Sie es in Ihre .theme-Datei einfügen, wird der Feldname als Klasse für alle Felder hinzugefügt. Dies ist für Drupal 8.2:

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

Es scheint, als sollte jedes Thema etwas beinhalten, um das Styling zu vereinfachen.

Alle anderen Lösungen fügen dem Feld-Wrapper Klassen hinzu. Dieser fügt dem <a>Tag selbst eine Klasse hinzu :

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

Hier ist die einfache Lösung -

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