Add image modal feature for better image viewing experience #849

aniirathod · 2025-10-05T22:25:22Z

Summary

This PR implements an image modal feature that enhances the user experience when viewing images.
Instead of navigating to the image URL, users can now click on an image to view it in a modal overlay.

Changes Made

Added a new JavaScript implementation to handle image modal logic.
Applied Tailwind CSS-based styling for the modal and transition animations.
Restricted modal functionality only to relevant content images (excluding avatars, icons, and logos).
Clicking outside the image or pressing the close button dismisses the modal.

Issue Reference

Fixes #819

gemini-code-assist · 2025-10-05T22:25:35Z

Summary of Changes

Hello @aniirathod, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant user experience improvement by adding an image modal feature. Instead of opening images in a new tab, users can now click on main content images to view them in a sleek, full-screen overlay. This change streamlines image consumption, making the site more interactive and visually engaging.

Highlights

Image Modal Feature: Implemented a new image modal feature that allows users to click on content images to view them in an overlay, enhancing the viewing experience without navigating away from the page.
JavaScript Logic: A new JavaScript file (image.js) was added to handle the core functionality of the image modal, including opening, closing, and event listeners for user interaction.
Styling and Animations: Tailwind CSS is utilized for styling the modal overlay and its content, including transition animations for a smoother user experience. A new fade-in keyframe animation was added.
Targeted Application: The modal functionality is specifically applied to relevant content images by adding a modal-image class, ensuring that elements like avatars, icons, and logos are excluded.
Modal Dismissal: Users can dismiss the modal by clicking outside the image, pressing a dedicated close button, or using the 'Escape' key, providing multiple intuitive ways to exit the view.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

deepsource-io · 2025-10-05T22:25:36Z

Here's the code health analysis summary for commits 885edf6..85b5da1. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Link
Python	✅ Success	View Check ↗
Secrets	✅ Success	View Check ↗
Shell	✅ Success	View Check ↗
Docker	✅ Success	View Check ↗
JavaScript	✅ Success	View Check ↗

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

gemini-code-assist

Code Review

This pull request introduces a valuable image modal feature, improving the user experience for viewing images. The implementation is mostly solid, with appropriate changes to the HTML and CSS to support the new functionality. However, the core JavaScript logic in frontend/assets/scripts/image.js has a few areas for improvement regarding robustness, security, and event handling. I've provided specific comments and suggestions to address these points.

frontend/assets/scripts/image.js

jbampton · 2025-10-07T05:42:25Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a great image modal feature, enhancing the user experience. The JavaScript implementation is efficient, using event delegation. My review focuses on several key areas for improvement: critical accessibility enhancements for the modal (like focus trapping and ARIA attributes), preventing body scroll when the modal is active, and a couple of code refinements in both the JavaScript and CSS for better maintainability and correctness. Overall, this is a solid addition.

frontend/assets/scripts/image.js

frontend/assets/tailwind.css

aniirathod · 2025-10-09T10:08:04Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a nice image modal feature, improving the image viewing experience. The implementation is solid, especially regarding accessibility features like focus management and ARIA attributes. I've left a few comments with suggestions for improvement, mainly focusing on a regression for users without JavaScript, a bug with the modal animation, and some points on code style and robustness. Overall, great work on this feature.

frontend/about.md

frontend/assets/scripts/image.js

…ctionality

aniirathod · 2025-10-09T10:38:03Z

/gemini review

gemini-code-assist

Code Review

This pull request successfully adds a new image modal feature, which is a great enhancement for user experience. The JavaScript implementation is particularly well-done, with excellent attention to accessibility details like focus management and ARIA attributes.

My review includes a few suggestions to improve the code further:

A fix for the modal's fade-in animation, which is currently not working due to incorrect CSS structure.
A couple of suggestions to improve long-term maintainability by separating data from presentation in a Nunjucks template and extracting long strings of utility classes from JavaScript into dedicated CSS classes.

frontend/assets/tailwind.css

frontend/about.md

frontend/assets/scripts/image.js

aniirathod · 2025-10-09T10:45:04Z

Hey @jbampton All requested changes have been implemented. Gemini bot is now suggesting additional improvements—if we decide to include those, I can open a PR for them.

