javascript - How To Get Masonry and ImagesLoaded To Work With Wordpress -


some 4 hours after 20 minutes expected take set masonry new wordpress themes i've decided i'd better ask help.

i have masonry working fine imagesloaded in html mockup sites, here stripped down html code.

<!doctype html> <html> <head> <meta charset="utf-8"> <script src="imagesloaded.pkgd.min.js"></script> <script src="masonry.pkgd.min.js"></script> </head>  <body>  <div class="masonry-container js-masonry"  data-masonry-options='{ "isfitwidth": true }'>      <div class="block-wrapper">content</div>      <div class="block-wrapper">content</div>      <div class="block-wrapper">content</div>  </div><!-- end masonry-container js-masonry -->  <script> var container = document.queryselector('.masonry-container'); var msnry; // initialize masonry after images have loaded imagesloaded( container, function() {     msnry = new masonry( container ); }); </script>  </body> </html>

the question:

how work wordpress?

what i've tried far

just come on googs. (i counted more 40 tabs open trying find answer) here's simple variation started with..

in functions.php (functions has absolutely nothing else in it)

function enqueue_masonry() {     wp_enqueue_script('masonry'); } add_action('wp_enqueue_scripts','enqueue_masonry');

in footer.php (imagesloaded)

<script> var container = document.queryselector('.masonry-container'); var msnry; // initialize masonry after images have loaded imagesloaded( container, function() { msnry = new masonry( container ); }); </script>  </body>

in index.php (also tried initializing functions.php instead of in html)

<div class="masonry-container js-masonry"  data-masonry-options='{ "isfitwidth": true }'>

in header.php

<?php wp_head(); ?>  </head>

notes

  • all plugins disabled
  • its custom, parent theme
  • functions empty save what's written above
  • wordpress version 4.2.2, masonry confirmed in js folder
  • i've read imagesloaded built wordpress's masonry

my guess

it's obvious

the answer

the embarrassingly simple answer own question forgot include <?php wp_footer(); ?> in footer.php file.

the next day however, discovered imagesloaded wasn't being initiated footer 1 expect answer has since been re-edited show how got imagesloaded work properly.

i should note masonry initiating html in-page options method files don't show way initiate imagesloaded same in-page method.

backstory (some info of possible use others)

the next day, after adding in test posts thumbnails test blog found imagesloaded wasn't initializing , blocks overlapping each other.

i discovered attempting initialize masonry javascript footer.php not working @ either.

after hour or 2 trying figure out why neither script initialize either footer.php or header.php gave , went this suggestion

..why not add .js file , enqueue loading dependency on masonry script? wouldn't have add jquery code manually header/footer via hooks.

then found again question , answer how can make masonry , imagesloaded work correct. (wordpress) explanation how this.

so 2 folks edit on again , show how got wordpress working masonry , it's now-built-in imagesloaded.

one method on how add masonry wordpress theme

goals

  1. to have masonry installed on wordpress theme make behave pinterest.
  2. to have page centered.
  3. to prevent stacking on top of / overlapping of each block element.

some stuff know

  • current wordpress versions (3.9? 4.2.2+) come packaged masonry.
  • location - wp-includes/js/masonry.min.js
  • this wordpress version of masonry includes imagesloaded built-in.
  • masonry no longer requires jquery, though way find initialize in wordpress requires little bit of it.

installation , setup

in functions.php

// use scripts wordpress must first enqueued function enqueue_scripts() {     wp_enqueue_script('masonry');     wp_enqueue_script('masonryloader', get_stylesheet_directory_uri() . '/js/tas-masonryinitializer.js', array( 'masonry', 'jquery' ) ); } add_action('wp_enqueue_scripts','enqueue_scripts');

notes

  • because wordpress may use other scripts , plugins install may rely on others 'enqueueing scripts' how wordpress manages them not conflict each other. i'd go more detail i'm not qualified so.
  • you may see on other websites examples show have first register masonry. not included wordpress , registered.
  • the 2 script enqueing here first masonry , second our little script masonry initialize.
  • jquery being uhh, enqueued dependency little initializer script work.

in themes folder (eg /wp-content/themes/yourthemename/)

  1. create folder named 'js'

  2. inside folder create file named tas-masonryinitializer.js

    • it should /wp-content/themes/yourthemename/js/tas-masonryinitializer.js

  3. copy , paste javascript file..

    (function( $ ) { "use strict"; $(function() {     // set container masonry inside of in var     // adjust match own wrapper/container class/id name     var container = document.queryselector('.masonry-container');     //create empty var msnry     var msnry;     // initialize masonry after images have loaded     imagesloaded( container, function() {         msnry = new masonry( container, {             // adjust match own block wrapper/container class/id name             itemselector: '.block-wrapper',             // option allows website center in page             isfitwidth: true         });     }); }); }(jquery));

notes

  • this step initialize both masonry , imagesloaded , adjust options masonry
  • as stated earlier, imagesloaded built wordpress version of masonry no need enqueue separately in functions.php have on straight html site.
  • to measure height of each image , it's containing block imagesloaded used prevent masonry loading before these heights determined. pause/order allows masonry calculate height of each block. important if using height: auto; on images, many responsive designs do.
  • assuming page width responsive , set 100%/not fixed, masonry needs determine how wide 100% in able center site on page. option "isfitwidth": true how done. read more here.
  • you can assign column width letting masonry choose first block's width , applying column width or can state explicitly column width in options per this page.
  • .masonry-container class of container wraps around blocks want behave masonry behaves
  • it can id if, prefer, #masonry-container
  • it can name, sure adjust in above function
  • the above code taken how can make masonry , imagesloaded work correct. (wordpress) masonry's own instructions

in index.php (or other template files depending on site want masonry used)

<div class="masonry-container js-masonry">      <div class="block-wrapper">content</div>      <div class="block-wrapper">content</div>      <div class="block-wrapper">content</div>  </div><!-- end masonry-container js-masonry -->

notes

  • the class "masonry-container" can either class or id , can name choose, sure adjust in tas-masonryinitializer.js file
  • to recollection, class "js-masonry" required masonry find opening div , cannot renamed without meddling script itself.
  • each div classed "block-wrapper" different block element applying masonry alignment effect to.
  • "block-wrapper", "masonry-container", can name choose , either id or class.

in footer.php

make have included wp_footer() before closing body tag.

<?php wp_footer(); ?>  </body> </html>

notes

  • wp_footer used wordpress enable scripts on page in 1 single action. scripts enqueued in functions.php hooked wp_footer. (excuse terminology, i'm sure misused couple of words there)

in header.php

make sure have..

<?php wp_head(); ?>

right before </head>

and people using masonry mobile friendly site these days, sure include following code (again, between head , /head) make things work on mobile browsers..

<meta name="viewport" content="width=device-width, initial-scale=1">

please let me know of misunderstandings have , errors i've overlooked , i'll try correct them.

mad props david desandro writing hella script. check out website, he's created other wicked cool stuff.


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more