0

With many responsive designs it is not possible to assign image dimensions as they will be determined by the view-port dimensions. However some scripts, such as Packery, require image dimensions to be known to enable them to arrange items correctly, without overlapping or leaving large gaps. One solution often suggested (e.g. at https://drupal.stackexchange.com/a/77330/14365) is to use imagesloaded.

I have looked at other Drupal modules such as Views Isotope and Field Slideshow which both use imagesLoaded. They each implement it in a different way and I am looking for the correct way to add it in to the Packery module.

My understanding is that: First, a call to add the imagesLoaded script needs to be added to the module file. (The script itself is added to the libraries directory within a folder named 'imagesLoaded'). Secondly, the imagesLoaded() must be declared with the JavaScript file which currently contains:

(function($) { 
  Drupal.behaviors.packery = {
    attach: function(context, settings) {
      for (var packery in settings.packery) {
        var $container = $('#' + packery);
        $container.packery(settings.packery[packery].settings);
      }
    }
  };

}(jQuery));

Within the above I need to add in:

$('#container').imagesLoaded( function() {
  // images have loaded
});

Does the way that imagesLoaded is added within the module effect if it becomes a function? Adding the script side-wide is not really appropriate as it is only required in combination with the use of Packery. Does this mean it should be added in a certain way?

3

Super late but support for this request has been added in the latest commit of the Packery module: Commit 24856cf on 7.x-1.x by swim: Added imagesLoaded support on per settings basis.

Just toggle on/off on the settings page, and read the README.txt for the plugin placement. Here is a quote from the updated README.txt:

ImagesLoaded support

For imagesLoaded support please download the plugin from https://github.com/desandro/imagesloaded.
Place the plugin in the libraries directory at sites/all/libraries/imagesloaded so that the file is at sites/all/libraries/imagesloaded/imagesloaded.pkgd.min.js.

  • 2
    Swim, are you in any way associated with this project? If so, please state that clearly. It's nothing bad. Quite the opposite, actually, it's always good to hear from maintainers, or from people who made things happen. – Mołot Sep 11 '15 at 10:27
  • @Mołot .. .FYI: my flag about it got declined ... But I do like your "inspiring" comment ... – Pierre.Vriens Sep 12 '15 at 7:20
  • @Pierre.Vriens It could be just a name coincidence. After all, "swim" is a popular word. I find it unlikely, but on the other hand it's no proof for moderators. – Mołot Sep 12 '15 at 8:07
  • A picture is worth more then 1000 words ... So is a link : drupal.org/node/2314275/committers ... Based on that, IMHO not a coincidence ... Actually my userid on Drupal.SE also matches my userid on D.O ... By the way, think about how many similar "answers" on Drupal.SE could be posted ... every day ... for any flavour of issues (bug fixes, new features, docu enhancements, etc) ... It'd be interesting to see what would happen with those types of answers (Closed? Deleted? Upvoted/Downvoted? ...). You want "me" to submit some (dozens of) testcase-answers? – Pierre.Vriens Sep 12 '15 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.