Adicionar classe ao campo de conteúdo (link)

Quero adicionar uma classe à <a>tag de um campo que consiste em um link e texto. (É um campo do tipo Link .) O nome do campo é content.field_c_button_link.

No arquivo de modelo, quero adicionar algo como o seguinte.

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

Como posso adicionar uma classe corretamente?

De acordo com a resposta de Patrick Scheffer, observei as configurações de um campo em que posso adicionar classes CSS extras, mas não encontrei nenhuma. Esta é uma captura de tela do que posso editar no campo do link.

Esta é uma solução que encontrei, mas não é muito útil de usar ... Eu realmente quero uma solução melhor, como algo diretamente de modelos de galho.

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

A maneira mais fácil de conseguir isso seria usando um desses dois módulos.

1. Classe Link - O módulo Link Class fornece um novo formulário de widget para o tipo de campo Link. Este widget permite que o editor adicione classe aos campos Link anexado ao seu conteúdo.

2. Atributos de link - o widget de atributos de link fornece um widget adicional para o campo de link encontrado no núcleo do Drupal. O widget permite que os usuários definam atributos em seus links.

Além disso, o módulo altera o campo padrão do link de conteúdo do link de menu para usar esse widget, permitindo que os links de menu também tenham atributos

id, classe, nome, destino, rel, tecla de acesso

Depois que um dos dois estiver ativado, podemos definir as configurações do widget para o campo "Link" em "Gerenciar exibição de formulário" para o campo de link específico.

Veja a imagem em anexo para referência.

Uma vez definido, insira cada classe separada por um espaço no campo que aparece no momento da criação do conteúdo.

Se você editar esse campo de link no seu tipo de conteúdo (admin / structure / types / manage / your_contenttype / fields / field_c_button_link), haverá um campo Classes extras de CSS .

No entanto, as classes inseridas aqui se aplicam a todos os links criados com 'field_c_buton_link'. Se você deseja adicionar uma classe em um local específico, consulte hook_preprocess_field] ou mesmo theme_link.

Editar:

No Drupal 8, também há um theme_preprocess_field . Então eu acho que você pode fazer algo assim:

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

Eu não testei isso, então acho que você precisa fazer alguns ajustes para fazer esse trabalho.

Para adicionar à resposta de Tony Fisler acima, no Drupal 8.1.2 eu precisava verificar #field_name em vez de name para adicionar uma classe. Isto é o que funciona para mim.

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

Isto é, se você quiser a classe na <a>tag. A solução de classe de link oferecida é mais fácil, mas quando eu tentei, ela só se aplicava à classe no wrapper do a. Portanto, se você estiver usando o Bootstrap, por exemplo, o módulo da classe de link não funcionará.

Você pode usar a classe Link do Projeto, que permite adicionar classes no campo Link. Você deve definir o widget como "Vincular à classe". Veja a captura de tela.

Para fazer isso em galho usando o modelo de campo (ou seja field--field-c-button-link.html.twig)

Normalmente, o modelo de campo fará um loop nos seus links usando:

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

Mas você pode mudar isso para algo assim:

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

lidando com o título e o URL do link separadamente.

É fácil criar seu próprio formatador que substitui o formatador de link. Embora agora que vejo que exista um módulo para este ( Link ), convém usá-lo, pois você pode configurá-lo no nível do campo, e não como uma configuração no formatador. Mas achei que isso poderia ser útil para alguém que deseja criar seu próprio formatador para um link onde você pode adicionar uma 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;
  }

}

Ainda estou testando se há algum erro, mas colocar isso no seu arquivo .theme adicionará o nome do campo como uma classe para todos os campos. Isto é para o Drupal 8.2:

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

Parece algo que todo tema deve incluir para facilitar o estilo.

Todas as outras soluções adicionam classes ao wrapper de campo. Este adiciona uma classe à <a>própria tag:

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

Aqui está a solução simples -

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