I'm currently facing an issue with implementing a Twitter Collection Grid on my website using an angularJS directive. The grid is not displaying correctly, as the pictures are stacking on top of each other instead of forming a grid layout. I've tried resizing the widget but it doesn't seem to resolve the issue. Interestingly, the grid works correctly about 25% of the time when I reload the page. Here's the code snippet I'm using:
<div id="twitter-collection">
<twitter-collection></twitter-collection>
</div>
And here is the directive code:
.directive("twitterCollection", [ function() {
return {
restrict: 'E',
template: '<a class="twitter-grid" href="https://twitter.com/_/timelines/539487832448843776">Tweets with pictures</a>',
link: function(scope, element, attrs) {
function run() {
(! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs"));
console.log('run TwitterCollection script');
}
run();
}
};
}])
Has anyone else encountered this issue or successfully implemented the Twitter Collection Grid? I would appreciate any insights on how to resolve this problem. Thank you!