Drupal: Colorbox को GLightbox से बदलें

1 परिचय

Lightbox प्लगइन्स एक दशक से अधिक समय से Drupal‑आधारित वेबसाइटों का एक अहम हिस्सा रहे हैं। ये संपादकों को छवियाँ, वीडियो और अन्य मीडिया को एक ओवरले में दिखाने की अनुमति देते हैं, बिना वर्तमान पेज से दूर जाए — यह ऐसा पैटर्न है जिसकी अपेक्षा विज़िटर आधुनिक, मीडिया‑समृद्ध वेबसाइटों पर करते हैं।

Colorbox ऐतिहासिक रूप से Drupal इकोसिस्टम में सबसे प्रचलित समाधान रहा है। colorbox contributed मॉड्यूल Drupal के image field formatters के साथ गहराई से जुड़ा हुआ है, इसमें एक परिपक्व API है, और इसे समुदाय में व्यापक रूप से जाना जाता है। हालांकि, जैसे‑जैसे वेब विकसित हुआ है, Colorbox अपनी उम्र दिखाने लगा है: यह jQuery पर निर्भर करता है, अपेक्षाकृत भारी payload भेजता है, और आधुनिक accessibility अपेक्षाओं से पीछे है।

अब प्रवेश करता है GLightbox — एक पूरी तरह vanilla‑JavaScript लाइटबॉक्स लाइब्रेरी (शून्य dependencies) जिसमें परिष्कृत UI, मज़बूत accessibility सपोर्ट, और हल्का footprint है। इसका संबंधित Drupal मॉड्यूल उन्हीं image fields और media entities के साथ साफ़‑सुथरे ढंग से इंटीग्रेट होता है जिन्हें पहले Colorbox संभालता था।

यह लेख आपको पूरे migration प्रोसेस से गुज़ारता है: आपके मौजूदा Colorbox सेटअप के ऑडिट से लेकर GLightbox को इंस्टॉल करना, field formatters को री‑मैप करना, पुराने मॉड्यूल को सुरक्षित रूप से हटाना, और आपके थीम के लिए नए अनुभव को fine‑tune करना।

2 Colorbox बनाम GLightbox: माइग्रेट क्यों करें?

2.1 Colorbox की सीमाएँ

Colorbox वेब के एक अलग युग में बनाया गया था। इसकी आर्किटेक्चर ऐसे अनुमानों को दर्शाती है जो आधुनिक Drupal डेवलपमेंट में अब लागू नहीं होते:

• jQuery पर निर्भरता। Colorbox एक jQuery प्लगइन है — यह jQuery के बिना चल नहीं सकता। Drupal core स्वयं jQuery पर अपनी निर्भरता को लगातार कम कर रहा है, और कई performance‑focused themes jQuery को lazy‑load करते हैं या बिल्कुल लोड नहीं करते। एक सख़्त jQuery dependency इस लक्ष्य के विपरीत जाती है।
• पुराना UI और animations। डिफ़ॉल्ट Colorbox स्टाइल्स 2024–2026 के डिज़ाइन मानकों की तुलना में पुराने लगते हैं। एक आधुनिक लुक पाने के लिए अक्सर भारी CSS customization की आवश्यकता होती है।
• Accessibility में कमियाँ। हालांकि वर्षों में Colorbox को कुछ accessibility patches मिले हैं, इसे WCAG 2.1 AA को प्राथमिक लक्ष्य बनाकर डिज़ाइन नहीं किया गया था। Focus trapping, ARIA roles और screen‑reader announcements के लिए अतिरिक्त मेहनत करनी पड़ती है।
• Maintenance की धीमी गति। upstream jQuery Colorbox लाइब्रेरी को बहुत कम अपडेट मिलते हैं। लंबे समय तक चलने वाले Drupal प्रोजेक्ट के लिए, धीरे‑धीरे मेंटेन होने वाली dependency पर निर्भर रहना जोखिम भरा हो सकता है।

2.2 GLightbox के लाभ

GLightbox ऊपर बताए गए सभी pain points को सीधे संबोधित करता है:

