Search Results for 'Masonry'

[Trevor]

That sounds like a problem with either lazyload or Masonry (Isotope).

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

[Trevor]

Avada has changed much since that thread you posted in and the solution there may no longer work. For a grid layout using Masonry, you need to follow these instructions:

https://searchandfilter.com/documentation/3rd-party/post-grid/

[Anonymous]

@trevorsf split this post from https://support.searchandfilter.com/forums/topic/results-displayed-in-grid-format-for-avada-2/

Wondering how you implemented this:

actually ended up using the short code method and the Custom Post Types for Fusion Builder plugin. I was able to utilize the built in grid, masonry and carousel functions true to Avada along with the Infinite Scroll and Load More functions from Avada. Unfortunately, using the S&F Pro Ajax was still a no go when performing a new search, but I can live without it at this point.

Custom Post Types for Fusion Builder:
https://codecanyon.net/item/custom-post-types-and-taxonomies-for-fusion-builder/15572585

How I utilized it with Search and Filter Pro:
https://whsnew.pairsite.com/physicians-finder/
https://whsnew.pairsite.com/locations-practices/

I’m using the same Theme and method, just need to get the search on the archive page and updating the search. Where did you place the code for the search on the results page? Thanks.

[Trevor]

I think I can see an error in the form setup. The Ajax Container looks wrong. At present it is not setup for Post Grid correctly, it should be:

#post-grid-3384

Using your theme’s own masonry grid requires that you know how to re-trigger that Masonry when an Ajax search is done (as each theme codes it differently, we cannot make any generic code to do that). We do have a code snippet to prepare to trigger that Masonry code, but it is missing that critical code.

[Trevor]

This is how I would change it:

