Reply To: Controlling the order of gallery in-line content

Your Account / Forums / Easy FancyBox Pro / Controlling the order of gallery in-line content / Reply To: Controlling the order of gallery in-line content

January 28, 2016 at 11:43 pm #6047

Thinking about it more, the flexbox method might not work in your case because it might make it look good by using flex-direction:column but it will change the visual order to top to bottom, which you don’t want either.

So probably your only good option is to include masonry.js and instruct it to arrange these particular items.

Like I said, the Illustratr theme is a good example. Download the zip and open the file page-templates/portfolio-page.php and you can see the part:


...
				<div class="portfolio-wrapper">

					<?php /* Start the Loop */ ?>
					<?php while ( $project_query -> have_posts() ) : $project_query -> the_post(); ?>

						<?php get_template_part( 'content', 'portfolio' ); ?>

					<?php endwhile; ?>

				</div><!-- .portfolio-wrapper -->
...

which is the part that renders the relatively simple blocks (article tags) that will make up the masonry style portfolio.

Then, in the file inc/jetpack.php you can find at the bottom:


...
	if ( is_post_type_archive( 'jetpack-portfolio' ) || is_tax( 'jetpack-portfolio-type' ) || is_tax( 'jetpack-portfolio-tag' ) || is_page_template( 'page-templates/portfolio-page.php' ) ) {
		wp_enqueue_script( 'illustratr-portfolio', get_template_directory_uri() . '/js/portfolio.js', array( 'jquery', 'masonry' ), '20140325', true );
	}
...

This checks if we’re on a portfolio page and then enqueues /js/portfolio.js and (as dependancies) the jquery.js and masonry.js libraries.

In the file /js/portfolio.js is the jquery that actually does the work. The important part (for your case) is:


...
		var portfolio_wrapper = $( '.portfolio-wrapper, .jetpack-portfolio-shortcode' );

		portfolio_wrapper.imagesLoaded( function() {
			if ( $( 'body' ).hasClass( 'rtl' ) ) {
...
			} else {
				portfolio_wrapper.masonry( {
					columnWidth: 1,
					itemSelector: '.portfolio-entry',
					transitionDuration: 0
				} );
			}

...
		} );
...

where the wrapper div class and item classes are used to identify the items that need to be ordered. Keep columnwidth to 1 and play with transitionduration if you like 🙂