Getting masonry layout on archive page with CPT

beyondthelamppost · September 26, 2017, 8:47pm

Hi!

I’ve got a custom post type set up on my site, and I’m trying to keep the blog posts and custom posts (“entries”) separate on the Tag archive pages. I’ve managed to get it all working, except that the blog posts, which are shown second, are showing in one vertical column with 50% width instead of a 2-column masonry layout. I’m sure it’s because of having two x-iso-container in the same page, but I can’t figure out how to fix it. Can you please help? The code is as below:

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

		<center><?php echo "<h2>Literary Destinations</h2>" ; ?></center>
			<?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; ?>">
			
					<?php $args = array(
						'post_type' => 'entries',
						'tag' => $tag
						);
					$query = new WP_Query( $args ); ?>
						<?php if ( $query->have_posts() ): 
						while ( $query->have_posts() ) : $query->the_post();
						x_get_view( $stack, 'content', get_post_format() ); 
						endwhile;
						else : x_get_view( 'global', '_content-none' ) ;
						endif; ?>
						</div>
	
		<center><?php echo "<h2>Blog Posts</h2>" ; ?></center>

		<div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">
					<?php if ( have_posts() ): 
					while ( have_posts() ) : the_post(); 
					x_get_view( $stack, 'content', get_post_format() ); 
					endwhile;
					else : x_get_view( 'global', '_content-none' ) ;
					endif; ?>
		</div>
    
    <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
<?php endif; ?>

<?php pagenavi(); ?>

rafaelgou · September 26, 2017, 8:49pm

Hi, there,

Do you mind send us the url of the page so we can take a look at the problem?

Thanks for asking!

beyondthelamppost · September 26, 2017, 10:37pm

The URL is beyondthelamppost.com/tag/europe/

rafaelgou · September 27, 2017, 12:48pm

Hi, there,

You changed the views/global/_index.php and duplicate the masonry area, but also need to adjust views/global/_script-isotope-index.php accordingly.

What to do:

on _index.php change <div id="x-iso-container" ... to <div id="x-iso-container2" ... on your blog session
on views/global/_script-isotope-index.php create a copy of jQuery code using the new id (var $container = $('#x-iso-container2'); and any other reference to the id).

That will create a new instance of the masonry.

Hope it helps!

beyondthelamppost · September 27, 2017, 1:38pm

Hi Rafael,

Thanks for the suggestion. I have tried to do that, but even when I just place an identical _script-isotope-index.php file into the child theme without making any changes, it creates a bug in the page. The links to the appropriate posts appear to be there if I hover the mouse, but the images and text are invisible. If I make any sort of change to the _script file, it shows the loading ellipses for both the entries and posts, but never finishes loading them.

rad · September 28, 2017, 5:00am

Hi there,

Please provide your FTP login credentials in a secure note and I’ll check how it’s currently implemented.

Thanks!

rad · September 28, 2017, 11:56pm

Hi there,

I applied the changes but some of it won’t take effect especially the numbering of container variable. And it’s due to cache, I highly recommend that you only use cache when you’re done changing your site. There is no use in using it while you’re changing your site and it will highly affect your development. Please remember that cache is the opposite of change, hence, it’s only recommended in a production mode (live).

Please provide your admin login credentials as well. I already added the changes, it just won’t take effect so please the cache and if it works then that’s it

This should be the code

<?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>


<script>

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

    <?php if ( $is_rtl ) : ?>

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

    <?php endif; ?>

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

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

    $(window).load(function() {
      $container2.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-2').stop(true,true).fadeOut(300);
      $('#x-iso-container-2 > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

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

  });

</script>

Thanks!

beyondthelamppost · September 30, 2017, 1:33pm

Hi,

I cleared the cache, and went back to one of the tag pages and found that the body of the page did not load at all - only the header and footer. I noticed that you had created new wp-tag and _tag php files, and when I deleted those I got back to the point of only having the original problem. I have also removed the child _script-isotope-index file so that the content is visible on the page while I try to get this fixed.

rad · October 1, 2017, 3:59am

Hi there,

In that case, I recommend contacting a developer to see what’s going on with the customization. It may be the issues are tangled together and may create more issues. Though, I tried that on my local installation and works okay.

Thanks.