Problem with displaying Filter Results

Anonymous

#215552

Hey, i have a Problem with displaying Filter Results.

I have some Filter on my results page- there is everything okay.

The Problem is, when you chosse one filter, s&f shows the correct posts, but the images doesnt shown.

If you reload the page (browser reload), the images are shown.

what could that be?

best regards

Trevor

#215561

It might be a number of things, but most likely you have one or both of:

Lazyload images (such as in Jetpack; it is an option you can disable)
the grid might be ‘powered’ by Masonry (Isotope), in which case the grid would need to have the Masonry script re-triggered to re-build the grid correctly.

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#215590

This reply has been marked as private.

Trevor

#215593

Looking at the code, there is indeed a Lazyload function for images, and it is a theme function. Do they have a setting to switch it off?

Anonymous

#215601

This reply has been marked as private.

Trevor

#215603

What we do is to support functions such as your theme author has been kind enough to provide. Add this script to your site or the results page:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.products').find('img.lazyimages').each(function(){
      var source = $(this).attr("data-src");
      $(this).attr("src", source).css({'opacity': '1'});
    });
  });
}(jQuery));</script>

See how that works for you? If you want to add it only to the page, you can add it in a text block or widget (if the widget has tabs for text entry mode, always choose Text or Plain Text).

Anonymous

#215606

Now it works fine, many Thanks.

Another Question:

I have create a filter results page with elemantor. I think it is a good and pretty solution to display the results.

But is it possible to create a pretty filter panel, too? Maybe with elemantor?

Or have you another tipp, how i can create a pretty filter panel (desktop and mobile)?

Trevor

#215631

Our form (filter panel) is relatively unstyled, so that you can apply custom CSS to it to style it as you want.

[Author]

Posts