I am trying to implement a portfolio grid layout with jQuery Masonry. I want my client to be able to upload images + a caption. But my grid seems to fail as the items are displaying below each other instead of next to each other and I'm not sure why.

Any ideas would be greatly appreciated

My code:

PHP

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template clonable='1' title='Homepage' />

   <!-- Header -->
   <cms:embed 'header.html' />

      <cms:pages masterpage='portfolio.php'>
         <div class="grid">
            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>

            <div class="grid-item">
               <a href="<cms:show k_page_link />">
                  <img src="<cms:show image_image />">
                  <p class="caption"><cms:show image_caption /></p>
               </a>
            </div>
         </div>
      </cms:pages>

   <!-- Footer -->
   <cms:embed 'footer.html' />
<?php COUCH::invoke(); ?>

CSS

Code: Select all

/* Masonry */
.grid-sizer,
.grid-item {
   width: 30%;
}

.grid-item {
   margin-bottom: 5rem;
   text-align: center;
}

.grid-item img {
   width: 100%;
   height: auto;
}

.gutter-sizer {
   width: 5%;
}

.grid-item img + p {
   padding: 2rem;
}

jQuery

Code: Select all

var $grid = $('.grid').imagesLoaded( function() {
   $grid.masonry({
      itemSelector: ".grid-item",
      columnWidth: ".grid-sizer",
      gutter: ".gutter-sizer",
      percentPosition: true
   });

   $('.grid-item img').lazyload({
      effect: 'fadeIn'
   });

   $('.grid-item img').trigger('scroll');
});

[trendoman]

The only good idea is to get static html working first, then convert it to live with couchcms tags.

P.S. I guess you wouldn't expect in the browser's source code view to see div class="grid" repeating as many times as you have portfolio items Maybe you should put in cms:pages only grid-items instead of the whole thing?

The only good idea is to get static html working first, then convert it to live with couchcms tags.

P.S. I guess you wouldn't expect in the browser's source code view to see div class="grid" repeating as many times as you have portfolio items Maybe you should put in cms:pages only grid-items instead of the whole thing?

Exactly what I did, it works just fine in static html.

Hmm, totally overlooked that. Thanks!!

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template clonable='1' title='Homepage' />

   <!-- Header -->
   <cms:embed 'header.html' />

      <div class="grid">
         <div class="grid-sizer"></div>
         <div class="gutter-sizer"></div>

         <cms:pages masterpage='portfolio.php'>
            <div class="grid-item">
               <a href="<cms:show k_page_link />">
                  <img src="images/wall.jpg">
                  <p class="caption"><cms:show image_caption /></p>
               </a>
            </div>
         </cms:pages>
      </div>

   <!-- Footer -->
   <cms:embed 'footer.html' />
<?php COUCH::invoke(); ?>

[trendoman]

So now it works?
Hope so.

Alternatively to have more neat code, you can place first divs inside cms:pages, but show them only once - before the first row.

Code: Select all

<cms:pages ..>
  <cms:if k_paginated_top >
      <div class="grid" >
  </cms:if>

... listing items

<cms:if k_paginated_bottom >
    </div><!-- /grid -->
</cms:if>

</cms:pages>

So now it works?
Hope so.

Alternatively to have more neat code, you can place first divs inside cms:pages, but show them only once - before the first row.

Code: Select all

<cms:pages ..>
  <cms:if k_paginated_top >
      <div class="grid" >
  </cms:if>

... listing items

<cms:if k_paginated_bottom >
    </div><!-- /grid -->
</cms:if>

</cms:pages>

Yes, works like a charm! Thanks again