Search Results for 'masonry'

[Trevor]

I have spent some time looking at the Avada code (and searching the Internet) but cannot find a solution to the Masonry issue. It appears most users here have instead used Visual Composer to create the grid in Avada, and Search & Filter has a beta extension for that.

[Trevor]

I have fixed the results container (changed it from #main to .avada-container). But the Masonry needs to be re-triggered, as this user has done in X theme:

https://support.searchandfilter.com/forums/topic/x-theme-masonry-problem/#post-103030

I don’t have time right now (it being a holiday weekend as you know), but I will find some time to see if the code posted by that user can be re-worked for you.

[Anonymous]

I found this thread: https://theme.co/apex/forums/topic/ajax-plugin-load-issues-with-themex/
Reading it makes me think they’re not very cooperative/helpful when it comes to “third party” plugins. 🙁

However I found out that masonry view in X theme makes use of an older version of Isotope: http://isotope.metafizzy.co/

This is how Isotope is called in index:

<?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

And it is handled by _script-isotope-index.php:

<?php

// =============================================================================
// VIEWS/GLOBAL/_SCRIPT-ISOTOPE-INDEX.PHP
// -----------------------------------------------------------------------------
// Isotope script call for index output.
// =============================================================================

$is_rtl = is_rtl();

?>

<script>

  jQuery(document).ready(function($) {

    <?php if ( $is_rtl ) : ?>

      $.Isotope.prototype._positionAbs = function( x, y ) {
        return { right: x, top: y };
      };

    <?php endif; ?>

    var $container = $('#x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.x-iso-container > .hentry',
        resizable      : true,
        filter         : '*',
        <?php if ( $is_rtl ) : ?>
          transformsEnabled : false,
        <?php endif; ?>
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

</script>

[Anonymous]

No, it was standard blog view, I changed it to masonry today.

However I can’t seem to figure this out, I’m trying to use the code you provided in every possible way I can think of, but I always get JS error, like “is not a function” etc.

Is there any way you could look take a look at it?

[Trevor]

The previous solution did not use Masonry?

If not, then you need to add some extra javascript to the page to re-trigger the masonry, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

X Theme may be able to answer that. It might be something like:

jQuery('.x-main').Masonry(); or jQuery('.x-main').masonryReset();, or ….

[Trevor]

Hi Will

Grid layouts come from two sources; the theme (its own built in grid builder) or a plugin (like Visual Composer). They come in two varieties; flexible grids, such as made by masonry and salvattore, and inflexible ones.

Depending on the theme you are using, and if you have Visual Composer, my solution would be different. So, what theme is it, and do you have Visual Composer? Do you have a sample grid page in your theme that you can give me a URL for?

[Trevor]

Did the page builder come with the theme (is the theme ‘Mega’?), or is it a separate plugin from a third party author? Mega seems to have its own page builder included.

Do you place content on the page using widgets, and in those can you place shortcodes?

Are you able to place a widget with a shortcode directly above the portfolio grid, and if so, can you try this shortcode?

[searchandfilter id="1459" action="filter_next_query"]

Your grid might be using the masonry script as well, so it may be necessary to re-trigger the masonry script as well, using code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

However, you would the help of your theme author to provide the code for that one line. It varies from theme to theme.

However, in your case I think reloaditems is the way to go, as shown on this page:

http://masonry.desandro.com/methods.html#reloaditems

So the line of script would be this:

$grid.masonry('reloadItems');

But, you need to define $grid, like this maybe:

jQuery('portfolio-container-style-1').masonry('reloadItems');

So you script might be (and I say MIGHT):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').masonry('reloadItems');
  });
}(jQuery));
</script>

However, it is also possible it uses the Isotope relayout function:

http://isotope.metafizzy.co/v1/demos/relayout.html

Like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').isotope('relayout');
  });
}(jQuery));
</script>

[Trevor]

Hi Tyler

Great to speak with you. As we found, you somehow need to find the code to use to re-trigger masonry on the grid. I will wait to hear back from you.

[Trevor]

Hi Alessandro

In the past, before v2.3.0 to get S&F Pro to work with Divi, you had to use the Shortcode Display Results method to work well, and this meant the results template had to be manually edited to meet the theme needs.

However, we have a (as yet undocumented) new shortcode that should be placed just above (before) the grid section that delivers the archive. That new shortcode will link the S&F form to the archive loop query. If you are using the masonry-like grid that Divi has (it actually uses Salvattore – a jQuery Masonry alternative), I am working on the code to get that working also.

The shortcode looks like this (change 1234 for the ID number of your form):

[searchandfilter id='1234' action='filter_next_query']

and set the display method to Custom

I am working on this with another user on this thread:

https://support.searchandfilter.com/forums/topic/how-do-i-stop-sf-generating-its-own-posts/

Some of the posts are marked private, but are talking only about matters not relevant to the general topic of Divi and S&F, so you can ignore them.

[Anonymous]

Thanks Trevor! Yes, I’m using the Post Masonry but can’t seem to make it work.

http://conveners.org/facilitation-encyclopedia/

Please help.

Thanks,

Susana