{"_id":"5703ca011e1c622000fea2ea","parentDoc":null,"githubsync":"","user":"564de2b4fe07a81700b5c3a4","version":{"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":4,"category":{"_id":"5666dac5d784a70d00397bcb","__v":8,"pages":["5666dda06819320d000c2e19","567856b9e5da8d0d00591c66","567861b8e5da8d0d00591c7c","568bdbf9e3e30f0d0021e07c","568be56983d2061900d86ce9","5697f7a60b09a41900b245d7","56abb8b49327b30d00f7c234","56d088977c2e100b000af8f0"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-08T13:27:33.662Z","from_sync":false,"order":4,"slug":"tutorials","title":"Tutorials"},"project":"564de2dbfe07a81700b5c3a5","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-04-05T14:21:53.331Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"Pinterest like layouts are still popular and work well really well for rich assets like images and videos. If you would like to create your own masonry layout, here's a quick demo using Embedly [oEmbed API](doc:oembed) and [Masonry](http://masonry.desandro.com/). \n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2F45qpxjhj%2F2%2F%3Fheight%3D600%26tabs%3Dresult%2Cjs%2Chtml%2Ccss&src=https%3A%2F%2Fjsfiddle.net%2F45qpxjhj%2F2%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2F&type=text%2Fhtml&key=f2aa6fc3595946d0afc3d76cbbd25dc3&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"600\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen=\\\"true\\\"></iframe>\",\n  \"url\": \"https://jsfiddle.net/45qpxjhj/2/?height=600&tabs=result,js,html,css\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": null\n}\n[/block]\nThe flow is pretty simple, grab the oEmbed data for each URL, create the grid and then call Masonry. Here's the code!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// The URLs that you want to embed.\\nvar urls = [\\n  'https://vimeo.com/158773447',\\n  'https://www.instagram.com/p/BCizMYGoXYG/',\\n  'https://www.youtube.com/watch?v=sGbxmsDFVnE',\\n  'https://vine.co/v/ijlT6naE6lT',\\n  'https://www.flickr.com/photos/snowyturner/26230731605/in/explore-2016-04-04/',\\n  'http://www.theverge.com/2016/3/1/11138904/aston-martin-db11-announced-geneva-motor-show-2016',\\n]\\n\\n$grid = $('.grid');\\n\\n// Use jQuery Embedly to make the API Calls.\\n$.embedly.oembed(urls, {\\n    key: '1d5c48f7edc34c54bdae4c37b681ea2b' // replace with your API KEY.\\n  })\\n  .then(function(oembeds) {\\n  \\t// Iterate over the results and add them to the grid.\\n    oembeds.forEach(function(oembed) {\\n      var $item = $('<div class=\\\"grid-item\\\"></div>');\\n      // Video Types.\\n      if (oembed.type === 'video' || oembed.type === 'rich') {\\n        // Makes the video responsive.\\n        $resp = $('<div class=\\\"resp-media\\\"></div>');\\n        var ratio = ((oembed.height / oembed.width) * 100).toPrecision(4) + '%'\\n        $resp.css({\\n          paddingBottom: ratio\\n        });\\n\\t\\t\\t\\t\\n        // Add it to and item.\\n        $resp.html(oembed.html);\\n        $item.append($resp);\\n      } else if (oembed.type === 'photo') { // Images\\n        $item.html('<img src=\\\"' + oembed.url + '\\\"/>');\\n      } else if (oembed.type === 'link') {\\n        $item.html([\\n          '<img src=\\\"' + oembed.thumbnail_url + '\\\"/>',\\n          '<h4>' + oembed.title + '</h4>',\\n          '<p>' + oembed.description + '</p>'\\n        ].join(''));\\n      } else {\\n      \\t// error case.\\n        return false;\\n      }\\n      // Add the item to the grid.\\n      $grid.append($item);\\n    });\\n  })\\n  .then(function() {\\n  \\t// tell masonry to do it's thing.\\n    $grid.masonry({\\n      itemSelector: '.grid-item',\\n      columnWidth: 300\\n    });\\n    // layout Masonry after each image loads\\n    $grid.imagesLoaded().progress( function() {\\n      $grid.masonry('layout');\\n    });\\n  });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nMake sure you include [imagesLoaded](http://imagesloaded.desandro.com/) otherwise you will get overlapping issues with images.","excerpt":"","slug":"masonry-embedly","type":"basic","title":"Masonry + Embedly"}