Search Results for 'Masonry'

[Anonymous]

Hi Trevor,

thanks to your excellent guidance and explanations.

The results.php is working now as intended.
check out: https://www.kleinkunst.theater/

Pls note that I have translated some words into german.
(not yet internationalised code, but will add that as well)

<?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() )
{
	?>
	
	<?php echo $query->found_posts; ?> Beitr&auml;ge gefunden<br />
	Seite <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( '&Auml;ltere Beitr&auml;ge', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Neuere Beitr&auml;ge' ); ?></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="row row-masonry">
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
	<article <?php post_class('post-masonry col-sm-' . $grid_col); ?>>
	    <div class="post-inner">
	        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	            <?php echo at_post_thumbnail($post->ID, 'at_thumbnail', $args); ?>
	        </a>
	
	        <h2>
	            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	                <?php the_title(); ?>
	            </a>
	        </h2>
	
	        <p><?php echo the_excerpt(); ?></p>
	
	        <div class="clearfix"></div>
	    </div>
	</article>
		
		<?php
	}
	?>
	</div>
	Seite <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( '&Auml;ltere Beitr&auml;ge', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Neuere Beitr&auml;ge' ); ?></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";
}
?>

[Anonymous]

Hey Ross, just had chance to test a little more, basically I’ve now re-added masonry and set it to go to “Results Container” and it actually works fine on Firefox and Internet Explorer.

But it doesn’t work on Chrome (tested on different machines too just in case) or on Safari (tested on mobile, where it just stays at the bottom of the results) – they just won’t play ball. It’s as though they just can’t see the container, but it’s there, and there’s no code/tag snags that could confuse it, and it’s a unique identifier, you can see if you view source. I also added a completely separate dummy container, and set it to go to “Custom Selector:” but sadly it made no difference.

Any ideas? As mentioned I don’t want to place that other code you suggested, as I want this to work on another set of results without masonry so need it for that anyway. Many thanks 🙂

[Anonymous]

Hey Ross,

I know, so strange! So I’ve changed it to custom and set it to go to #focus-results but still not working.

No, I haven’t tried your other suggestion yet, only because I want this to work for another search form on a people search where there will be no masonry so would like to try and get this one sorted first if that’s ok, then you never know it may just work again on masonry too, but if not I will try what you have said for sure :).

[Anonymous]

Hi Ross,

Ahaa! I just removed masonry and it’s still not working – so a good question raised thank you.

You can re-check that page now and see what I mean. Do you know why that’s not working?

Many thanks,
TJ

[Ross]

Hey TJ

I think its a matter of ordering of events – S&F probably does scroll but the masonry call is messing this up somehow (perhaps the masonry script uses scrollTop somewhere and this clashes with S&F).

I would try to manually add the scrolling back in after the masonry call – so taking some scrolling code from S&F (with modification):

var scrollToPos = function()
{
	var offset = 0;
	var canScroll = true;
	

	if(jQuery("#focus-results").length>0)
	{
		offset = jQuery("#focus-results").offset().top;
	}

	
	$("html, body").animate({
		  scrollTop: offset
	}, "normal", "easeOutQuad" );
	
	
	
};

Then after masonry you could do scrollToPos();

You might even need to add a delay for masonry to complete so:

setTimeout(function(){ scrollToPos(); }, 100);

Just to confirm, if you do not use that masonry script scrolling works fine?

Let me know how you get on.

Thanks

[Anonymous]

The file template is “archive.php”

and this is the code on it:

<?php
/**
* Archive pages.
*
* @package vogue
* @since 1.0.0
*/

// File Security Check
if ( ! defined( ‘ABSPATH’ ) ) { exit; }

$config = presscore_get_config();
$config->set( ‘template’, ‘archive’ );
$config->set( ‘layout’, ‘masonry’ );
$config->set( ‘template.layout.type’, ‘masonry’ );

get_header(); ?>

<!– Content –>
<div id=”content” class=”content” role=”main”>

<?php
if ( have_posts() ) :

do_action( ‘presscore_before_loop’ );

// backup config
$config_backup = $config->get();

// masonry container open
echo ‘<div ‘ . presscore_masonry_container_class( array( ‘wf-container’ ) ) . presscore_masonry_container_data_atts() . ‘>’;

while ( have_posts() ) : the_post();

presscore_archive_post_content();
$config->reset( $config_backup );

endwhile;

// masonry container close
echo ‘</div>’;

dt_paginator();

do_action( ‘presscore_after_loop’ );

else :

get_template_part( ‘no-results’, ‘search’ );

endif;
?>

</div><!– #content –>

<?php do_action(‘presscore_after_content’); ?>

<?php get_footer(); ?>

[Anonymous]

Hi, my site has a masonry layout which I’d like to make compatible with the ajax feature. Are there any callback functions where I could fire the masonry engine so it updates the layout after loading results? Thanks.

[Ross]

Hi Stephanie

The reason you are having layout / masonry issues is because you are using ajax.

If you disable ajax, I’m assuming the rest works well?

When using JS to control layouts with Ajax, the issue is that all the scripts that would normally get triggered on a regular page load don’t occur when an ajax request is performed.

If you take a look at this JS event (first question):
http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

You’ll notice there is an event for detecting when ajax content has loaded.

You must use this event to reload any scripts like your masonry script.

Thanks

[Anonymous]

Likewise the masonry script doesn’t load.
I’m not sure how to fix this with the provided instructions.

[Ross]

Hi Stephanie

Ok I see what is going on.

When you load the page, Avada runs some JS, that basically lays out the page in this Masonry style.

So, when you don’t have Ajax, a page loads, runs Avada layout JS – however, with ajax, Avada JS is not run every time – because you are not reloading the page.

Please see the first question in the FAQs – http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/ – there are events to use which tell you when S&F has loaded the results via JS, and it is here you would add the Avada layout code.

If you want to modify the page title, it is possible but not a feature of S&F directly just yet.

Please see this post with some more information: https://support.searchandfilter.com/forums/topic/custom-page-titles-meta-descriptions/

What you want to do is use the WP filter for page titles, and modify it using the the Active Query class found here: http://www.designsandcode.com/documentation/search-filter-pro/accessing-search-data/

Thanks