Controlling the order of gallery in-line content

[Robert Campbell]

I have created a masonry style post layout which uses Easy FancyBox Pro to create a slideshow from a ‘gallery’ of posts.

All the posts from which the content is derived have the same rel=”gallery-1″

Because I am using Easy FancyBox within the loop, I am using the expression href=”#resource-[wpv-post-id]” to derive the unique identifier of each post. [wpv-post-id] is a shortcode for the post id (I am using the Toolset suite of plug-ins).

This works pretty well and you can see the result at http://audio-gear-dev.org/upload/tweetmyguitarnew/

I have one issue which I need help with.

I want the slideshow to run in the same order as the post-ids, so this means that the most recent post will be followed by the next most recent, and so on.

This is not happening!

If you go to the test url above and hover on the image ‘ten’, then the image ‘nine’, you will see that the post-ids are in descending order (which is correct).

But if you now click on ‘ten’ and click the right hand arrow, then the next in-line content which appears is ‘six’ when it should be ‘nine’.

I know this is happening because the masonry style of layout is constructed in four columns, but I need to find a way to get the slideshow to display in row order (the same order as the post ids).

Your help would be appreciated to solve this little issue.

Regards

Robert

[RavanH]

Hi Robert, I see the issue and it can be explained like this:

FancyBox will base its gallery order on the order in which the links appear in the source, not on how they appear to the end user. If you look at the page source by opening the page in your browser and hitting Ctrl+U (in most cases) and you search with Ctrl+F for “resource-” you’ll find the blocks of html that are responsible for both the links and the popup content (hidden divs). You’ll notice the first one you find is number “ten”, then comes “six” then”two” then “nine” then “five” and so on…

Notice how this corresponds with the FancyBox order on one hand while on the other hand with the visual order top to bottom (first COL1 then COL2 etc.)

There are two problems with this:
1. There is no way to tell the plugin that you want a different order.
2. Screen readers (for the visually impaired) and search engines will also only see the html source order, not the visually rendered order.

So the best way to fix this is to change the source order to the actual post order and to change the method of rendering these items on the screen.

Are you able to change the loop that actually creates these html blocks? If so, you might want to make it use “orderby=date” (or id) and “order=desc”.

Next step will be to make the browser render the items (1) in the correct order and (2) in a nice way, like they are now. The first is easy: just get rid of the table and row/column tags. But the second is more difficult…

You might try a CSS only approach with the CSS3 rule flexbox, or you might want to use masonry.js like the Illustratr theme does for example.

Let me know if you need help with that 🙂

[Robert Campbell]

Hi Ravan

Thanks for the explanations which I understand.

I used the column based approach because I didn’t know any other way to get the masonry type layout which is important for my application. Previously I tried using the Cactus Masonry plugin but you cannot control the image and text blocks separately which is what I need to do.

It is easy for me to make the browser render the items in the correct order but I’m going to struggle to retain the type of visual layout I need.

The shortcode based Toolset I use https://wp-types.com/ is great a manipulating custom posts but not so good at the more unusual screen layouts.

Any help you can give would be appreciated.

Kind regards

Robert

[RavanH]

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 🙂

[Author]

Posts