A huge fan

Thank you for trying out our plugin and we really appreciate your feedback.

1. Currently there is no way to use different thumbnail for gallery but we have taken this feature request in consideration for future release.

2. We have a similar functionality in our premium plugin which uses JustifiedGallery.

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.

.

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