Search Results for 'masonry'

[Trevor]

Hi John

The element that you have used is from Massive addons, and not from Visual Composer. The copy of VC that you have is from Qode, yes? It seems that many elements, such as the two highlighted in the screenshot, have been disabled. So, I went to the role manager and change the elements setting from ALL to Custom, and then enabled them all (you can see the correct grid elements in the list)! Which should have no effect, right? NO. All the Qode ones disappear, but still no standard grid elements.

So, in WP admin, I went to Qode Options -> Visual Composer, and enabled grid elements. Note that Ajax Page transitions will now be auto-disabled.

I have added the grid element to the page now. As to which one you want to use, that is up to you. Most people use the Masonry one, so I added that. Along with the form element. I left the elements you had in also.

[Trevor]

Hi Mark

The first thing then is to ask if you followed the basic customizing starter guide:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

Then you have to edit this to add/edit HTML elements and use CSS classes and ID’s to match your theme. I can sort of help (within limits), but I can’t do grids that use Masonry, as they are often very particular to the theme.

[Trevor]

The masonry script is not applying itself to the posts. And thus each post has a left position of 0. I do not know how your theme applies the script, and look as I try, I cannot see it.

We may have to go about this an entirely different way. Are you able to make an equivalent of the blog page using visual composer and the Post Masonry Grid element (you may have to design a custom layout for it)?

[Trevor]

I have a good long look. I edited the form a bit, enabling the counts and disabling the Relevanssi settings (you can only use these if you have Relevanssi plugin installed).

As you have the form open right now, I cannot reset these to how you had them.

Does this issue show for any sort order (I see you had it set to menu order)?

Does it happen without the search&filter form on the page and with S&F deactivated?

Are you able to make a similar page using VC Masonry Post grid element, as we do have a (free) filter addon for VC.

[Trevor]

I have written a new results.php for you:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<div class="col-9 hb-equal-col-height hb-main-content">
		<div id="hb-blog-posts" class="hb-blog-grid masonry-holder clearfix" data-layout-mode="fitRows" data-categories="" data-column-size="col-4">
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
   <article id="post-<?php echo get_the_ID();?>" class="col-4 post-<?php echo get_the_ID();?> post type-post status-publish format-standard has-post-thumbnail hentry" itemscope="" itemtype="http://schema.org/BlogPosting">
				<div class="featured-image">
					<a href="<?php the_permalink(); ?>">
			<?php 
				if ( has_post_thumbnail() ) {
					the_post_thumbnail("small");
					?>
        <div class="featured-overlay"></div>
        <div class="item-overlay-text" style="opacity: 0;">
          <div class="item-overlay-text-wrap" style="padding-top: 0px;"> <span class="plus-sign"></span> </div>
        </div>
   <?php
				}
			?>
					</a>
				</div>
				<div class="post-content">
					<div class="post-header">
   			<h2 class="title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					</div>
 			 <p><?php echo get_the_excerpt(); ?>
	 			<br /><a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
		 		</p>
				</div>
  	</article>
		
		<?php
	}
	?>
		</div>
 </div>
 Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

[Trevor]

What would be the best way to achieve Masonry using the Shortcode method?

That I do not know 🙁

I know Avada has its own builder, Visual Composer is a third party plugin that many themes include. It has a masonry grid build and we CAN get that working with S&F.

[Anonymous]

Only because there’s enough resources on this support forum! 😀

What do you mean by “Visual Composer grid”? Do you mean within the Fusion Builder?

I did try it with the Archive or Search.php, as far as I remember, it did show the initial results when the page loaded, then it also showed results when I filter the search for the first time. But after redirecting to the results page, Ajax/Masonry stopped working, as I believe that is the main issue others are having.

But if I have choice, I’d rather get it working using Shortcode, only because I feel like I have much better control of everything else around the results.

What would be the best way to achieve Masonry using the Shortcode method?

Thanks!

[Trevor]

Gosh, you leaped through those hoops rather fast 🙂

Generally, with Avada, it is best to use either a Visual Composer grid or our shortcode method.

However, I am getting ahead of myself. Did you try the As an Archive method and did it work?

Getting masonry to work after using our Ajax refresh is always the hard part, and not something I have personally managed with Avada (but others may well have).

[Anonymous]

Hi Trevor, I’ve just worked around the whole default selection issue. Got it all working now.

Now I just need some assistance in making my search results to show in Masonry.

Using Avada, is it better to display the Masonry results as an Archive Page or Shortcodes?

[Trevor]

Hi Greg.

It is a question of figuring out how to re-trigger Masonry. What I do not know is how to do this in Divi, but someone at Divi or on their forums will. It is a question asked quite a few times. The basic javascript required is this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
  });
}(jQuery));

But I do not know what goes in to replace that one line.