Masonry Layout

Author	« Topic »
EllenD Advanced Member United Kingdom 424 Posts	Posted - 01/23/2015 : 08:20:30 I've been looking for a masonry 'Pinterest' style layout and found it surprisingly easy to implement, so thought I would share and see if anyone else would like to try this. Often there is the problem where the image sizes are different heights, or there is different amounts of short description text, so the height of the product div on the products page is different and the layout can look messy. Check out the Masonry javascript plugin described here http://masonry.desandro.com/ To implement on ECT, all I did was edit my products.php to add the following code just after the line <?php include "vsadmin/inc/incproducts.php" ?> Added: <script src='js/masonry.pkgd.min.js'></script> <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> <script> var container = document.querySelector('.products'); var msnry = new Masonry( container, { //columnWidth: 300, itemSelector: '.product' }); // layout Masonry again after all images have loaded imagesLoaded( container, function() { msnry.layout(); }); </script> Then you just need to download the 2 .js files from the link above, and put them in a /js folder in your site. That's it! (I commented out the columnWidth setting as my site seemed more responsive without it, but it may depend on your CSS.) I'm not an expert in this as I've only just set it up, so would be interested to know if ECT staff or anyone else can see any potential problems with this? But so far I have to say it's looking very cool (thanks to the developers of the Masonry js)
EllenD Advanced Member United Kingdom 424 Posts	Posted - 02/24/2015 : 09:39:17 The website using this feature is now live and you can see an example here http://bit.ly/17u6Fub This is a standard ECT products page with no modifications to the ECT software (so it's updater proof). As this particular page is used for reviews, the buy buttons etc are removed via CSS, but they could just as easily be left on.
Andy ECT Moderator 95440 Posts	Posted - 02/24/2015 : 09:42:21 Hi Thanks very much for sharing that - looks very cool and I'm sure others will want to take advantaged of that kind of layout. Andy Please feel free to review / rate our software
Marshall Ecommerce Template Guru USA 1874 Posts	Posted - 03/26/2015 : 22:52:08 Heads up folks. If you use this, the pagenums at the bottom of the category or product pages, they will float up behind your categories or products and no CSS will fix that. However, I have a solution, but it only works when usecsslayout=true. If you are comfortable editing your ECT script, open inc/incbodyformat2.asp/php page and scroll to the very bottom. The last 7 lines of code will look like this: if iNumOfPages>1 AND nobottompagebar<>TRUE then if usecsslayout then print "<div class=""pagenums"" style=""width:100%"">" & vbCrLf else print "<tr><td colspan=""" & productcolumns & """ align=""center"" class=""pagenums""><p class=""pagenums"">" print writepagebar(CurPage,iNumOfPages,xxPrev,xxNext,pblink,nofirstpg) if usecsslayout then print "</div>" & vbCrLf else print "</p></td></tr>" end if if usecsslayout then print "</div>" else print "</table>" if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>" (sorry, don't have the php version, but it should be obvious) You need to get the pagenums outside of the class="categories" and class="products" division. TO do this, switch these lines: if usecsslayout then print "</div>" else print "</table>" if iNumOfPages>1 AND nobottompagebar<>TRUE then if usecsslayout then print "<div class=""pagenums"" style=""width:100%"">" & vbCrLf else print "<tr><td colspan=""" & productcolumns & """ align=""center"" class=""pagenums""><p class=""pagenums"">" print writepagebar(CurPage,iNumOfPages,xxPrev,xxNext,pblink,nofirstpg) if usecsslayout then print "</div>" & vbCrLf else print "</p></td></tr>" end if if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>" The part of the script in red has to be below the line if usecsslayout then print "</div>" else print "</table>" and above the line if defimagejs<>"" then print "<script type=""text/javascript"">"&defimagejs&"</script>" And that will solve the problem if you are using a CSS layout. You can still edit the CSS of the pagenums as usual. Marshall CENLYT Productions - ms designs Affordable Web Design Cenlyt.com From Our Heart FromOurHeart.com Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles
QKOnline Advanced Member USA 229 Posts	Posted - 01/25/2016 : 19:39:35 Marshall, just wanted to say THANKS!!! for the fix for the pagenums problem, it was driving me crazy until I found your post. Thanks again, Don... Don F. www.quilt-kits-online.com ECT PHP 6.2.6
Marshall Ecommerce Template Guru USA 1874 Posts	Posted - 01/25/2016 : 21:04:59 You're welcome Marshall CENLYT Productions - ms designs Affordable Web Design Cenlyt.com From Our Heart FromOurHeart.com Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles
QKOnline Advanced Member USA 229 Posts	Posted - 02/03/2016 : 19:49:31 OK, so now I tried to apply the masonry to the categories page, and have the problem where all the top text and navigation is getting overlayed by the categories, like this; http://nevadadrygoods.com/categories.php?cat=60 Any ideas? I know I have to do something in inccategories.php, but I'll be darned if I can figure it out. Don F. www.quilt-kits-online.com ECT PHP 6.2.6
dbdave ECT Moderator USA 10277 Posts	Posted - 02/03/2016 : 19:57:36 Hello, add this to your .css file div.categories { clear:both; } David ECT Power User :)
QKOnline Advanced Member USA 229 Posts	Posted - 02/03/2016 : 21:45:24 Awesome! Thank you SO much. Been scratching on that one for hours. Not much of a css guru. Don F. www.quilt-kits-online.com ECT PHP 6.2.6
dbdave ECT Moderator USA 10277 Posts	Posted - 02/04/2016 : 00:10:46 Glad I could help. David ECT Power User :)
Andy ECT Moderator 95440 Posts	Posted - 12/14/2016 : 05:41:49 Here's an alternative to using a masonry layout, particularly useful when you have product images of different sizes or extra content for some products. The typical layout requires setting a height value on the div.product class so the following css sample div.product { width: 29%; height: 450px; border: 1px solid #ccc; margin: 5px; padding:6px; float:left; } would give you a layout like this The problem there is the extra white space on adjacent products divs. An alternative would be to use the following css div.products{clear:left;} div.product { width: 29%; min-height: 250px; border: 1px solid #ccc; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; padding:6px; } which would remove that white space and adjust to the content.... You may need to adjust the min-height / _height settings (they need to be equal) as well as the padding and margins. Andy Please feel free to review / rate our software
	« Topic »