Search Results for 'Masonry'

[Trevor]

Hey David

We are taking a look to see how easy it would be to implement a solution for Visual Composer.

On the source for the builder, you would select Custom Query and then we need to work out if we can then enter something in the query box to get it to work.

I personally have never managed to get masonry or isotope working. However, I have helped others do that. Some posts that might hint at it:

https://support.searchandfilter.com/forums/topic/trying-to-implement-with-animations-and-masonry/
https://support.searchandfilter.com/forums/topic/trying-to-edit-results-php-to-show-results-in-grid/

[Anonymous]

Thanks Trevor, yes I’m using the grid builder and I thought that would be the case.

Can I ask how you’d begin implementing Masonry with Search&Filter results? As I was using the shortcode I’m not sure how to begin targeting each post result with CSS.

Many thanks

[Trevor]

Hi Danny

Do you mean themes? Or maybe plugins?

Our plugin filters content delivered on to the page by what WordPress call the loop. Grid builders, carousels, sliders, portfolios, content builders and more are really just loop builders.

Often, themes have their own, and it is those that we are focused on. So, you choice of theme is often the key. The standard loop simply has one post following the next vertically. This is easy to implement and integrate with S&F Pro.

Some do ‘grids’. Here it becomes more complicated. Some grid builders are responsive out of the box without resorting to javascript libraries to position and size the elements. By this latter I mean they uses scripts like masonry and isotope. They are quite difficult to get working (but it can be done) with S&F.

Some grid builders use frameworks that handle the responsiveness for you. The Bootstrap 3 (and 4) frameworks do this. So, any theme that is Bootstrap based should be easier to do this with. The one I use is, and it has a loop builder that uses Visual Composer to build the content layout. Best of both worlds.

[Trevor]

Hiya

You needed Auto Count ON and Maintain Search Form State OFF

Did you follow the shortcode instructions in the documentation for customizing?

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

Then you have to edit/modify the code in that results.php file

To do this you need to be able to examine another page in your theme that has two columns, as long as it does not use Masonry or Isotope scripts, because they make it very hard to copy.

[Trevor]

Hi Lisa

I am guessing you are located somewhere in the USA and it must be about 4AM there right now?

