सामग्री फ़ील्ड में लिंक जोड़ें (लिंक)

Question

मैं <a>एक फ़ील्ड के टैग में एक वर्ग जोड़ना चाहता हूं जिसमें एक लिंक और पाठ शामिल है। (यह एक प्रकार का लिंक है ।) फ़ील्ड का नाम सामग्री है ।field_c_button_link।

टेम्पलेट फ़ाइल में, मैं निम्नलिखित की तरह कुछ जोड़ना चाहता हूं।

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

मैं ठीक से क्लास कैसे जोड़ सकता हूं?

पैट्रिक शेफ़र के जवाब के अनुसार, मैंने एक फ़ील्ड के लिए सेटिंग्स देखी, जहाँ मैं अतिरिक्त सीएसएस कक्षाएं जोड़ सकता हूं, लेकिन मुझे कोई नहीं मिला। यह एक स्क्रीनशॉट है जिसे मैं लिंक फ़ील्ड में संपादित कर सकता हूं।

Answer 1

यह एक ऐसा समाधान है जो मैंने पाया, लेकिन यह वास्तव में उपयोग करने के लिए आसान नहीं है ... मैं वास्तव में एक बेहतर समाधान चाहता हूं, जैसे कि सीधे ट्वीग टेम्पलेट से।

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

Comments

इसके '#field_name'बजाय होना चाहिए '#name'।

— 21

Answer 2

इसे प्राप्त करने का सबसे आसान तरीका इन दोनों में से किसी एक मॉड्यूल का उपयोग करना होगा।

1. लिंक क्लास - लिंक क्लास मॉड्यूल फील्ड टाइप लिंक के लिए एक नया विजेट फॉर्म प्रदान करता है। यह विजेट संपादक को उनकी सामग्री से जुड़ी फ़ील्ड को क्लास में जोड़ने की अनुमति देता है।

2. लिंक विशेषताएँ - लिंक विशेषताएँ विजेट Drupal कोर में पाया लिंक क्षेत्र के लिए एक अतिरिक्त विजेट प्रदान करता है। विजेट उपयोगकर्ताओं को उनके लिंक पर विशेषताएँ सेट करने की अनुमति देता है।

इसके अलावा मॉड्यूल इस विजेट का उपयोग करने के लिए डिफ़ॉल्ट मेनू लिंक सामग्री लिंक फ़ील्ड को बदल देता है, जिससे मेनू लिंक को भी विशेषताएँ मिल सकती हैं

आईडी, वर्ग, नाम, लक्ष्य, rel, accesskey

दोनों में से किसी एक को सक्षम करने के बाद, हम विशेष लिंक फ़ील्ड के लिए "मैनेज फॉर्म डिस्प्ले" के तहत "लिंक" फ़ील्ड के लिए विजेट सेटिंग्स सेट कर सकते हैं।

संदर्भ के लिए संलग्न छवि देखें।

एक बार जब यह सेट हो जाता है तो सामग्री के निर्माण के समय दिखाई देने वाले क्षेत्र में एक स्थान द्वारा अलग किए गए प्रत्येक वर्ग में प्रवेश करें।

Comments

विस्तृत लेखन के लिए बहुत धन्यवाद, बहुत उपयोगी। दोनों अच्छे समाधान।

— यमदहि

Answer 3

यदि आप उस लिंक फ़ील्ड को अपने सामग्री प्रकार (व्यवस्थापक / संरचना / प्रकार / प्रबंधन / your_contenttype / फ़ील्ड / फ़ील्ड_c_button_link) में संपादित करते हैं, तो एक फ़ील्ड अतिरिक्त 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';   
  } 
}

मैंने इसका परीक्षण नहीं किया है, इसलिए मुझे लगता है कि इस काम को करने के लिए आपको कुछ समायोजन करने की आवश्यकता है।

Comments

आपके उत्तर के लिए धन्यवाद, लेकिन मुझे ऐसा कोई क्षेत्र नहीं मिला ... :(

— maidi

लिंक फ़ील्ड को संपादित करते समय कौन से फ़ील्ड उपलब्ध हैं?

— पैट्रिक शेफ़र

मैंने अपने सवाल में एक स्क्रीनशॉट जोड़ा

— मैडी

मैं देखता हूं, आप लिंक मॉड्यूल के किस संस्करण का उपयोग करते हैं?

— पैट्रिक शेफ़र

मुझे कहां मिल सकता है? मैं Drupal 8 का उपयोग करता हूं इसलिए लिंक मॉड्यूल कोर का हिस्सा था।

— मैदिनी

Answer 4

ऊपर टोनी फिशर के उत्तर को जोड़ने के लिए, ड्रुपल 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>टैग पर वर्ग चाहते हैं । लिंक की गई क्लास सॉल्यूशन आसान है, लेकिन जब मैंने कोशिश की कि इसे केवल ए के रैपर में कक्षा में लागू किया जाए। इसलिए, यदि आप उदाहरण के लिए बूटस्ट्रैप का उपयोग कर रहे हैं, तो लिंक क्लास मॉड्यूल काम नहीं करेगा।

Comments

धन्यवाद! यह बहुत मददगार है, लेकिन इस क्षेत्र में केवल एक आइटम है। यदि फ़ील्ड में कई आइटम हैं, तो आपको उनके माध्यम से लूप करने की आवश्यकता है। जैसेif ($element['#field_name'] == 'field_link') { foreach ($variables['items'] as $key => $item){ $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'blarg'; } }

— विलियम मोर्टा

Answer 5

आप प्रोजेक्ट लिंक क्लास का उपयोग कर सकते हैं जो लिंक फ़ील्ड पर कक्षाएं जोड़ने की अनुमति देता है। आपको विजेट को "क्लास के साथ लिंक" पर सेट करना चाहिए। स्क्रीनशॉट देखें।

Answer 6

फ़ील्ड टेम्पलेट (यानी 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 %}

लिंक शीर्षक और यूआरएल के साथ अलग से काम करके।

Answer 7

लिंक फ़ॉर्मेटर को ओवरराइड करने वाले अपने स्वयं के फ़ॉर्मेटर बनाना आसान है। हालाँकि, अब जब मैं देख रहा हूँ कि इस ( लिंक ) के लिए एक मॉड्यूल है , तो आप उस एक का उपयोग करना चाह सकते हैं, जैसा कि आप इसे फ़ॉर्मेट में सेटिंग के बजाय फ़ील्ड स्तर पर सेट कर सकते हैं। लेकिन मैंने सोचा कि यह किसी के लिए उपयोगी हो सकता है, जो एक लिंक के लिए अपना स्वयं का फॉर्मेटर बनाना चाहता है जहां आप एक वर्ग जोड़ सकते हैं।

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

}

Answer 8

मैं अभी भी इसे किसी भी बग के लिए परीक्षण कर रहा हूं, लेकिन इसे अपनी .theme फ़ाइल में रखने से सभी फ़ील्ड के लिए एक वर्ग के रूप में फ़ील्ड का नाम जुड़ जाएगा। यह Drupal 8.2 के लिए है:

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

हर विषय की तरह लगता है कि स्टाइल को आसान बनाने के लिए शामिल होना चाहिए।

Answer 9

अन्य सभी समाधान फ़ील्ड रैपर में कक्षाएं जोड़ते हैं। यह <a>टैग में एक वर्ग जोड़ता है:

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

Answer 10

यहाँ सरल समाधान है -

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