• Zero dependencies। शुद्ध ES6+ JavaScript; किसी jQuery की आवश्यकता नहीं।
• आधुनिक UX। स्मूथ CSS transitions, swipe gestures, keyboard navigation, और एक साफ़‑सुथरा default theme जो आधुनिक डिज़ाइनों के साथ अच्छी तरह घुल‑मिल जाता है।
• First‑class accessibility। Focus लाइटबॉक्स के अंदर ट्रैप रहता है, keyboard arrow‑key navigation out‑of‑the‑box काम करता है, और उचित ARIA role="dialog" semantics अपने‑आप लागू हो जाती हैं।
• हल्का। minified + gzipped bundle 15 KB से कम है — जो एक सामान्य Colorbox सेटअप से लगभग 3× हल्का है।
• Gallery grouping। अतिरिक्त plugins की आवश्यकता के बिना data-gallery attribute के माध्यम से grouped galleries का native सपोर्ट।
• Active development। GitHub पर GLightbox प्रोजेक्ट में नियमित releases और bug fixes आते रहते हैं।

3 Drupal इकोसिस्टम का अवलोकन

Drupal core कई वर्षों से अपनी jQuery footprint को कम करने की दिशा में आगे बढ़ रहा है, और vanilla JS तथा आधुनिक browser APIs की ओर स्थानांतरित हो रहा है। यह बदलाव Drupal 10+ में कई jQuery‑आधारित behaviors के deprecation और themes को हल्की JavaScript रणनीतियाँ अपनाने के प्रोत्साहन में स्पष्ट रूप से देखा जा सकता है।

contrib पक्ष पर, Colorbox और GLightbox दोनों के लिए Drupal.org पर समर्पित Drupal मॉड्यूल उपलब्ध हैं:

• colorbox — पारंपरिक विकल्प, जो Image field formatters, Views और media system के साथ गहरा integration प्रदान करता है। अब भी व्यापक रूप से installed है, लेकिन इसे कम अपडेट मिल रहे हैं।
• glightbox — एक अपेक्षाकृत नया contrib मॉड्यूल, जो GLightbox JS लाइब्रेरी को wrap करता है। यह Image और Media field formatters, Views सपोर्ट और सामान्य GLightbox विकल्पों के लिए settings form प्रदान करता है।

4 Migration के लिए तैयारी

4.1 मौजूदा Colorbox उपयोग का ऑडिट

किसी भी configuration को बदलने से पहले, यह स्पष्ट चित्र बनाएं कि आपकी साइट पर Colorbox कहाँ‑कहाँ और कैसे उपयोग हो रहा है:

1. Image fields। प्रत्येक content type के लिए Structure → Content Types → [Type] → Manage display पर जाएँ और देखें कि कोई image field Colorbox formatter का उपयोग कर रहा है या नहीं। उपयोग किए गए image styles और caption settings को नोट करें।
2. Media entities। Structure → Media types के अंतर्गत media type display modes जाँचें। उन सभी media types के लिए दोहराएँ जिनमें images या videos शामिल हैं।
3. Views। उन Views को खोजें जिनमें image fields शामिल हैं और देखें कि कौन‑सा field formatter उपयोग हो रहा है। Colorbox Views के "Colorbox" format plugin के माध्यम से भी लागू हो सकता है।
4. Custom code। अपने custom modules और themes में colorbox, .colorbox, Drupal.behaviors.colorbox और library key colorbox/colorbox के references खोजें।

# अपनी codebase में त्वरित खोज (Drupal root से चलाएँ)
grep -r "colorbox" web/modules/custom web/themes/custom \
  --include="*.php" --include="*.js" --include="*.twig" \
  --include="*.yml" -l

पाई गई हर जगह का नोट रखें। replacement चरण में आप इनमें से प्रत्येक पर फिर से काम करेंगे।

4.2 Backup और Environment से जुड़े पहलू

• Active configuration export करें: drush config:export
• प्रारंभ करने से पहले export को version control में commit करें
• Migration के दौरान CSS/JS aggregation को disable करें (Admin → Performance)
• Database dump लें: drush sql:dump > pre-migration.sql
• यह सुनिश्चित करें कि आपका deployment pipeline staging/production पर config changes push कर सकता है

