Skip to content

Conversation

@NoumaanAhamed
Copy link
Collaborator

@NoumaanAhamed NoumaanAhamed commented Dec 1, 2025

Description

This PR fixes issues with the Masonry cascading grid layout not initializing properly on media gallery pages in BuddyX Theme.

Solves #2223

Problem

When Masonry layout is enabled in rtMedia Settings:

  • Console shows $(...).masonry("reload") is not a valid method errors
  • Grid layout doesn't apply correctly
Image

Root Causes

  1. Boolean/String Type Mismatch: The rtmedia_masonry_layout variable comparison was checking for string "true" but the value could be boolean true. In JavaScript, true == "true" returns false.

  2. Masonry v4.x API: The reload() method doesn't exist in Masonry v4.x core - it's only added by the jQuery bridge. When the bridge isn't available, the call fails.

Solution

  1. Updated all masonry layout checks to handle both boolean and string values
  2. Updated rtm_masonry_reload() to check method availability and use native Masonry v4.x methods as fallback

Testing Instructions

Setup

  1. Run npx grunt build (or npx grunt terser for JS only)
  2. Clear browser cache

Test Masonry

  1. Go to rtMedia Settings → Display
  2. Enable "Masonry Cascading grid layout"
  3. Save settings
  4. Go to a user's Media Gallery page
  5. Verify:
    • No console errors about masonry("reload")
    • Grid displays in cascading layout
    • Resize window - items should reflow

@NoumaanAhamed NoumaanAhamed changed the title Fix/buddyx masonry script Fix Masonry Script Issues in BuddyX Theme Dec 1, 2025
@NoumaanAhamed NoumaanAhamed marked this pull request as ready for review December 1, 2025 08:23
Copilot AI review requested due to automatic review settings December 1, 2025 08:23
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes critical JavaScript issues preventing the Masonry cascading grid layout from initializing properly in rtMedia galleries within the BuddyX theme. The changes address two root causes: a type mismatch between boolean and string values, and incompatibility with Masonry v4.x API.

Key Changes:

  • Updated all masonry layout condition checks to handle both boolean true and string "true" values
  • Enhanced rtm_masonry_reload() function to detect available Masonry API methods and use appropriate fallback for v4.x compatibility
  • Applied consistent strict equality comparisons throughout the codebase

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
app/assets/js/rtMedia.js Updated masonry layout checks in 5 locations to handle both boolean and string types; refactored rtm_masonry_reload() to support both jQuery bridge and native Masonry v4.x API
app/assets/js/rtmedia.min.js Minified version reflecting all source changes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

"activity_get_older_updates" === get_action) &&
"undefined" !== typeof rtmedia_masonry_layout &&
"true" === rtmedia_masonry_layout &&
("true" === rtmedia_masonry_layout || true === rtmedia_masonry_layout) &&
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make a common function that will check both the string "true" and the boolean true value? and use it at all places

KMchaudhary
KMchaudhary previously approved these changes Dec 3, 2025
@rtBot
Copy link
Contributor

rtBot commented Dec 3, 2025

Unable to PHPCS or SVG scan one or more files due to error running PHPCS/SVG scanner:

  • app/assets/js/rtMedia.js
  • app/assets/js/rtmedia.min.js

The error may be temporary. If the error persists, please contact a human (commit-ID: 443f686).

@NoumaanAhamed NoumaanAhamed merged commit 05b62f3 into develop Dec 3, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants