digital_muse

Okay, cool – thanks. I’ll do that.

I guess I was thinking the core functionality was the lightbox/slideshow which now opens whenever you click an image in a (standard) wordpress gallery? It’s pretty sweet that people can still use the regular wordpress gallery (albeit, i had to give it much better styling!) and have it open in your gorgeous lightbox.

.

• This reply was modified 7 years, 7 months ago by t-p.
• This reply was modified 7 years, 7 months ago by digital_muse.

eccebombo – not sure if this helps, but here’s what I did to get a masonry layout.

I wanted people to be able to create galleries like they always do (e.g., not use the lightgallery metabox). So, I overrode WordPress’s [gallery] shortcode to create my own and have it use masonry (which actually comes with WordPress – you just have to tell it to load it for your site).

I should probably put this up on github somewhere, but in case it helps…

This uses the “small” image size (rather than 150×150 thumbnail) and does 3 columns (drops to 2 columns and then 1 column on smaller devices) with a 10px gutter. Clicking on any image opens it in lightgallery.

PHP

/*********************************************************************************************************************
 * GALLERY
 * Use masonry: https://masonry.desandro.com
 *********************************************************************************************************************/
// Masonry & ImagesLoaded both come with WordPress - have it load them for our pages
add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_script( 'masonry' );
  wp_enqueue_script( 'imagesloaded' );
}, 100 );

// Replaces the WordPress gallery shortcode so that this will be invoked whenever a gallery is created in the editor
remove_shortcode( 'gallery' );
add_shortcode( 'gallery', 'impeccable\features\masonry_gallery' );
function masonry_gallery( $atts ){
  global $post;
  $pid = $post->ID;

  if( empty( $pid ) ){
    $pid = $post[ 'ID' ];
  }

  if( !empty( $atts[ 'ids' ] ) ){
    $atts[ 'orderby' ] = 'post__in';
    $atts[ 'include' ] = $atts[ 'ids' ];
  }

  $orderby = $include = $id = $icontag = $columns = $size = $link = "";
  extract( shortcode_atts( [ 'orderby' => 'menu_order ASC, ID ASC',
                             'include' => '',
                             'id'      => $pid, 'itemtag' => 'dl',
                             'icontag' => 'dt', 'captiontag' => 'dd',
                             'columns' => 3,
                             'size'    => 'large',
                             'link'    => 'file' ],
                           $atts ) );

  $args = [ 'post_type' => 'attachment', 'post_status' => 'inherit', 'post_mime_type' => 'image', 'orderby' => $orderby ];

  if( !empty( $include ) ){
    $args[ 'include' ] = $include;
  } else {
    $args[ 'post_parent' ] = $id;
    $args[ 'numberposts' ] = -1;
  }

  if( $args[ 'include' ] == "" ){
    $args[ 'orderby' ] = 'date';
    $args[ 'order' ]   = 'asc';
  }

  $images = get_posts( $args );

  $gallery = '
              <div class="gallery">
                <div class="gallery-item-sizer"></div>
                <div class="gutter-sizer"></div>';

  foreach( $images as $image ){
    $image_url = wp_get_attachment_image_src( $image->ID, 'full' )[ 0 ];
    $thumbnail = wp_get_attachment_image_src( $image->ID, 'small' )[ 0 ];
    $gallery   .= '<div class="gallery-item">
                     <a href="' . $image_url . '"><img src="' . $thumbnail . '"></a>
                   </div>';
  }

  $gallery .= "</div>";

  return $gallery;
}

jQuery (I call this function on jQuery( document ).ready()

/**********************************************************************************************************************
 * GALLERY
 * Replace WordPress default gallery with Masonry
 * See src/features/images.php
 /**********************************************************************************************************************/
function initializeGalleries(){
  jQuery( ".gallery" ).each( function( element ){
    var gallery = jQuery( this ).masonry( {
                                            itemSelector:'.gallery-item',
                                            percentPosition:true,
                                            columnWidth:'.gallery-item-sizer',
                                            gutter:'.gutter-sizer'
                                          } );

    // layout Isotope after each image loads
    gallery.imagesLoaded().progress( function(){
      gallery.masonry();
    } );
  } );

}

SCSS

/*****************************************************************************************************************
 * GALLERIES
 *****************************************************************************************************************/
$gutter: 10px;
figcaption, .gallery .wp-caption-text{ display: none !important; }

body:not(#tinymce){
  .gallery{ margin-left: auto; margin-right: auto; }

  .gallery{
    &:after{
      content: '';
      display: block;
      clear:   both;
    }
  }

  // COLUMNS
  // Default: 3 columns
  .gallery-item-sizer, .gallery-item{ width: calc(33.33% - (#{$gutter} * 2) / 3); }
  .gallery-item--width-2{ width: calc(66.66% - (#{$gutter} / 3)); }
  .gallery-item--width-3{ width: 100%; }

  @media screen and (max-width: 720px) {
    .gallery-item-sizer, .gallery-item{ width: calc(50% - (#{$gutter}) / 2); }
    .gallery-item--width-2{ width: 100%; }

  }

  @media screen and (max-width: 480px) {
    .gallery-item-sizer, .gallery-item{ width: 100%; }
  }

  .gutter-sizer{ width: $gutter; }

  .gallery-item{
    float:         left;
    margin-bottom: $gutter;
  }

  .gallery-item img{
    display:   block;
    width:     100%;
    min-width: 100%;
    max-width: 100%;
  }
}

Okay, I’m kind of throwing that in here – I think that’s everything, let me know if I missed anything.

abby

• This reply was modified 7 years, 7 months ago by digital_muse.

[FIXED]

I just deleted and re-added them all and they’re working now.

It started working again for me, although I can’t figure what changed (sorry). Good luck!

I’m also having this problem.

It’s still on my localhost where I’m developing. Am curious, is this not the same behavior you see on other sites if the whole page fits in the browser window without scrolling? Maybe I have something set incorrectly. Thanks!

ok, thanks. I will, but I do development locally so nice to have something on my box. ??

The table is also no longer responsive, even though “Enable Responsivity” is checked

I ran W3C’s Link Checker and it keeps giving me an error on the dns-prefetch line for google fonts api:

https://fonts.googleapis.com is 404 Not Found

Am trying to understand the issue – does that mean the prefetch isn’t working? Or is W3C Validator checking the wrong thing?

Thanks!
Abby

No worries – not a huge deal, but would be nice so glad it’s something on the radar. ??

Got it, thanks!

Hah! Okay, that is crazy. Thanks for the quick response, that makes sense.