5 Drupal में GLightbox को इंस्टॉल और सक्षम करना

5.1 GLightbox JavaScript लाइब्रेरी इंस्टॉल करें

Drupal का GLightbox मॉड्यूल upstream GLightbox JS लाइब्रेरी पर निर्भर करता है। इसे उपलब्ध कराने के दो समर्थित तरीके हैं।

Option A — Composer + Asset Packagist (अनुशंसित)

# Asset Packagist को repository के रूप में जोड़ें (प्रोजेक्ट में एक बार)
composer config repositories.asset-packagist \
  composer https://asset-packagist.org

# लाइब्रेरी require करें
composer require oomphinc/composer-installers-extender
composer require npm-asset/glightbox

अपने composer.json के extra.installer-paths सेक्शन में npm-asset के लिए installer path जोड़ें या पुष्टि करें:

"extra": {
  "installer-types": ["npm-asset", "bower-asset"],
  "installer-paths": {
    "web/libraries/{$name}": [
      "type:drupal-library",
      "type:npm-asset",
      "type:bower-asset"
    ]
  }
}

composer install चलाने के बाद लाइब्रेरी web/libraries/glightbox/ में उपलब्ध होगी।

Option B — मैन्युअल प्लेसमेंट

GLightbox GitHub releases पेज से नवीनतम release डाउनलोड करें और सामग्री इस प्रकार रखें कि निम्न paths मौजूद हों:

web/libraries/glightbox/dist/js/glightbox.min.js
web/libraries/glightbox/dist/css/glightbox.min.css

5.2 GLightbox Drupal मॉड्यूल इंस्टॉल और सक्षम करें

# मॉड्यूल डाउनलोड करें
composer require drupal/glightbox

# मॉड्यूल सक्षम करें
drush en glightbox -y

# caches साफ़ करें
drush cr

यह सुनिश्चित करने के लिए कि लाइब्रेरी सही ढंग से detect हो रही है और global configuration विकल्पों को देखने के लिए Admin → Configuration → Media → GLightbox पर जाएँ।

6 Colorbox फ़ंक्शनैलिटी को बदलना

6.1 Image Fields

यह Colorbox का सबसे आम उपयोग‑केस है: किसी content type पर एक image field, जो एक thumbnail दिखाता है और full‑size image को lightbox में खोलता है।

1. Structure → Content Types → [Your Type] → Manage display पर जाएँ।
2. image field ढूँढें। Format dropdown पर क्लिक करें और इसे Colorbox से बदलकर GLightbox करें।
3. formatter को कॉन्फ़िगर करने के लिए settings gear (⚙) पर क्लिक करें। Image style (पेज पर दिखने वाला thumbnail) और Linked image style (lightbox में लोड होने वाली image) सेट करें। आवश्यकता होने पर captions सक्षम करें।
4. display configuration को save करें और caches साफ़ करें: drush cr।

आप इसी configuration को YAML के माध्यम से export कर के लागू भी कर सकते हैं। नीचे content type display YAML में एक उदाहरण field formatter configuration दिया गया है:

# core.entity_view_display.node.article.default.yml (excerpt)
dependencies:
  module:
    - glightbox
    - image
content:
  field_image:
    type: glightbox
    label: hidden
    settings:
      image_style: medium
      image_link: ''
      glightbox_image_style: large
      glightbox_gallery: ''
      glightbox_caption: title
      glightbox_caption_custom: ''
    third_party_settings: {  }

6.2 Media और Galleries

Drupal के Media system का उपयोग करने वाली साइट्स के लिए migration के steps समान होते हैं, लेकिन इन्हें Media type display modes पर लागू किया जाता है।

• Structure → Media types → [Type] → Manage display पर जाएँ।
• image source field formatter को Colorbox से GLightbox में बदलें।
• Gallery grouping के लिए, GLightbox formatter settings में Gallery ID फ़ील्ड कॉन्फ़िगर करें। समान gallery ID साझा करने वाले सभी items lightbox के भीतर एक समूह के रूप में navigable होंगे। यह सीधे GLightbox के native data-gallery attribute से मैप होता है।

