1

I am using the Masonry API and Masonry Views modules to get a view to render nicely, it works well.

I'm using oEmbed Core to render the URL provided by the user into an embedded tweet for a specific node type. That also works fine.

When the tweet shows up in the view however, my blocks get overlapped because the twitter widget is rendering after masonry has run. How do I rerun masonry once the tweet has fully rendered?

1

I went through the twitter documentation and found a way to call functions on twitter widget events:

// Load the twitter widgets script
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

// Bind an event to rerun the masonry layout when a tweet is rendered
twttr.ready(
  function (twttr) {
    twttr.events.bind(
      'rendered',
      function (event) {
        jQuery(function($) {
          $('.view-content.masonry').masonry();
        });
      }
    );
  }
);

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.