A Drupal module that extends the core Responsive Image module to support CSS container queries.
It adds breakpoints and automatically detects when to enable container query mode.

Project link

https://www.drupal.org/project/container_query_images

CommentFileSizeAuthor
container-query-images.png1004.56 KBrouaida
cqi.png81.16 KBrouaida

Comments

rouaida created an issue. See original summary.

vishal.kadam’s picture

Issue summary: View changes
vishal.kadam’s picture

Title: [1.0.x] container query images » [1.0.x] Container Query Images
avpaderno’s picture

Thank you for applying!

Please read Review process for security advisory coverage: What to expect for more details and Security advisory coverage application checklist to understand what reviewers look for. Tips for ensuring a smooth review gives some hints for a smoother review.

The important notes are the following.

  • If you have not done it yet, you should enable GitLab CI for the project and fix the PHP_CodeSniffer errors/warnings it reports.
  • For the time this application is open, only your commits are allowed.
  • The purpose of this application is giving you a new drupal.org role that allows you to opt projects into security advisory coverage, either projects you already created, or projects you will create. The project status will not be changed by this application; once this application is closed, you will be able to change the project status from Not covered to Opt into security advisory coverage. This is possible only 14 days after the project is created.

    Keep in mind that once the project is opted into security advisory coverage, only Security Team members may change coverage.
  • Only the person who created the application will get the permission to opt projects into security advisory coverage. No other person will get the same permission from the same application; that applies also to co-maintainers/maintainers of the project used for the application.
  • We only accept an application per user. If you change your mind about the project to use for this application, or it is necessary to use a different project for the application, please update the issue summary with the link to the correct project and the issue title with the project name and the branch to review.

To the reviewers

Please read How to review security advisory coverage applications, Application workflow, What to cover in an application review, and Tools to use for reviews.

The important notes are the following.

  • It is preferable to wait for a project moderator before posting the first comment on newly created applications. Project moderators will do some preliminary checks that are necessary before any change on the project files is suggested.
  • Reviewers should show the output of a CLI tool only once per application.
  • It may be best to have the applicant fix things before further review.

For new reviewers, I would also suggest to first read In which way the issue queue for coverage applications is different from other project queues.

vishal.kadam’s picture

Status: Needs review » Needs work

1. FILE: README.md

The README file is missing the required sections - Requirements and Configuration.

2. FILE: composer.json

  "require": {
    "drupal/core": "^10.2 || ^11"
  }

It is not necessary to add the Drupal core requirements in the /composer.json/ file: The Drupal.org Composer Façade will add them.

rouaida’s picture

The changes are in place

vishal.kadam’s picture

Remember to change status, when the project is ready to be reviewed. In this queue, projects are only reviewed when the status is Needs review.

rouaida’s picture

Status: Needs work » Needs review
langbly translator’s picture

Thank you for your work on this module and for addressing the previous feedback!

After reviewing the latest code on the 1.0.x branch, I found a few issues to address:

1. FILE: container_query_images.module
The file is missing `declare(strict_types=1);` at the top. All other PHP files in the project include this declaration, so it should be added here for consistency.

2. FILE: container_query_images.libraries.yml
The library declares `core/jquery` as a dependency, but the JavaScript code does not use jQuery at all — it uses vanilla JavaScript with `Drupal.behaviors` and the native ResizeObserver API. The `core/jquery` dependency should be removed.

3. FILE: css/container-query-images.css
The CSS contains rules targeting `.card-overlay` and `.hero-wrapper`, which are project-specific CSS classes. A contributed module should not include styles that assume the presence of theme- or project-specific classes. These rules should be removed from the module.

4. FILE: README.md
The README is missing a "Maintainers" section, which is required by the Drupal README template. Please add it at the bottom of the file.

5. FILE: src/Hook/ContainerQueryImagesHooks.php (optional, but recommended)
For Drupal 10.2+, the recommended way to implement hooks in a class is to use `#[Hook]` PHP attributes directly on the methods (e.g., `#[Hook('help')]` and `#[Hook('preprocess_responsive_image')]`), rather than delegating from procedural hooks in the .module file. This is not a blocker but is the modern Drupal standard.

bbu23’s picture

Status: Needs review » Needs work
rouaida’s picture

Status: Needs work » Needs review

Thank you for your comments
I have made the necessary corrections.

batigolix’s picture

Status: Needs review » Needs work

Here are 2 minor issues for possible improvement of the module / project:

1. In the readme, use the installation instruction as suggested by the template: https://www.drupal.org/docs/develop/managing-a-drupalorg-theme-module-or...

2. If the module code includes any AI generated content, then it is a good practices to disclose this (on the project page or in the application). See https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquett...

rouaida’s picture

Status: Needs work » Needs review

Readme file updated

Thank you.

batigolix’s picture

Looks good!

sraseef’s picture

Status: Needs review » Reviewed & tested by the community

I reviewed the module code for security and coding standards.

Security

No security issues found. The module does not process direct user input. Width values are properly extracted using regex and cast to integers. No use of
eval(), unserialize(), or other unsafe functions. The help() method uses string concatenation for HTML output instead of render arrays, which is minor but
could use render arrays with allowed tags for best practice.

Coding Standards (PHPCS Drupal/DrupalPractice)

PHP code passes with zero errors. The info.yml has packaging metadata warnings which are added by drupal.org automatically, not a real issue. README.md has 4
lines exceeding 80 characters on lines 3, 23, 97 and 130, these are minor warnings only.

Code Quality

Proper dependency injection via constructor. Uses strict types, final class, and readonly properties following modern PHP 8 patterns. Good defensive
programming with null checks and instanceof. JavaScript uses ResizeObserver with proper fallback for older browsers. CSS uses @supports for progressive
enhancement.

Minor Suggestions (non-blocking)

The core/jquery library is listed as a dependency but does not appear to be used in the JS file, this could be removed. No automated tests exist, unit tests
for the extractWidth() method would be beneficial.

Verdict

The module looks good. No security concerns found.

rouaida’s picture

Hello @sraseef, thank you for your message and for checking in.
The branch was correct—I’ve created a new release that includes all the modifications.

Thank you

avpaderno’s picture

Assigned: Unassigned » avpaderno

Thank you for your contribution and for your patience with the review process!

I am going to update your account so you can opt into security advisory coverage any project you create, including the projects you already created.

These are some recommended readings to help you with maintainership:

You can find more contributors chatting on Slack or IRC in #drupal-contribute. So, come hang out and stay involved!
Anyone is welcome to participate in the review process. Please consider reviewing other projects that are pending review. I encourage you to learn more about that process and join the group of reviewers.

I thank also all the reviewers for helping with these applications.

avpaderno’s picture

Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.