<?php
/**
 * Portfolio Template.
 *
 * @package Fusion-Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
if ( ! class_exists( 'Avada' ) ) {
	exit( 'This feature requires the Avada theme.' );
}
?>
<?php
global $wp_query, $fusion_library;

// Get main settings and mofify as needed.
$portfolio_layout_setting      = Avada()->settings->get( 'portfolio_archive_layout' );
$portfolio_one_column_text_pos = Avada()->settings->get( 'portfolio_archive_one_column_text_position' );
$portfolio_text_layout         = Avada()->settings->get( 'portfolio_archive_text_layout' );
$portfolio_content_length      = Avada()->settings->get( 'portfolio_archive_content_length' );
$portfolio_text_alignment      = Avada()->settings->get( 'portfolio_archive_text_alignment' );
$portfolio_columns_int         = Avada()->settings->get( 'portfolio_archive_columns' );
$portfolio_column_spacing      = Avada()->settings->get( 'portfolio_archive_column_spacing' );
$portfolio_pagination_type     = Avada()->settings->get( 'portfolio_archive_pagination_type' );
$portfolio_image_size          = Avada()->settings->get( 'portfolio_archive_featured_image_size' );
$portfolio_image_size_set      = $portfolio_image_size;
$lazy_load                     = Avada()->settings->get( 'lazy_load' );

if ( ! $portfolio_text_layout ) {
	$portfolio_text_layout = 'unboxed';
}

switch ( $portfolio_columns_int ) {
	case 1:
		$portfolio_columns = 'one';
		break;
	case 2:
		$portfolio_columns = 'two';
		break;
	case 3:
		$portfolio_columns = 'three';
		break;
	case 4:
		$portfolio_columns = 'four';
		break;
	case 5:
		$portfolio_columns = 'five';
		break;
	case 6:
		$portfolio_columns = 'six';
		break;
}

$portfolio_layout = 'fusion-portfolio-' . $portfolio_columns;

// Set the portfolio main classes.
$portfolio_classes[] = 'fusion-portfolio fusion-portfolio-archive';
$portfolio_classes[] = 'fusion-portfolio-layout-' . $portfolio_layout_setting;
$portfolio_classes[] = $portfolio_layout;

// If one column layout is used, add special class for text/notext and floated.
if ( 'one' === $portfolio_columns ) {
	if ( 'no_text' === $portfolio_text_layout ) {
		$portfolio_classes[] = 'fusion-portfolio-one-nontext';
	} elseif ( 'floated' === $portfolio_one_column_text_pos && 'grid' === $portfolio_layout_setting ) {
		$portfolio_classes[] = 'fusion-portfolio-text-floated';
	}
}

// For text layouts add the class for boxed/unboxed.
if ( 'no_text' !== $portfolio_text_layout ) {
	$portfolio_classes[] = 'fusion-portfolio-' . $portfolio_text_layout;
	$portfolio_classes[] = 'fusion-portfolio-text';
	$portfolio_classes[] = 'fusion-portfolio-text-' . $portfolio_text_alignment;
}

// Add class if rollover is enabled.
if ( $fusion_settings->get( 'image_rollover' ) ) {
	$portfolio_classes[] = 'fusion-portfolio-rollover';
}

// Set the correct image size.
$portfolio_image_size = 'portfolio-' . $portfolio_columns;

// Portfolio-four no longer exists.
if ( 'four' === $portfolio_columns ) {
	$portfolio_image_size = 'portfolio-three';
}

// Portfolio-six no longer exists.
if ( 'six' === $portfolio_columns ) {
	$portfolio_image_size = 'portfolio-five';
}

if ( 'full' === $portfolio_image_size_set || 'masonry' === $portfolio_layout_setting ) {
	$portfolio_image_size = 'full';
}

$post_featured_image_size_dimensions = avada_get_image_size_dimensions( $portfolio_image_size );

// Get the column spacing.
$column_spacing_class = ' fusion-col-spacing';
$column_spacing       = ' style="padding:' . ( (int) ( $portfolio_column_spacing / 2 ) ) . 'px;"';

if ( 'one' === $portfolio_columns && 'grid' === $portfolio_layout_setting ) {
	$column_spacing_class = '';
	$column_spacing       = '';
}

// Check pagination type.
if ( 'load_more_button' === $portfolio_pagination_type ) {
	$portfolio_classes[] = 'fusion-portfolio-paging-load-more-button';
} elseif ( 'infinite_scroll' === $portfolio_pagination_type ) {
	$portfolio_classes[] = 'fusion-portfolio-paging-infinite';
}

if ( Avada()->settings->get( 'portfolio_equal_heights' ) && 'grid' === $portfolio_layout_setting ) {
	$portfolio_classes[] = 'fusion-portfolio-equal-heights';
}

// Get the correct ID of the archive.
$archive_id = get_queried_object_id();

$title      = true; // phpcs:ignore WordPress.WP.GlobalVariablesOverride
$categories = true;

// Get title and category status.
if ( 'no_text' !== $portfolio_text_layout ) {
	$title_display = Avada()->settings->get( 'portfolio_archive_title_display' );
	$title         = ( 'all' === $title_display || 'title' === $title_display ) ? true : false; // phpcs:ignore WordPress.WP.GlobalVariablesOverride
	$categories    = ( 'all' === $title_display || 'cats' === $title_display ) ? true : false;
}
?>

<div class="<?php echo esc_attr( implode( ' ', $portfolio_classes ) ); ?>">

	<?php
	/**
	 * Render category description if it is set.
	 */
	?>
	<?php if ( category_description() ) : ?>
		<div id="post-<?php echo intval( get_the_ID() ); ?>" <?php post_class( 'post' ); ?>>
			<div class="post-content">
				<?php echo category_description(); ?>
			</div>
		</div>
	<?php endif; ?>

	<div class="fusion-portfolio-wrapper" data-picturesize="<?php echo ( 'full' !== $portfolio_image_size ) ? 'fixed' : 'auto'; ?>" data-pages="<?php echo esc_attr( $wp_query->max_num_pages ); ?>">

		<?php if ( 'masonry' === $portfolio_layout_setting ) : ?>
		<article class="fusion-portfolio-post fusion-grid-sizer"></article>
		<?php endif; ?>
<?php/* @trevorsf added code here ... start */
        if ( $query->have_posts() ) :