jbampton · 2025-10-12T09:19:14Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a well-implemented image modal feature, enhancing the user experience for viewing images. The JavaScript is clean and includes excellent accessibility considerations, such as focus trapping and ARIA attributes. The changes in the markdown files correctly apply the new functionality to the intended images.

I have a few suggestions to improve the implementation. One is a critical fix related to the Tailwind CSS configuration, which may break site styling. The others are aimed at improving the robustness and maintainability of the new JavaScript module by using the higher-resolution image source and refactoring the DOM creation to use an HTML <template>.

frontend/assets/tailwind.css

frontend/assets/scripts/image.js

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

aniirathod · 2025-10-12T09:35:55Z

Hey @jbampton, the Tailwind config currently used on the website is from an older version. In Tailwind CSS v4, there are new ways to structure and create CSS. Right now, everything is working fine, but in the future, this setup could break.

Please merge this PR, and I’ll create a follow-up PR to migrate our CSS to the modular Tailwind v4 version.

aniirathod · 2025-10-22T19:08:09Z

Hey @jbampton can you review ?

aniirathod · 2025-10-30T22:09:24Z

Hey @jbampton is there any update on this PR ?

Add image modal feature for better image viewing experience

2e2e282

aniirathod requested a review from jbampton as a code owner October 5, 2025 22:25

github-actions bot added root frontend labels Oct 5, 2025

gemini-code-assist bot reviewed Oct 5, 2025

View reviewed changes

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

aniirathod added 5 commits October 6, 2025 04:01

Documented code

4155e0b

Prevent XSS attack

01ed3d3

Variable declartion solved

8ca761e

Variable and documenting code

39b05ae

function reorder and documenting code

a11dd1b

gemini-code-assist bot reviewed Oct 7, 2025

View reviewed changes

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

frontend/assets/scripts/image.js Outdated Show resolved Hide resolved

frontend/assets/tailwind.css Show resolved Hide resolved

jbampton marked this pull request as draft October 8, 2025 00:03

jbampton self-assigned this Oct 9, 2025

jbampton added this to Chess Oct 9, 2025

jbampton added this to the Hacktoberfest milestone Oct 9, 2025

jbampton moved this to In Progress in Chess Oct 9, 2025

Fixes deployed conflic and disabled scrolling when image is open

9594278

aniirathod marked this pull request as ready for review October 9, 2025 10:09

gemini-code-assist bot reviewed Oct 9, 2025

View reviewed changes

fix: wrap images in <a> tags for non-JS users while keeping modal fun…

b32724c

…ctionality

gemini-code-assist bot reviewed Oct 9, 2025

View reviewed changes

frontend/assets/tailwind.css Show resolved Hide resolved

frontend/about.md Show resolved Hide resolved

frontend/assets/scripts/image.js Show resolved Hide resolved

Merge branch 'main' into feat/image-modal

0112a7a

gemini-code-assist bot reviewed Oct 12, 2025

View reviewed changes

frontend/assets/tailwind.css Show resolved Hide resolved

frontend/assets/scripts/image.js Show resolved Hide resolved

frontend/assets/scripts/image.js Show resolved Hide resolved

Update frontend/assets/tailwind.css

38aa195

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Merge branch 'main' into feat/image-modal

85b5da1

jbampton added hacktoberfest hacktoberfest-accepted labels Oct 30, 2025

Uh oh!

Add image modal feature for better image viewing experience #849

Are you sure you want to change the base?

Add image modal feature for better image viewing experience #849

Uh oh!

Conversation

aniirathod commented Oct 5, 2025

Summary

Changes Made

Issue Reference

Uh oh!

gemini-code-assist bot commented Oct 5, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

deepsource-io bot commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Analysis Summary

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jbampton commented Oct 7, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aniirathod commented Oct 9, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aniirathod commented Oct 9, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aniirathod commented Oct 9, 2025

Uh oh!

jbampton commented Oct 12, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aniirathod commented Oct 12, 2025

Uh oh!

aniirathod commented Oct 22, 2025

Uh oh!

aniirathod commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

deepsource-io bot commented Oct 5, 2025 •

edited

Loading