Fix: Open tutorial GIFs in lightbox overlay instead of new tab [#173]

[Tharindu-Senanayake12]

Purpose

Animated GIFs on the "Develop Your First Event Integration" page currently open in a new browser tab instead of the GLightbox overlay, which interrupts the reader's flow.
Resolves #173

Goals

Ensure tutorial GIFs open smoothly within the GLightbox overlay by applying the correct HTML class.

Approach

Added the class="glightbox" attribute to the tags wrapping the .gif image sources in develop-your-first-event-integration.md. This instructs the GLightbox script to hijack the click event and render the media in the overlay.

User stories

As a user reading the quick start guide, I want to click on the animated GIFs to enlarge them in a lightbox without leaving the documentation page.

Release note

Fixed an issue where animated GIFs in the Event Integration quick start guide bypassed the lightbox overlay.

Documentation

N/A - This is a UI/formatting fix for the documentation site.

Training

N/A

Certification

N/A - This is a UI fix for the documentation website and does not impact certification exams.

Marketing

N/A

Automation tests

• Unit tests

  N/A - Documentation markdown change.

• Integration tests

  N/A - Documentation markdown change.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
• Ran FindSecurityBugs plugin and verified report? N/A
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Samples

N/A

Related PRs

N/A

Migrations (if applicable)

N/A

Test environment

Tested locally using mkdocs serve to verify that the GIFs now open inside the lightbox overlay instead of a new tab.

Learning

Identified that while MkDocs/GLightbox automatically targets standard tags, it requires explicit class assignment (class="glightbox") for standard HTML anchor tags () pointing to media files.

Summary by CodeRabbit

• Documentation
  • Enhanced screenshot viewing experience in the Getting Started guide with improved image interactions.

[coderabbitai]

Walkthrough

Updated three HTML anchor elements wrapping screenshot images in the quick-start guide documentation by adding the class="glightbox" attribute. This enables GLightbox overlay functionality for the images. No other attributes or content were modified, and a trailing newline was added to the file.

Changes

Cohort / File(s)	Summary
GLightbox Integration en/docs/quick-start-guides/develop-your-first-event-integration.md	Added class="glightbox" attribute to three <a> elements wrapping image demonstrations to enable GLightbox overlay behavior instead of opening raw images in new tabs.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 In docs so bright, where screenshots gleam,
GLightbox brings a smoother dream,
Class="glightbox" now guides the way,
Images pop in overlay display!
No tabs shall steal the reading flow,
Just elegant overlays, as docs should show. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: opening tutorial GIFs in a lightbox overlay instead of a new tab, referencing the associated issue.
Description check	✅ Passed	The PR description comprehensively covers all required template sections including purpose, goals, approach, user stories, and testing details with appropriate context.
Linked Issues check	✅ Passed	The code changes directly address issue #173 by adding class="glightbox" to anchor tags wrapping GIF images, implementing the proposed solution exactly as specified.
Out of Scope Changes check	✅ Passed	All changes are scoped to the single documentation file with only the addition of the glightbox class attribute and newline normalization, directly addressing the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

en/docs/quick-start-guides/develop-your-first-event-integration.md (1)

47-68: Consider more specific alt text per GIF for accessibility.

All three images currently use the same alt text (Add Configurations), but they represent different steps. More specific alt text would improve screen-reader clarity.

♿ Optional refinement

-<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-configurables.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-configurables.gif" alt="Add Configurations" width="80%"></a>
+<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-configurables.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-configurables.gif" alt="Adding configuration variables in WSO2 Integrator: BI" width="80%"></a>

-<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-event-listener.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-event-listener.gif" alt="Add Configurations" width="80%"></a>
+<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-event-listener.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/add-event-listener.gif" alt="Creating RabbitMQ event listener configuration" width="80%"></a>

-<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/implement-event-handler.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/implement-event-handler.gif" alt="Add Configurations" width="80%"></a>
+<a href="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/implement-event-handler.gif" class="glightbox"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-event-integration/implement-event-handler.gif" alt="Implementing the onMessage event handler flow" width="80%"></a>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@en/docs/quick-start-guides/develop-your-first-event-integration.md` around
lines 47 - 68, The three GIFs use the identical alt text "Add Configurations",
which is not descriptive for screen readers; update the alt attributes for the
<img> elements referencing add-configurables.gif, add-event-listener.gif, and
implement-event-handler.gif to concise, specific descriptions that reflect the
step shown (e.g., "Open Add Configurables dialog", "Create RabbitMQ event
listener queue", "Implement onMessage handler with Log Info node"), replacing
the current alt values so each image has unique, meaningful alt text.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@en/docs/quick-start-guides/develop-your-first-event-integration.md`:
- Around line 47-68: The three GIFs use the identical alt text "Add
Configurations", which is not descriptive for screen readers; update the alt
attributes for the <img> elements referencing add-configurables.gif,
add-event-listener.gif, and implement-event-handler.gif to concise, specific
descriptions that reflect the step shown (e.g., "Open Add Configurables dialog",
"Create RabbitMQ event listener queue", "Implement onMessage handler with Log
Info node"), replacing the current alt values so each image has unique,
meaningful alt text.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 64ada52b-5b71-4d8d-af00-29b7b8aa7a39

📥 Commits

Reviewing files that changed from the base of the PR and between fb0b7be and 6c66f19.

📒 Files selected for processing (1)

• en/docs/quick-start-guides/develop-your-first-event-integration.md