/* @trevorsf added code here ... end */?>
		<?php while ( have_posts() ) : ?>
			<?php the_post(); ?>

			<?php if ( Avada()->settings->get( 'featured_image_placeholder' ) || has_post_thumbnail() ) : ?>
				<?php
				$element_orientation_class = '';
				$element_base_padding      = 0.8;
				$responsive_images_columns = $portfolio_columns_int;
				$masonry_attributes        = array();

				// Masonry layout, get the element orientation class.
				if ( 'masonry' === $portfolio_layout_setting ) {
					// Set image or placeholder and correct corresponding styling.
					if ( has_post_thumbnail() ) {
						$post_thumbnail_attachment = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
						$masonry_attribute_style   = $lazy_load ? '' : 'background-image:url(' . $post_thumbnail_attachment[0] . ');';

					} else {
						$masonry_attribute_style = 'background-color:#f6f6f6;';
					}

					// Get the correct image orientation class.
					$element_orientation_class = $fusion_library->images->get_element_orientation_class( get_post_thumbnail_id() );
					$element_base_padding      = $fusion_library->images->get_element_base_padding( $element_orientation_class );

					$masonry_column_offset = ' - ' . ( (int) $portfolio_column_spacing / 2 ) . 'px';
					if ( false !== strpos( $element_orientation_class, 'fusion-element-portrait' ) ) {
						$masonry_column_offset = '';
					}

					$masonry_column_spacing = ( (int) $portfolio_column_spacing ) . 'px';

					if ( 'no_text' !== $portfolio_text_layout && 'boxed' === $portfolio_text_layout &&
						class_exists( 'Fusion_Sanitize' ) && class_exists( 'Fusion_Color' ) &&
						'transparent' !== Fusion_Sanitize::color( $fusion_settings->get( 'timeline_color' ) ) &&
						0 !== Fusion_Color::new_color( $fusion_settings->get( 'timeline_color' ) )->alpha
					) {

						$masonry_column_offset = ' - ' . ( (int) $portfolio_column_spacing / 2 ) . 'px';
						if ( false !== strpos( $element_orientation_class, 'fusion-element-portrait' ) ) {
							$masonry_column_offset = ' + 4px';
						}

						$masonry_column_spacing = ( (int) $portfolio_column_spacing - 4 ) . 'px';
						if ( false !== strpos( $element_orientation_class, 'fusion-element-landscape' ) ) {
							$masonry_column_spacing = ( (int) $portfolio_column_spacing - 10 ) . 'px';
						}
					}

					// Calculate the correct size of the image wrapper container, based on orientation and column spacing.
					$masonry_attribute_style .= 'padding-top:calc((100% + ' . $masonry_column_spacing . ') * ' . $element_base_padding . $masonry_column_offset . ');';

					// Check if we have a landscape image, then it has to stretch over 2 cols.
					if ( '1' !== $portfolio_columns_int && 1 !== $portfolio_columns_int && false !== strpos( $element_orientation_class, 'fusion-element-landscape' ) ) {
						$responsive_images_columns = (int) $portfolio_columns_int / 2;
					}

					// Set the masonry attributes to use them in the first featured image function.
					$element_orientation_class = ' ' . $element_orientation_class;

					$masonry_attributes = array(
						'class' => 'fusion-masonry-element-container',
						'style' => $masonry_attribute_style,
					);

					if ( $lazy_load && isset( $post_thumbnail_attachment[0] ) ) {
						$masonry_attributes['data-bg'] = $post_thumbnail_attachment[0];
						$masonry_attributes['class']  .= ' lazyload';
					}
				}
				?>

				<article class="fusion-portfolio-post post-<?php echo esc_attr( $post->ID ); ?> <?php echo esc_attr( $column_spacing_class . $element_orientation_class ); ?>"<?php echo $column_spacing; // phpcs:ignore WordPress.Security ?>>

					<?php
					/**
					 * Open portfolio-item-wrapper for text layouts.
					 */
					?>
					<?php if ( 'no_text' !== $portfolio_text_layout || 'one' === $portfolio_columns ) : ?>
						<div class="fusion-portfolio-content-wrapper">test
					<?php endif; ?>

						<?php
						/**
						 * If no featured image is present,
						 * on one column layouts render the video set in page options.
						 */
						?>
						<?php if ( ! has_post_thumbnail() && fusion_get_page_option( 'video', $post->ID ) ) : ?>
							<?php
							/**
							 * For the portfolio one column layout we need a fixed max-width.
							 * For all other layouts get the calculated max-width from the image size.
							 */
							?>
							<?php $video_max_width = ( 'one' === $portfolio_columns && 'floated' === $portfolio_one_column_text_pos ) ? '540px' : $post_featured_image_size_dimensions['width']; ?>
							<div class="fusion-image-wrapper fusion-video" style="max-width:<?php echo esc_attr( $video_max_width ); ?>;">
								<?php echo fusion_get_page_option( 'video', $post->ID ); // phpcs:ignore WordPress.Security ?>
							</div>

							<?php
							/**
							 * On every other other layout render the featured image.
							 */
							?>
						<?php else : ?>
							<?php
							if ( 'full' === $portfolio_image_size && class_exists( 'Avada' ) && property_exists( Avada(), 'images' ) ) {
								Avada()->images->set_grid_image_meta(
									array(
										'layout'       => 'portfolio_full',
										'columns'      => $responsive_images_columns,
										'gutter_width' => $portfolio_column_spacing,
									)
								);
							}
							echo fusion_render_first_featured_image_markup( $post->ID, $portfolio_image_size, get_permalink( $post->ID ), true, false, false, 'default', 'default', '', '', 'yes', false, $masonry_attributes ); // phpcs:ignore WordPress.Security
							Avada()->images->set_grid_image_meta( array() );
							?>

						<?php endif; ?>

						<?php
						/**
						 * If we don't have a text layout then only render rich snippets.
						 */
						?>
						<?php if ( 'no_text' === $portfolio_text_layout ) : ?>
							<?php echo fusion_render_rich_snippets_for_pages(); // phpcs:ignore WordPress.Security ?>
							<?php
							/**
							 * If we have a text layout render its contents.
							 */
							?>
						<?php else : ?>
							<div class="fusion-portfolio-content">
								<?php
								/**
								 * Render the post title.
								 */
								?>
								<?php
								if ( $title ) {
									echo avada_render_post_title( $post->ID ); // phpcs:ignore WordPress.Security
								}
								?>
								<?php
								/**
								 * Render the post categories.
								 */
								?>
								<?php
								if ( $categories ) {
									echo '<div class="fusion-portfolio-meta">' . get_the_term_list( $post->ID, 'portfolio_category', '', ', ', '' ) . '</div>';
								}
								?>
								<?php echo fusion_render_rich_snippets_for_pages( false ); // phpcs:ignore WordPress.Security ?>
								<?php
								/**
								 * For boxed layouts add a content separator if there is a post content and either categories or title is used.
								 */
								?>
								<?php if ( 'masonry' !== $portfolio_layout_setting && 'boxed' === $portfolio_text_layout && '0' !== fusion_get_portfolio_excerpt_length( $post->ID ) && 'no_text' !== $portfolio_content_length && ( $title || $categories ) ) : ?>
									<?php
									$separator_styles_array = explode( '|', $fusion_settings->get( 'grid_separator_style_type' ) );
									$separator_styles       = '';

									foreach ( $separator_styles_array as $separator_style ) {
										$separator_styles .= ' sep-' . $separator_style;
									}

									$border_color = Fusion_Color::new_color( $fusion_settings->get( 'grid_separator_color' ) );
									if ( 0 === $border_color->alpha || 'transparent' === $fusion_settings->get( 'grid_separator_color' ) ) {
										$separator_styles .= ' sep-transparent';
									}
									?>
									<div class="fusion-content-sep<?php echo esc_attr( $separator_styles ); ?>"></div>
								<?php endif; ?>

								<div class="fusion-post-content">
									<?php
									/**
									 * The avada_portfolio_post_content hook.
									 *
									 * @hooked avada_get_portfolio_content - 10 (outputs the post content).
									 */
									do_action( 'avada_portfolio_post_content', $post->ID );
									?>

									<?php
									/**
									 * On one column layouts render the "Learn More" and "View Project" buttons.
									 */
									?>
									<?php if ( 'one' === $portfolio_columns && 'grid' === $portfolio_layout_setting ) : ?>
										<?php $button_span_class = ( 'yes' === $fusion_settings->get( 'button_span' ) ) ? ' fusion-portfolio-buttons-full' : ''; ?>
										<div class="fusion-portfolio-buttons<?php echo esc_attr( $button_span_class ); ?>">
											<?php
											/**
											 * Render "Learn More" button.
											 */
											?>
											<a href="<?php echo esc_url_raw( get_permalink( $post->ID ) ); ?>" class="fusion-button fusion-button-small fusion-button-default fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_shape' ) ) ); ?> fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_type' ) ) ); ?>">
												<?php esc_html_e( 'Learn More', 'fusion-core' ); ?>
											</a>
											<?php
											/**
											 * Render the "View Project" button only if a project url was set.
											 */
											?>
											<?php if ( fusion_get_page_option( 'project_url', $post->ID ) ) : ?>
												<a href="<?php echo esc_url_raw( fusion_get_page_option( 'project_url', $post->ID ) ); ?>" class="fusion-button fusion-button-small fusion-button-default fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_shape' ) ) ); ?> fusion-button-<?php echo esc_attr( strtolower( Avada()->settings->get( 'button_type' ) ) ); ?>">
													<?php esc_html_e( ' View Project', 'fusion-core' ); ?>
												</a>
											<?php endif; ?>
										</div>
									<?php endif; ?>

								</div><!-- end post-content -->

							</div><!-- end portfolio-content -->

						<?php endif; // End template check. ?>

					<?php
					/**
					 * Close portfolio-item-wrapper for text layouts.
					 */
					?>
					<?php if ( 'no_text' !== $portfolio_text_layout || 'one' === $portfolio_columns ) : ?>
						</div>

						<?php
						/**
						 * On unboxed one column layouts render a separator at the bottom of the post.
						 */
						?>
						<?php if ( 'one' === $portfolio_columns && 'boxed' !== $portfolio_text_layout && 'grid' === $portfolio_layout_setting ) : ?>
							<div class="fusion-clearfix"></div>
							<div class="fusion-separator sep-double"></div>
						<?php endif; ?>
					<?php endif; ?>

				</article><!-- end portfolio-post -->

			<?php endif; // Placeholders or featured image. ?>
		<?php endwhile; ?>
