Replace original masonry code in PinBin theme

By Cris, August 23, 2016
Last updated: August 28, 2016
Edit

Since the WP 4.6 update, PinBin’s masonry post arrangement no longer worked on my website.

My solution was to remove the enqueued masonry js file in functions.php and replace with the following:

wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js' );

As described on David DeSandro’s masonry homepage, he outlined the following initialization (among others) method.

In PinBin’s index.html file, place the following towards the end of the file:


script type="text/javascript" 
/* Make sure to add the < > above */
    jQuery(window).load(function() {
             // MASONRY Without jquery
         var container = document.querySelector('#ms-container');
         var msnry = new Masonry( container, {
             itemSelector: '.post',
             columnWidth: '.ms-item',                
         });
    });
    /script 
/* Make sure to add the < > above */

Note that the itemSelector .post was chosen based on the items that we want masonry.js to act on within the original PinBin theme.

I’ve also styled the PinBin masonry code to be perfectly responsive in portrait and landscape mode (using .post and .ms-item as itemSelector and columnWidth respectively) for a wide range of devices.

Feel free to use the following under CC-BY-SA 4.0 licensing.



/* ------ Masonry Mobile styles for PinBin WP Theme ------ */
/* -------------- CC BY-SA 4.0 cristarta.com ------------- */

/* For the following device(s): Nexus 10 L */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
	#ms-container {
		width: 82%;
		margin-left: 11%;
		margin-right: 8%;
	}
	.ms-item {
		width: 8%;
	}
}
/* For the following device(s): iPad L */
@media only screen and (min-width: 801px) and (max-width: 1024px) {
	#ms-container {
		width: 95%;
		margin-left: 5%;
		margin-right: 0%;
		max-width: 973px;
	}
	.ms-item {
		width: 4%;
	}
}
/* For the following device(s): Nexus 10 P */
@media only screen and (min-width: 769px) and (max-width: 800px) {
	#ms-container {
		width: 82%;
		margin-left: 12%;
		margin-right: 6%;
		max-width: 656px;
	}
	.ms-item {
		width: 4%;
	}
}
/* For the following device(s): iPad P */
@media only screen and (min-width: 737px) and (max-width: 768px) {
	#ms-container {
		width: 84%;
		margin-left: 10%;
		margin-right: 6%;
		max-width: 645px;
	}
	.ms-item {
		width: 4%;
	}
}

/* For the following device(s): iPhone 6 Plus L */
@media only screen and (min-width: 733px) and (max-width: 736px) {
	#ms-container {
		width: 88%;
		margin-left: 8%;
		margin-right: 4%;
	}
	.ms-item {
		width: 4%;
	}
}
/* For the following device(s): Nexus 5X/6P L */
@media only screen and (min-width: 668px) and (max-width: 732px) {
	#ms-container {
		width: 96%;
		margin-left: 4%;
		margin-right: 0%;
		max-width: 657px;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): iPhone 6 L */
@media only screen and (min-width: 641px) and (max-width: 667px) {
	#ms-container {
		width: 94%;
		margin-left: 4%;
		margin-right: 2%;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): Nokia N9/ Galaxy S5 L */
@media only screen and (min-width: 569px) and (max-width: 640px) {
	#ms-container {
		width: 98%;
		margin-left: 2%;
		margin-right: 0%;
		max-width:628px;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): iPhone 5 L*/
@media only screen and (min-width: 481px) and (max-width: 568px) {
	#ms-container {
		width: 54%;
		margin-left: 24%;
		margin-right: 22%;
	}
	.ms-item {
		width: 8%;
	}
}
/* For the following device(s): iPhone 4 L*/
@media only screen and (min-width: 415px) and (max-width: 480px) {
	#ms-container {
		width: 64%;
		margin-left: 19%;
		margin-right: 17%;
		max-width: 308px;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): iPhone 6 Plus P */
@media only screen and (min-width: 413px) and (max-width: 414px) {
	#ms-container {
		width: 78%;
		margin-left: 12%;
		margin-right: 10%;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): Nexus 5X / 6P P*/
@media only screen and (min-width: 376px) and (max-width: 412px) {
	#ms-container {
		width: 79%;
		margin-left: 12%;
		margin-right: 9%;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): iPhone 6 P*/
@media only screen and (min-width: 361px) and (max-width: 375px) {
	#ms-container {
		width: 84%;
		margin-left: 9%;
		margin-right: 7%;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): Nokia N9/ Galaxy S5 P*/
@media only screen and (min-width: 321px) and (max-width: 360px) {
	#ms-container {
		width: 87%;
		margin-left: 7%;
		margin-right: 6%;
	}
	.ms-item {
		width: 5%;
	}
}
/* For the following device(s): iPhone5/ iPhone 4 P */
@media only screen and (max-width: 320px) {
	#ms-container {
		width: 97%;
		margin-left: 1.5%;
		margin-right: 1.5%;
	}
	.ms-item {
		width: 5%;
	}
}

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.