Drupal में Views के लिए इमेज स्टाइल बनाना

03/10/2025, by Ivan

Views डिस्प्ले स्टाइल प्लगइन बनाना पहली नज़र में कठिन लग सकता है, लेकिन यह उतना जटिल नहीं है। यहां चरण-दर-चरण गाइड दिया गया है कि इसे कैसे करना है, जिसमें सोर्स कोड भी शामिल है।

आप तैयार कोड यहां से डाउनलोड कर सकते हैं: TARDIS (हालांकि यह अभी भी dev में है)। और यदि आपको Drupal 8 मॉड्यूल्स का परिचय चाहिए, तो यहां एक प्रैक्टिकल गाइड है Drupal 8 के बेसिक मॉड्यूल्स बनाने के लिए।

.info.yml

/modules/custom के अंदर अपने मॉड्यूल के लिए tardis नाम का फ़ोल्डर बनाएँ। उसमें tardis.info.yml नाम की फ़ाइल रखें और इसमें यह कोड डालें:

name: TARDIS
type: module
description: 'Provides a View display style that renders a list of year and month links to content in reverse chronological order.'
package: Views
core: '8.x'
dependencies:
  - drupal:views

क्लासी (Classy)

अब प्लगइन क्लास बनाने का समय है। src/Plugin/views/style के अंदर Tardis.php नाम की फ़ाइल बनाएँ और इसमें यह कोड डालें:

<?php

namespace Drupal\tardis\Plugin\views\style;

use Drupal\core\form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;

/**
 * Style plugin to render a list of years and months
 * in reverse chronological order linked to content.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Render a list of years and months in reverse chronological order linked to content."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )
 */
class Tardis extends StylePluginBase {
  ...
}

आइए इन पर थोड़ा ध्यान दें:

 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Render a list of years and months in reverse chronological order linked to content."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )

ये कमेंट्स ज़रूरी हैं। ये हमारे प्लगइन की नींव रखते हैं। यदि आप इन्हें भूल गए, तो कोड सही से काम नहीं करेगा।

class Tardis extends StylePluginBase {

यह प्लगइन की बेसिक परिभाषा है। यह अनिवार्य है।

  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = array('default' => 'tardis');
    return $options;
  }

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

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

आगे हम असली ऑप्शंस फ़ॉर्म बनाएंगे, जिसमें फील्ड होंगे, बिल्कुल सामान्य कॉन्फ़िगरेशन फॉर्म्स की तरह। अधिक जानकारी के लिए देखें Forms API Reference।

.module फ़ाइल

Drupal 8 में .module फ़ाइल अनिवार्य नहीं है, लेकिन यहीं पर थीम जानकारी जानी चाहिए:

<?php

/**
 * @file
 * TARDIS Views module help and theme functions.
 */

/**
 * Implements hook_theme().
 */
function tardis_theme($existing, $type, $theme, $path) {
  // Store TARDIS preprocess theme functions in a separate .inc file.
  \Drupal::moduleHandler()->loadInclude('tardis', 'inc', 'tardis.theme');

  return array(
    'tardis' => array(
      'file' => 'tardis.theme.inc',
    ),
  );
}

असल में, हम preprocess function को बेहतर संगठन के लिए अलग फ़ाइल में रखते हैं।

.theme.inc फ़ाइल

अपने मॉड्यूल डायरेक्टरी में tardis.theme.inc नामक फ़ाइल बनाएं और इसमें यह कोड डालें:

<?php

/**
 * @file
 * Theme for TARDIS views.
 */
function template_preprocess_views_view_tardis(&$variables) {
  ...
}

यह कोड नोड्स से सभी created dates इकट्ठा करता है और एक एसोसिएटिव ऐरे बनाता है जिसे Twig टेम्पलेट में पास किया जाता है।

Twig टेम्पलेट

आउटपुट दिखाने के लिए, templates फ़ोल्डर में views-view-tardis.html.twig फ़ाइल बनाएँ। इसका नाम याद रखें — हमने ऊपर थीम पैरामीटर में "views_view_tardis" लिखा था। Twig फ़ाइल का नाम उसी के अनुसार होना चाहिए।

{#
/**
 * Default theme implementation for Views to output a TARDIS archive.
 *
 * Available variables:
 * - options: View plugin style options:
 *   - classes: CSS classes.
 *   - nesting: Whether months should be nested inside years.
 *   - path: Link path. Eg.: example.com/TARDIS/2016/03
 *   - time_pool: Two-dimension array containing years and months with content.
 *
 * @see template_preprocess_views_view_tardis()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <ul>
    {% for key, item in options.time_pool %}
      {% if options.nesting == 1 %}
        <li><a href="/{{ options.path }}/{{ key }}">{{ key }}</a><ul>
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
        </ul></li>
      {% else %}
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </ul>
</div>

शुरुआत में ही $variables ऐरे से वैरिएबल्स निकाल लेना अच्छा है। ये neatly options में उपलब्ध रहते हैं।

{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}

और फिर इन्हें इस्तेमाल करें:

<div{{ attributes.addClass(classes) }}>

बाकी कोड सभी वर्षों और महीनों के लिए लूप चलता है और HTML सूची बनाता है। सबसे महत्वपूर्ण हिस्सा for लूप है:

{% for key, item in options.time_pool %}

जो हर लिंक को सही ढंग से रेंडर करता है। उदाहरण:

<li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>

एक और काम

अंत में, हमें एक डिफ़ॉल्ट View बनाकर उसे एक्सपोर्ट करना चाहिए ताकि उपयोगकर्ताओं के लिए आसान हो। /config/install/views.view.tardis.yml में पहले से एक डिफ़ॉल्ट View मौजूद है। जैसे ही उपयोगकर्ता मॉड्यूल को सक्षम करेंगे, यह उपलब्ध होगा।

मैंने इसे admin/config/development/configuration/single/export पर एक्सपोर्ट किया, जैसा कि Subhojit Paul के शानदार ट्यूटोरियल में बताया गया है।

यही सब!

अब आप Drupal 8 के लिए अपना खुद का Views डिस्प्ले प्लगइन लिख सकते हैं! नीचे कमेंट करें। हैप्पी कोडिंग!

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव