Masonry intermittently does not arrange blocks upon page load

[darenwelsh]

When loading a MediaWiki page that uses MasonryMainPage, sometimes masonry will arrange the blocks and sometimes it will not. It is not clear if there is a conflict with div IDs, CSS, or something within the masonry or imagesLoaded scripts.

[darenwelsh]

I have not seen this issue in a long time. Since we just merged a new way of loading (#5) and that tested successfully, I think this is okay to close.

[JosefAssad]

I'm seeing an issue, it's possible this is the same one.

With MW 1.27, I'm getting the blocks arranged in a vertical line, they aren't making use of the horizontal space. Is that the same thing you were seeing?

[darenwelsh]

Sorry I didn't notice your comment until just now. I think you're describing the same behavior. Is it consistent or intermittent? Any console or debug messages?

[JosefAssad]

It's 100% consistent, which is convenient :)

It looks like this:

The console does indeed throw an exception:

TypeError: EventEmitter is not a constructor
http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.jquery.blockUI%7Cext.jquery.jqplot.core%2Cpie%7Cext.jquery.migration.browser%7Cext.masonrymainpage.base%7Cext.srf.jqplot.chart%2Cpie%2Cthemes%7Cjquery.accessKeyLabel%2Casync%2CbyteLength%2Cclient%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Cnotify%2Ctemplate%2Cutil%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js&skin=vector&version=0d2cf39c442e
Line 227

Screenshot from the console:

I can't see much in the apache logs or mw debug log that might appear relevant. Happy as ever to provide any extras info. :)

[gadgetmg]

I'm seeing this exact behavior as well. I have no idea if this is useful (I know very little about JavaScript), but I got this out of Chrome:
TypeError: EventEmitter is not a constructor at factory (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:7:969) at $ (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:6:890) at mw.loader.implement.css (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:6:944) at Object.<anonymous> (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:74) at fire (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:45:122) at Object.add [as done] (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:45:656) at Object.always (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:46:874) at runScript (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:162:955) at checkCssHandles (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:774) at Object.mw.loader.cssHandle (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:904)

[bryandamon]

I'm now seeing this behavior as well. The blocks always are arranged in a vertical line, but intermittently the blocks lose their formatting. I recently upgraded my wiki from 1.26 to 1.28.2.

Vertical Blocks

---

Vertical Blocks and loss of formatting

---

[jamesmontalvo3]

@bryandamon: Have you upgraded MasonryMainPage? What version are you on? If you're using git you can do cd /path/to/mediawiki/extensions/MasonryMainPage and then git rev-parse HEAD and report the An upgrade was required when jumping from MW1.25 to 1.27. I have not tested on 1.28 specifically.

[JosefAssad]

I still experience this issue. MW 1.27.1 here, and MasonryMainPage is at commit 9837244. I've checked it in several browsers, same issue. The js console complains about:

ReferenceError: imagesLoaded is not defined
http://wiki/load.php?debug=false&lang=en&modules=ext.jquery.blockUI%7Cext.jquery.jqplot.core%2Cpie%7Cext.jquery.migration.browser%7Cext.masonrymainpage.base%7Cext.srf.jqplot.chart%2Cpie%2Cthemes%7Cjquery.accessKeyLabel%2Casync%2CbyteLength%2Cclient%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Cnotify%2Ctemplate%2Cutil%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js&skin=vector&version=2dcda0e27f37
Line 221

I noticed the (new) notice in the MasonryMainPage README to install the ImagesLoaded library; I dropped that in my extensions folder. Wasn't entirely sure how to load it so I dropped a require_once "$IP/extensions/ImagesLoaded/ImagesLoaded.class.php"; in my LocalSettings.php` like any reckless idiot would do (even though I'm pretty sure that isn't how it's loaded) and the blocks are still stacking vertically; no joy. Is that ImagesLoaded library required? and is it something we're meant to use composer to install?

[jamesmontalvo3]

Not composer, but need to use the new MediaWiki method of loading extensions, e.g.

wfLoadExtensions( 'ImagesLoaded' );

Sorry this isn't listed in the docs. I've been trying to get several things updated to current MediaWiki versions and I just created an issue against Extension:ImagesLoaded to remember to circle back and add docs. Pull requests welcome. :)

Note that MasonryMainPage can be loaded in the above method, as well, but does not require it.

[jamesmontalvo3]

For more info on extension registration: https://www.mediawiki.org/wiki/Manual:Extension_registration

[JosefAssad]

Aye, that fixed it! ty James! Minor defail in case anyone else is tracking this issue, it's wfLoadExtension( 'ImagesLoaded' ); not wfLoadExtensions( 'ImagesLoaded' ); :)

[bryandamon]

Hi @jamesmontalvo3, I just upgraded to commit 9837244 and also installed ImagesLoaded (which I did not have on MW 1.26). The problem persists, always blocks in columns, occasionally I get formatting. For whatever reason, after running update.php the formatting comes back until a refresh.

[bryandamon]

Quick update. I also loaded MasonryMainPage using wfLoadExtension( 'MasonryMainPage' ); vs. the old way (which I don't think matters) but now after running update.php (or any edit to LocalSettings.php) I get everything right, both formatting and proper stacking of the blocks until a refresh, then after every subsequent refresh the issue persists.

Note, it's late, it very well could have done the same (formatting and stacking) after the update to commit 9837244 and/or the addition of ImagesLoaded.

[jamesmontalvo3]

@bryandamon what are you seeing if you open your browser's javascript console? How to open it differs based on your browser and operating system. After you open it you may need to refresh your MasonryMainPage page to see if it gives any errors. If there are many errors, feel free to just screenshot them.

[bryandamon]

@jamesmontalvo3, I do have the following error:
load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector:4 [c66163393a6b52e6c07a4b3e] /load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector BadMethodCallException from line 845 of /apps/mediawiki/htdocs/includes/session/SessionManager.php: Sessions are disabled for this entry point

I believe it has to do with an incompatibility between MW 1.28.2 and the version of SMW I have now, but maybe it's also creating a problem with MasonryMainPage as well?

Update

Uninstalling SMW removed the above warning, but the MasonryMainPage issue remains.