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 [code]<?php include "vsadmin/inc/incproducts.php" ?>[/code]

Added:

[code]<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>[/code]

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)

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.

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

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:

(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:

The part of the script in red has to be below the line
and above the line 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

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

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

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

Hello, add this to your .css file
div.categories {
clear:both;
}

David
ECT Power User :)

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

Glad I could help.

David
ECT Power User :)

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