Tambahkan kelas ke bidang konten (tautan)

Saya ingin menambahkan kelas ke <a>tag bidang yang terdiri dari tautan dan teks. (Ini bidang tipe Tautan .) Nama bidang tersebut adalah content.field_c_button_link.

Dalam file templat, saya ingin menambahkan sesuatu seperti berikut ini.

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

Bagaimana saya bisa menambahkan kelas dengan benar?

Menurut jawaban Patrick Scheffer, saya melihat pengaturan untuk bidang di mana saya dapat menambahkan kelas CSS tambahan, tetapi saya tidak dapat menemukannya. Ini adalah tangkapan layar dari apa yang dapat saya edit di bidang tautan.

Ini adalah solusi yang saya temukan, tetapi tidak terlalu praktis untuk digunakan ... Saya benar-benar menginginkan solusi yang lebih baik, seperti sesuatu yang langsung dari templat ranting.

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

Cara termudah untuk mencapai ini adalah dengan menggunakan salah satu dari dua modul ini.

1. Kelas Tautan - Modul kelas tautan menyediakan formulir widget baru untuk jenis tautan. Widget ini memungkinkan editor untuk menambahkan kelas ke bidang Tautan yang dilampirkan ke konten mereka.

2. Atribut Tautan - Widget atribut tautan menyediakan widget tambahan untuk bidang tautan yang ditemukan di inti Drupal. Widget ini memungkinkan pengguna untuk menetapkan atribut pada tautan mereka.

Selain itu modul mengubah bidang tautan tautan konten menu default untuk menggunakan widget ini, memungkinkan tautan menu memiliki atribut juga

id, kelas, nama, target, rel, accesskey

Setelah salah satu dari keduanya diaktifkan, kami dapat mengatur pengaturan widget untuk bidang "Tautan" di bawah "Kelola Tampilan Formulir" untuk bidang tautan tertentu.

Lihat gambar terlampir untuk referensi.

Setelah ini diatur, masukkan setiap kelas yang dipisahkan oleh spasi di bidang yang muncul pada saat pembuatan konten.

Jika Anda mengedit bidang tautan itu di jenis konten Anda (admin / struktur / types / manage / your_contenttype / fields / field_c_button_link), ada bidang Kelas tambahan CSS .

Namun, kelas yang dimasukkan di sini berlaku untuk semua tautan yang dibuat dengan 'field_c_buton_link'. Jika Anda ingin menambahkan kelas pada satu lokasi tertentu, Anda dapat melihat hook_preprocess_field] atau bahkan theme_link.

Edit:

Di Drupal 8 ada juga theme_preprocess_field . Jadi saya pikir Anda dapat melakukan sesuatu seperti ini:

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

Saya belum menguji ini jadi saya pikir Anda perlu membuat beberapa penyesuaian untuk membuat ini berfungsi.

Untuk menambahkan jawaban Tony Fisler di atas, di Drupal 8.1.2 saya perlu memeriksa #field_name alih-alih nama untuk menambahkan kelas. Inilah yang bekerja untuk saya.

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

Ini jika Anda ingin kelas pada <a>tag. Solusi kelas tautan yang ditawarkan lebih mudah, tetapi ketika saya mencobanya hanya diterapkan ke kelas ke pembungkus a. Jadi, jika Anda menggunakan Bootstrap misalnya, modul kelas tautan tidak akan berfungsi.

Anda bisa menggunakan kelas Tautan Proyek yang mengizinkan untuk menambahkan kelas di bidang Tautan. Anda harus mengatur widget ke "Tautan dengan kelas". Lihat tangkapan layar.

Untuk melakukan ini di ranting menggunakan templat bidang (yaitu field--field-c-button-link.html.twig)

Biasanya templat bidang akan berulang di atas tautan Anda menggunakan:

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

Tapi Anda bisa mengubahnya menjadi seperti ini:

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

dengan berurusan dengan judul tautan dan url secara terpisah.

Sangat mudah untuk membuat formatter Anda sendiri yang menggantikan formatter tautan. Meskipun, sekarang saya melihat ada modul untuk ini ( Tautan ), Anda mungkin ingin menggunakan yang itu, karena Anda dapat mengaturnya di tingkat bidang, bukan sebagai pengaturan di formatter. Tapi saya pikir ini mungkin berguna bagi seseorang, yang ingin membangun formatter mereka sendiri untuk tautan di mana Anda dapat menambahkan kelas.

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

}

Saya masih mengujinya untuk bug apa pun, tetapi menempatkan ini di file .theme Anda akan menambahkan nama bidang sebagai kelas untuk semua bidang. Ini untuk Drupal 8.2:

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

Sepertinya sesuatu yang setiap tema harus sertakan untuk membuat penataan menjadi lebih mudah.

Semua solusi lain menambahkan kelas ke pembungkus bidang. Yang ini menambahkan kelas ke <a>tag itu sendiri:

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

Inilah solusi sederhana -

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