Using the shortcode (I think the best choice for your theme) it uses our results.php template (from the plugin’s template folder. You can make a copy of that in your theme and then customize it, see here:

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

I am quite used to making theme-specific versions for users, if they can provide me with a ‘normal’ archives type page in their theme or site that I can use as a reference. Providing that the reference page does not use Isotope or Masonry, which makes it much harder for me to do.

If you are a competent coder, I can show you how using Skype.

[Trevor]

Can you first try this without Ajax enabled? If it works OK without Ajax, then are you, or is your theme, using a javascript post grid, like masonry or isotope?

[Trevor]

Does the results page use isotope or masonry to arrange a grid? If so, it must be re-triggered perhaps? I did not fully understand some of what you wrote 🙁

[Trevor]

Using the shortcode method, you can personalize the results.php template, as detailed in the documentation:

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

The structure of the template is fairly simple. You can move blocks up or down, change what is being called (for example add a link to the post to the thumbnail), you can add HTML and css classes.

I have done many of these customized results.php templates for other users and posted them on the forum. The key is to do it one bit at a time, try to use an existing page from the template as a guide, and avoid complications, such as masonry or istotope.

If you say that the archives method is a problem, then use the shortocde one. It is the only method I ever use.

[Trevor]

Hi Nicholas

The problem with that is it uses masonry, and is not easy to replicate. anything that uses masonry or isotype is going to be hard to replicate. Is there an option for it not to have these scripts working on it?

[Anonymous]

Hello. I am using soledad theme. I am using shortcode method to display the result. My theme has a search.php for search results template. The results for me has almost the most basic style. I want to select other layouts from the theme for displaying them. Can you help me edit this code to achieve that goal? I paste the codes here:

<?php
/**
 * The template for displaying search results pages.
 *
 * @package WordPress
 * @since 1.0
 */
get_header();

/* Sidebar position */
$sidebar_position = 'right-sidebar';
if( get_theme_mod( "penci_left_sidebar_archive" ) ) { $sidebar_position = 'left-sidebar'; }

/* Search layout */
$layout_this = get_theme_mod( 'penci_archive_layout' );
if ( ! isset( $layout_this ) || empty( $layout_this ) ): $layout_this = 'standard'; endif;
$class_layout = '';
if( $layout_this == 'classic' ): $class_layout = ' classic-layout'; endif;
?>
		<?php if( ! get_theme_mod( 'penci_disable_breadcrumb' ) ): ?>
		<div class="container penci-breadcrumb">
			<span><a class="crumb" href="<?php echo esc_url( home_url('/') ); ?>"><?php esc_html_e( 'Home', 'soledad' ); ?></a></span><i class="fa fa-angle-right"></i>
			<span><?php esc_html_e( 'Search', 'soledad' ); ?></span>
		</div>
		<?php endif; ?>

		<div class="container<?php echo esc_attr( $class_layout ); if ( get_theme_mod( 'penci_sidebar_archive' ) ) : ?> penci_sidebar <?php echo esc_attr( $sidebar_position ); ?><?php endif; ?>">
			<div id="main" class="penci-layout-<?php echo esc_attr( $layout_this ); ?><?php if ( get_theme_mod( 'penci_sidebar_sticky' ) ): ?> penci-main-sticky-sidebar<?php endif; ?>">
				<div class="theiaStickySidebar">
					<div class="archive-box">
						<div class="title-bar">
							<span><?php esc_html_e( 'Search results for', 'soledad' ); ?></span>
							<h1><?php printf( esc_html__( '"%s"', 'soledad' ), get_search_query() ); ?></h1>
						</div>
					</div>

					<?php if ( have_posts() ) : ?>
						<?php if( in_array( $layout_this, array( 'mixed', 'mixed-2', 'overlay-grid', 'overlay-list', 'photography', 'grid', 'grid-2', 'list', 'boxed-1', 'boxed-2', 'boxed-3', 'standard-grid', 'standard-grid-2', 'standard-list', 'standard-boxed-1', 'classic-grid', 'classic-grid-2', 'classic-list', 'classic-boxed-1', 'magazine-1', 'magazine-2' ) ) ) : ?><ul class="penci-grid"><?php endif; ?>
						<?php if( in_array( $layout_this, array( 'masonry', 'masonry-2' ) ) ) : ?><div class="penci-wrap-masonry"><div class="masonry penci-masonry"><?php endif; ?>

						<?php /* The loop */
						while ( have_posts() ) : the_post();
							include( locate_template( 'content-' . $layout_this . '.php' ) );
						endwhile;
						?>

						<?php if( in_array( $layout_this, array( 'masonry', 'masonry-2' ) ) ) : ?></div></div><?php endif; ?>
						<?php if( in_array( $layout_this, array( 'mixed', 'mixed-2', 'overlay-grid', 'overlay-list', 'photography', 'grid', 'grid-2', 'list', 'boxed-1', 'boxed-2', 'boxed-3', 'standard-grid', 'standard-grid-2', 'standard-list', 'standard-boxed-1', 'classic-grid', 'classic-grid-2', 'classic-list', 'classic-boxed-1', 'magazine-1', 'magazine-2' ) ) ) : ?></ul><?php endif; ?>

						<?php penci_soledad_pagination(); ?>

					<?php else : ?>
						<div class="nothing">
							<span><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'soledad' ); ?></span>
						</div>
					<?php endif; wp_reset_postdata(); ?>
				</div>
			</div>

	<?php if ( get_theme_mod( 'penci_sidebar_archive' ) ) : ?>
		<?php get_sidebar(); ?>
	<?php endif; ?>

<?php get_footer(); ?>