<?php/* @trevorsf added code here ... start */
        else :
?>
        <div class="no-results">No results found</div>
<?php   endif; /* @trevorsf added code here ... end */?>
	</div><!-- end portfolio-wrapper -->

	<?php
	/**
	 * Render the pagination.
	 */
	?>
	<?php echo fusion_pagination( '', Avada()->settings->get( 'pagination_range' ) ); // phpcs:ignore WordPress.Security ?>
	<?php
	/**
	 * If infinite scroll with "load more" button is used.
	 */
	?>
	<?php if ( 'load_more_button' === $portfolio_pagination_type && 1 < esc_attr( $wp_query->max_num_pages ) ) : ?>
		<div class="fusion-load-more-button fusion-portfolio-button fusion-clearfix">
			<?php echo esc_attr( apply_filters( 'avada_load_more_posts_name', esc_html__( 'Load More Posts', 'fusion-core' ) ) ); ?>
		</div>
	<?php endif; ?>

	<?php wp_reset_postdata(); ?>
</div><!-- end fusion-portfolio -->

You can see I added two blocks:

https://www.screencast.com/t/wG50IHUFw2

and:

https://www.screencast.com/t/rPRgseXm

I cannot see the name of the query array in the file. I have assumed that it is the normal $query, as you can see in my first code block:

