Додати клас у поле вмісту (посилання)

Я хочу додати клас до <a>тегу поля, що складається з посилання та тексту. (Це поле типу Link .) Назва поля - content.field_c_button_link.

У файл шаблону я хочу додати щось подібне.

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

Як я можу правильно додати клас?

Відповідно до відповіді Патріка Шеффера, я переглянув налаштування поля, куди я можу додати додаткові класи CSS, але не знайшов жодного. Це скріншот того, що я можу редагувати у полі посилань.

Це рішення, яке я знайшов, але його не дуже зручно використовувати ... Я дійсно хочу кращого рішення, як-то прямо з гілочок шаблонів.

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

Найпростіший спосіб досягти цього був би за допомогою будь-якого з цих двох модулів.

1. Клас посилань - модуль класу зв’язків надає нову форму віджетів для типу поля Link. Цей віджет дозволяє редактору додавати клас до полів Посилання, що додаються до їх вмісту.

2. Атрибути посилання - Віджет атрибутів посилання надає додатковий віджет для поля посилань, знайденого в ядрі Drupal. Віджет дозволяє користувачам встановлювати атрибути на їх посилання.

Крім того, модуль змінює поле посилань вмісту меню за замовчуванням, щоб використовувати цей віджет, дозволяючи посиланням меню також мати атрибути

id, клас, ім'я, ціль, rel, ключ доступу

Після того, як будь-який з них увімкнено, ми можемо встановити настройки віджета для поля "Посилання" в розділі "Керування формою відображення" для конкретного поля посилання.

Для ознайомлення дивіться додане зображення.

Як тільки це встановлено, введіть кожен клас, розділений пробілом у полі, яке з’являється під час створення вмісту.

Якщо ви редагуєте це поле посилання у своєму типі вмісту (адміністратор / структура / типи / керування / ваш_контент-тип / поля / поле_c_button_link), є поле Додаткові CSS-класи .

Однак класи, введені тут, стосуються всіх посилань, створених із 'field_c_buton_link'. Якщо ви хочете додати клас в одному конкретному розташуванні, ви можете поглянути на kuke_preprocess_field] або навіть на тему_посилання.

Редагувати:

У Drupal 8 є також тема_preprocess_field . Тому я думаю, ви можете зробити щось подібне:

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

Я не перевіряв цього, тому я думаю, що вам потрібно внести деякі корективи, щоб зробити цю роботу.

Щоб додати відповідь Тоні Фіслера вище, у Drupal 8.1.2 мені потрібно було перевірити наявність #field_name замість імені, щоб додати клас. Це те, що працює для мене.

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

Це якщо ви хочете клас на <a>тегу. Пропоноване рішення класу посилань простіше, але коли я спробував це, застосовано лише до класу до обгортки. Отже, якщо ви, наприклад, використовуєте Bootstrap, модуль класу посилань не працює.

Ви можете використовувати клас Project Link, який дозволяє додавати класи в поле Link. Вам слід встановити віджет на "Зв'язок з класом". Дивіться скріншот.

Для цього в гілочку використовуючи шаблон поля (тобто field--field-c-button-link.html.twig)

Зазвичай шаблон поля буде циклічний за вашими посиланнями, використовуючи:

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

Але ви можете змінити це на щось подібне:

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

розглядаючи окремо назву посилання та URL-адресу.

Створити свій власний форматер, який перекриє формат посилань, легко. Хоча, тепер, коли я бачу, що для цього є модуль ( Посилання ), ви можете використовувати цей модуль , оскільки ви можете встановити його на рівні поля, а не як параметр у форматері. Але я подумав, що це може бути корисним для когось, хто хоче створити власний форматник для посилання, де можна додати клас.

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

}

Я все ще тестую його на наявність помилок, але розміщення цього у вашому .theme-файлі додасть ім'я поля як клас для всіх полів. Це для Drupal 8.2:

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

Здається, що кожна тема повинна включати, щоб полегшити стилізацію.

Всі інші рішення додають класи до загортання поля. Цей додає клас до самого <a>тегу:

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

Ось просте рішення -

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