컨텐츠 필드에 클래스 추가 (링크)

<a>링크와 텍스트로 구성된 필드 의 태그에 클래스를 추가하고 싶습니다 . ( 링크 유형의 필드입니다 .) 필드 이름은 content.field_c_button_link입니다.

템플릿 파일에서 다음과 같은 것을 추가하고 싶습니다.

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

수업을 올바르게 추가하려면 어떻게해야합니까?

Patrick Scheffer의 답변에 따르면 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. 링크 클래스 -링크 클래스 모듈은 링크 필드 유형에 대한 새 위젯 양식을 제공합니다. 이 위젯을 사용하면 편집자가 컨텐츠에 첨부 된 링크 필드에 클래스를 추가 할 수 있습니다.

2. 링크 속성 -링크 속성 위젯은 Drupal 코어에있는 링크 필드에 대한 추가 위젯을 제공합니다. 위젯을 사용하면 링크에서 속성을 설정할 수 있습니다.

또한 모듈은이 위젯을 사용하도록 기본 메뉴 링크 컨텐츠 링크 필드를 변경하여 메뉴 링크도 속성을 가질 수 있습니다.

ID, 클래스, 이름, 대상, 관계, 액세스 키

두 가지 중 하나가 활성화되면 특정 링크 필드에 대해 "양식 표시 관리"에서 "링크"필드에 대한 위젯 설정을 설정할 수 있습니다.

첨부 된 이미지를 참조하십시오.

이것이 설정되면 컨텐츠 작성시 나타나는 필드에 공백으로 구분 된 각 클래스를 입력하십시오.

컨텐츠 유형 (admin / structure / types / manage / your_contenttype / fields / field_c_button_link)에서 해당 링크 필드를 편집하면 Extra CSS-classes 필드 가 있습니다 .

그러나 여기에 입력 한 클래스는 'field_c_buton_link'로 만든 모든 링크에 적용됩니다. 특정 위치에 클래스를 추가하려면 hook_preprocess_field] 또는 theme_link를 살펴보십시오.

편집하다:

Drupal 8에는 theme_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';   
  } 
}

나는 이것을 테스트하지 않았 으므로이 작업을 수행하기 위해 약간의 조정이 필요하다고 생각합니다.

위의 Tony Fisler의 답변에 추가하기 위해 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>태그 에서 클래스를 원할 경우 입니다. 제공되는 링크 클래스 솔루션은 더 쉽지만 시도했을 때 a의 래퍼에만 클래스에 적용되었습니다. 따라서 예를 들어 Bootstrap을 사용하는 경우 링크 클래스 모듈이 작동하지 않습니다.

링크 필드에 클래스를 추가 할 수있는 프로젝트 링크 클래스 를 사용할 수 있습니다 . 위젯을 "클래스와 링크"로 설정해야합니다. 스크린 샷을 참조하십시오.

필드 템플릿을 사용하여 나뭇 가지에서이 작업을 수행하려면 (예 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을 별도로 처리하여

링크 포맷터를 재정의하는 자체 포맷터를 쉽게 만들 수 있습니다. 지금은 이것에 대한 모듈이 있다는 것을 알았지 만 ( Link ), 포맷터의 설정이 아닌 필드 레벨에서 설정할 수 있기 때문에 그 모듈 을 사용할 수 있습니다. 그러나 이것은 클래스를 추가 할 수있는 링크를 위해 자체 포맷터를 작성하려는 누군가에게 유용 할 것이라고 생각했습니다.

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