if ( $query->have_posts() ) :

But, looking further at the code, there is this in the file you sent at the top:

global $wp_query, $fusion_library;

So that makes me think it is $wp_query

so my code should have been:

if ( $wp_query->have_posts() ) :

I hope that makes sense. The code is simply adding a check to see if there are any posts. If there are it runs the code you already have, or else it outputs that small no results message.

[Trevor]

OK. I can see what is going wrong, but I do know enough of your theme/plugins to where the fix might be.

The results grid is using Masonry (Isotope), and, to give the appearance of fading the results in and out, the theme or plugin that controls the results grid has this in the CSS when the page loads:

.js_active .grid-image {
    opacity: 0;
}

This hides the Portfolio Image links.

When the posts have loaded, each post has its opacity set to 1 to reveal them. This also always happens when the page first loads.

This is happening on the standard language, but not on the second language (English). I suspect that this is because the JavaScript is expecting to work on the portfolio page URL, but is not expecting to see en/ in the URL.

[Anonymous]

Hello Trevor,

Thank you for you quick reply. What happens when I turn masonry off is that the image dissapears. And the avatar gets mesed up as it is moved to the top. Let me know if you need a screencast/image. You should also be able to log in with the details I provided and see for yourself, if you need new login details let me knwo as well.
Best,

Barend

[Anonymous]

Dear Trevor,

My apologies for my very late reply! Almost a month later! It was just before my holidays, and afterwards I didnt find time to work on my website. Thanks you. It works better now. I am not quite satisfied, for I do not like the masonry option. (Not only do I think it looks messy, it also gives and impression of unequality between the options.)Is there no way to not have masonry and just display the images correctly…

Please let me know!

Best,

Barend

[Trevor]

This would enable you to have Masonry:

https://searchandfilter.com/documentation/3rd-party/post-grid/

If you have coded your own theme, then this might help:

https://support.searchandfilter.com/forums/topic/reload-masonry-grid-after-ajax-call/

(any private posts in that thread are not relevant to this question)

[Anonymous]

OK that’s mostly masonry related. Are you aware of any other method to generate animations on filter sorting with your plugin? Maybe jQuery animate()?