Agregar clase al campo de contenido (enlace)

Quiero agregar una clase a la <a>etiqueta de un campo que consiste en un enlace y texto. (Es un campo de tipo Enlace ). El nombre del campo es content.field_c_button_link.

En el archivo de plantilla, quiero agregar algo como lo siguiente.

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

¿Cómo puedo agregar una clase correctamente?

Según la respuesta de Patrick Scheffer, miré la configuración de un campo donde puedo agregar clases CSS adicionales, pero no pude encontrar ninguna. Esta es una captura de pantalla de lo que puedo editar en el campo de enlace.

Esta es una solución que encontré, pero no es realmente útil de usar ... Realmente quiero una mejor solución, como algo directamente de las plantillas de ramita.

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

La forma más fácil de lograr esto sería mediante el uso de cualquiera de estos dos módulos.

1. Clase de enlace: el módulo de clase de enlace proporciona un nuevo formulario de widget para el tipo de campo Enlace. Este widget permite al editor agregar clases a los campos Enlace adjunto a su contenido.

2. Atributos de enlace: el widget de atributos de enlace proporciona un widget adicional para el campo de enlace que se encuentra en el núcleo de Drupal. El widget permite a los usuarios establecer atributos en su enlace.

Además, el módulo altera el campo predeterminado del enlace del contenido del enlace del menú para usar este widget, permitiendo que los enlaces del menú también tengan atributos

id, clase, nombre, objetivo, rel, clave de acceso

Una vez que cualquiera de los dos esté habilitado, podemos establecer la configuración del widget para el campo "Enlace" en "Administrar visualización de formulario" para el campo de enlace en particular.

Ver imagen adjunta para referencia.

Una vez configurado, ingrese cada clase separada por un espacio en el campo que aparece en el momento de la creación del contenido.

Si edita ese campo de enlace en su tipo de contenido (admin / structure / types / manage / your_contenttype / fields / field_c_button_link), hay un campo Extra CSS-classes .

Sin embargo, las clases ingresadas aquí se aplican a todos los enlaces creados con 'field_c_buton_link'. Si desea agregar una clase en una ubicación específica, puede echar un vistazo a hook_preprocess_field] o incluso theme_link.

Editar:

En Drupal 8 también hay un theme_preprocess_field . Así que creo que puedes hacer algo como esto:

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

No he probado esto, así que creo que necesitas hacer algunos ajustes para que esto funcione.

Para agregar a la respuesta anterior de Tony Fisler, en Drupal 8.1.2 necesitaba verificar #field_name en lugar de name para agregar una clase. Esto es lo que me funciona.

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

Esto es si quieres la clase en la <a>etiqueta. La solución de clase de enlace que se ofrece es más fácil, pero cuando lo intenté solo se aplicó a la clase al contenedor de a. Entonces, si está utilizando Bootstrap, por ejemplo, el módulo de clase de enlace no funcionaría.

Puede usar la clase Project Link que permite agregar clases en el campo Link. Debe configurar el widget en "Vincular con clase". Ver captura de pantalla

Para hacer esto en rama usando la plantilla de campo (es decir field--field-c-button-link.html.twig)

Normalmente, la plantilla de campo recorrerá sus enlaces usando:

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

Pero puedes cambiar eso a algo como esto:

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

al tratar con el título del enlace y la url por separado.

Es fácil crear su propio formateador que anula el formateador de enlaces. Aunque, ahora que veo que hay un módulo para este ( Enlace ), es posible que desee usar ese, ya que puede configurarlo a nivel de campo, en lugar de como una configuración en el formateador. Pero pensé que esto podría ser útil para alguien que quiere construir su propio formateador para un enlace donde puede agregar una clase.

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

}

Todavía lo estoy probando para detectar errores, pero al colocar esto en su archivo .theme se agregará el nombre del campo como una clase para todos los campos. Esto es para Drupal 8.2:

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

Parece algo que todo tema debería incluir para facilitar el diseño.

Todas las demás soluciones agregan clases al contenedor de campo. Este agrega una clase a la <a>etiqueta en sí:

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

Aquí está la solución simple:

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