Caption mapping सरल है: GLightbox data-description attribute पढ़ता है। Drupal मॉड्यूल आपको इसे image के title, alt attribute, या किसी custom field value से मैप करने देता है।

6.3 Views Integration

यदि Views में Colorbox formatting के साथ images दिखाई जा रही हैं, तो प्रत्येक View को निम्न प्रकार अपडेट करें:

1. Structure → Views → [View name] → Edit में View खोलें।
2. Fields के अंतर्गत image field पर क्लिक करें। Formatter dropdown में Colorbox से बदलकर GLightbox चुनें।
3. यदि Colorbox integration Format स्तर पर लागू किया गया था (उदाहरण के लिए “Colorbox” format plugin), तो उसे किसी standard format जैसे Unformatted list या Grid में बदलें और GLightbox formatter को field स्तर पर लागू करें।
4. Save करें और caches साफ़ करें।

7 Colorbox को सुरक्षित रूप से हटाना

जब सभी formatters और custom code को migrate कर लिया जाए, तब आप Colorbox को सुरक्षित रूप से हटा सकते हैं। dependency errors से बचने के लिए निम्न क्रम का पालन करें:

1. Colorbox मॉड्यूल को disable करें। Uninstall करने से पहले disable करने से Drupal को उसका hook_uninstall() cleanup चलाने का अवसर मिलता है।

   drush pm:uninstall colorbox -y

2. composer.json से हटाएँ।

   composer remove drupal/colorbox

3. यदि Colorbox JS लाइब्रेरी मैन्युअली रखी गई थी, तो web/libraries/colorbox/ से Colorbox JS लाइब्रेरी हटाएँ।
4. Custom code साफ़ करें। Colorbox CSS classes (.colorbox, .colorbox-load), JavaScript behaviors (Drupal.behaviors.colorbox), या library attachments (colorbox/colorbox) के किसी भी शेष reference को खोजकर हटाएँ।

5. सभी caches साफ़ करें और config export करें।

   drush cr
   drush config:export

8 Customization और Enhancements

8.1 GLightbox के Configuration Options

Global GLightbox settings पेज (Admin → Configuration → Media → GLightbox) सबसे अधिक उपयोग किए जाने वाले विकल्पों को उपलब्ध कराता है। ये विकल्प सीधे GLightbox के JavaScript API से मेल खाते हैं:

8.2 Theming और Styling

GLightbox एक default stylesheet (glightbox.min.css) के साथ आता है, जो एक साफ़ dark‑overlay डिज़ाइन देता है। लाइब्रेरी फ़ाइल को बदले बिना इसे अपने theme में override करें:

/* mytheme/css/glightbox-overrides.css */

/* Overlay background बदलें */
.glightbox-clean .goverlay {
  background: rgba(0, 0, 0, 0.92);
}

/* Caption area की styling */
.glightbox-clean .gdesc-inner {
  font-family: inherit;
  font-size: 0.9rem;
  color: #f0f0f0;
  padding: 12px 16px;
}

/* Navigation arrows को बड़ा करें */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  width: 48px;
  height: 48px;
}

/* Light‑mode variant */
@media (prefers-color-scheme: light) {
  .glightbox-clean .goverlay {
    background: rgba(255, 255, 255, 0.95);
  }
  .glightbox-clean .gdesc-inner {
    color: #1a1a1a;
  }
}

Override stylesheet को अपने theme की .libraries.yml फ़ाइल में attach करें:

# mytheme.libraries.yml
glightbox-overrides:
  version: VERSION
  css:
    theme:
      css/glightbox-overrides.css: {}
  dependencies:
    - glightbox/glightbox

फिर इसे globally mytheme.info.yml में attach करें:

# mytheme.info.yml (excerpt)
libraries:
  - mytheme/glightbox-overrides

8.3 Advanced Use Cases

#attached के माध्यम से Programmatic Attachment

आप किसी भी render array में GLightbox लाइब्रेरी को custom module या preprocess hook के माध्यम से attach कर सकते हैं:

// किसी preprocess function या custom block build() में
$build['#attached']['library'][] = 'glightbox/glightbox';

// JS settings में configuration overrides पास करें
$build['#attached']['drupalSettings']['glightbox'] = [
  'animation'  => 'fade',
  'loop'       => TRUE,
  'touchNavigation' => TRUE,
];

Twig Templates में Custom Triggers

Twig template में मैन्युअली GLightbox trigger बनाने के लिए आवश्यक attributes जोड़ें। GLightbox किसी भी ऐसे element को पहचान लेता है जिसमें class="glightbox" (या आपका configured selector) मौजूद हो:

{# एक single image खोलें #}
<a href="{{ file_url(node.field_hero_image.entity.uri.value) }}"
   class="glightbox"
   data-title="{{ node.label }}"
   data-description="{{ node.field_caption.value }}">
  {{ content.field_hero_image }}
</a>

{# Gallery group — same data-gallery वाले सभी items एक साथ खुलेंगे #}
{% for item in node.field_gallery %}
  <a href="{{ file_url(item.entity.uri.value) }}"
     class="glightbox"
     data-gallery="gallery-{{ node.id }}"
     data-description="{{ item.alt }}">
    <img src="{{ file_url(item.entity.uri.value) | image_style('thumbnail') }}"
         alt="{{ item.alt }}" />
  </a>
{% endfor %}

Custom Initialization के लिए Drupal Behavior

यदि आपको ऐसे options के साथ GLightbox initialize करना है जो मॉड्यूल के admin UI में उपलब्ध नहीं हैं, तो एक custom Drupal behavior का उपयोग करें:

// mytheme/js/glightbox-init.js
(function (Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.mythemeGlightbox = {
    attach(context, settings) {
      // प्रत्येक context में केवल एक बार initialize करें
      const elements = context.querySelectorAll('.glightbox-custom:not(.glightbox-processed)');
      if (!elements.length) return;

      elements.forEach(el => el.classList.add('glightbox-processed'));

      const lightbox = GLightbox({
        selector: '.glightbox-custom',
        touchNavigation: true,
        loop: true,
        animation: 'fade',
        autoplayVideos: settings.glightbox?.autoplayVideos ?? true,
      });
    },
  };

}(Drupal, drupalSettings));

9 Testing और Quality Assurance

Migration पूरा करने के बाद, production में deploy करने से पहले निम्न QA checklist को पूरा करें:

Functional Testing

• सभी प्रभावित content types में images क्लिक करने पर lightbox में खुलती हैं
• Gallery navigation (prev/next arrows, keyboard arrows) सही ढंग से काम करता है
• Captions प्रदर्शित होते हैं और अपेक्षित field value से मेल खाते हैं
• Video items (YouTube, Vimeo, local) स्वतः चलते हैं और सही ढंग से बंद होते हैं
• Lightbox बंद करने पर (✕ बटन, Escape key, बाहर क्लिक) focus सही ढंग से वापस आता है

Cross-Browser Testing

• Chrome/Edge (Chromium), Firefox, Safari (macOS और iOS)
• यह सत्यापित करें कि CSS transitions सभी test किए गए browsers में सही render हो रही हैं

Mobile और Touch Testing

• Gallery items के बीच swipe left/right नेविगेशन काम करता है
• Images पर pinch‑to‑zoom (यदि सक्षम हो)
• Overlay छोटे screens पर viewport को सही ढंग से कवर करता है

Accessibility Checks

• Tab key lightbox controls (close, prev, next) के बीच सही ढंग से cycle करती है
• Lightbox बंद करने के बाद focus trigger element पर वापस आता है
• Screen reader dialog और उसके content की घोषणा करता है (NVDA या VoiceOver से टेस्ट करें)
• axe DevTools या Lighthouse accessibility audit चलाएँ — लक्ष्य zero critical errors रखें

Performance

• CSS/JS aggregation दोबारा सक्षम करें और सुनिश्चित करें कि GLightbox फिर भी initialize होता है
• Lighthouse performance audit चलाएँ और Colorbox baseline से तुलना करें
• किसी भी test किए गए पेज पर JavaScript console errors न हों

10 सामान्य समस्याएँ और Troubleshooting

Images Lightbox में नहीं खुल रहीं

लक्षण: Image पर क्लिक करने पर GLightbox खुलने के बजाय linked URL पर नेविगेट हो जाता है।

• यह जाँचें कि GLightbox लाइब्रेरी लोड हो रही है या नहीं: browser DevTools → Network टैब खोलें, glightbox से फ़िल्टर करें। यदि नहीं मिलती, तो सुनिश्चित करें कि लाइब्रेरी फ़ाइलें web/libraries/glightbox/dist/ में मौजूद हैं।
• यह सुनिश्चित करें कि CSS/JS aggregation सही ढंग से काम कर रहा है; समस्या को isolate करने के लिए अस्थायी रूप से इसे disable करके देखें।
• Rendered HTML जाँचें और पुष्टि करें कि trigger element पर class="glightbox" attribute (या आपका custom selector) मौजूद है।

Captions missing या Galleries टूटी हुई

लक्षण: Captions खाली हैं या gallery navigation items को skip करता है।

• Rendered anchor tags inspect करें: सुनिश्चित करें कि data-description populated है और grouped items में data-gallery values एक‑सी हैं।
• जाँचें कि Caption source field formatter setting किसी non‑empty field की ओर संकेत कर रही है।
• Gallery grouping के लिए, सुनिश्चित करें कि gallery ID consistent है; token‑generated IDs खाली हो सकते हैं यदि Token module इंस्टॉल न हो।

अन्य JS लाइब्रेरीज़ के साथ Conflicts

लक्षण: GLightbox आंशिक रूप से initialize होता है या console errors देता है।

• Duplicate GLightbox library loads की जाँच करें (module + manual theme attachment)।
• यह सत्यापित करें कि कोई अन्य library window.GLightbox को override नहीं कर रही।
• यदि आपका theme JS bundler उपयोग करता है, तो सुनिश्चित करें कि GLightbox Drupal asset system के अलावा अलग से bundle न किया गया हो।

Cache और Aggregation से जुड़ी समस्याएँ

लक्षण: Development में GLightbox काम करता है पर production में नहीं।

• Production पर config deploy करने के बाद drush cr चलाएँ।
• यह सुनिश्चित करें कि web/libraries/glightbox/ सही ढंग से commit या deploy हुआ है — अक्सर .gitignore में libraries/ directory exclude हो जाती है। CI/CD pipeline में composer install --no-dev चलाने पर विचार करें।
• यदि CSS aggregation GLightbox stylesheet को compress करके selector specificity तोड़ देती है, तो override फ़ाइल को बाद में load होने दें।

# Production पर सभी caches साफ़ करें (यदि Drush उपलब्ध है)
drush @prod cr

# लाइब्रेरी फ़ाइल मौजूद है या नहीं, जाँचें
ls web/libraries/glightbox/dist/js/glightbox.min.js

11 निष्कर्ष

Colorbox से GLightbox की ओर migration किसी भी Drupal प्रोजेक्ट के लिए एक सार्थक frontend modernization कदम है। इसके लाभ स्पष्ट और व्यावहारिक हैं:

• Lightbox path से jQuery runtime dependency को हटाना
• Visitors को तेज़ और हल्का अनुभव प्रदान करना
• बिना custom patches के out‑of‑the‑box accessibility compliance प्राप्त करना
• Drupal core की vanilla JavaScript दिशा के साथ alignment
• सक्रिय रूप से विकसित लाइब्रेरी के साथ दीर्घकालिक maintenance burden को कम करना

Migration स्वयं कम‑जोखिम वाला है यदि इसे व्यवस्थित रूप से किया जाए: पहले audit करें, field formatters को एक‑एक करके migrate करें, legacy code साफ़ करें, और deploy करने से पहले thoroughly test करें। glightbox Drupal मॉड्यूल इस प्रक्रिया को अधिकांशतः declarative बनाता है — admin UI में configuration changes, न कि custom code।

जिन साइट्स पर broader frontend modernization चल रही है — जैसे decoupled या headless architecture की ओर बढ़ना, आधुनिक theme (Olivero, Gin या custom design system) अपनाना, या JavaScript weight कम करना — उनके लिए Colorbox को GLightbox से बदलना एक उत्कृष्ट शुरुआती कदम है जो कम जोखिम में स्पष्ट परिणाम देता है।