I’m looking for some help with creating a portfolio style gallery that has a masonry look and works with a lightbox.
at my test site of http://bryancooperphoto.com/people-lightbox-test/ I have created one area at the top using standard images with the visual composer backend and a 3 column layout and activated them to act with the responsive lightbox. It looks alright (though I would like to make the margins between images smaller) but the lightbox scrolls through the images top to bottom based on the columns instead of left to right like one would expect. What can I do to achieve this masonry style but with lightbox functioning from left to right?

I tried in the section below using the block grid method to create this effect, but once it gets to the second row the image has a large gap, because of the sizing of the middle row. I want a gallery that uses the full aspect ratio and doesn’t crop and this seems to be the problem with using the block grid.

Ideally the typical portfolio page would have the option of opening as a lightbox instead of only linking to a separate page as I really like the style and the ability to filter, but I know you don’t have that feature built-in and I have no idea where to start custom coding something like that. I’m a somewhat experienced experimenter when it comes to things wordpress, but that’s way out of my breadth. I have been finding the learning curve for X Theme a lot more steep than any other themes I’ve used in the past. If you had any advice on where to start I’d be interested in hearing. I’ve searched throughout the knowledge bases and forums hoping to find any other case where someone undertook the portfolio being a lightbox feature, but there is nothing I could see.

Thanks for any and all help.

-Bryan

I’m using the icon theme btw, I am currently working off an icon child theme (installed it thinking that I might be able to modify some of the code, but I don’t know where to start)

Thanks.

You can make the porfolio item open in lightbox by following the steps below.

1. Add code below in child theme’s functions.php

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack, NULL );
        }
      }

      $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
      
      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          
          printf( '<a href="%1$s" class="entry-thumb x-portfolio-lightbox" title="%2$s">%3$s</a>',
            $large_image_url[0],
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );

          break;
      }
      
      

    }

  }
endif;

function my_custom_footer_output() {
  ?>
   <script type='text/javascript' src='http://bryancooperphoto.com/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js'></script>
  <?php
}

add_action( 'wp_footer', 'my_custom_footer_output', 99999 );

2. Then You can add this under Custom > Javascripts in the Customizer.

jQuery(document).ready(function(){
    jQuery('a.entry-thumb.x-portfolio-lightbox').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}})

});

Hope that helps

Thank you for writing in!

To open the portfolio items in a lightbox, you can follow this customization: http://theme.co/x/member/forums/topic/make-portfolio-items-work-like-a-lightbox-gallery/#post-111428

Hope this helps. 🙂

Thank you.

As a bonus is there any way to insert caption material that would show up in the lightbox like you can with the regular image in a lightbox shortcode? I’m guessing with some adjustment to the code you sent me I can even source data from the portfolio items.
Either that or a button you see on hovering that leads to more info like linking to a blog post or the portfolio item.

Thanks so much, you’ve already been such a help. You guys are awesome!

-Bryan

Thanks for posting in.

Yes, those are possible with custom development. The idea is set the caption on portfolio link using javascript before the lightbox initialize. Or customize the template. Either way, you may need to consult a developer for further customization.

Thanks!

The previous fix you gave me has a bad side-effect whereby in the blog post masonry page found here: http://bryancooperphoto.com/recent/

Any featured images would also pop up in a lightbox or be linked to the media page. Is there a way to make those featured images link to the post or not link to anything at all. I can’t find any spot to specify for only portfolio post items and not just any post items. Thanks for your help!

-Bryan

You can replace the code in your child theme’s functinos.php file with this.

function x_featured_image( $cropped = '' ) {
  Global $post;
    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack, NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          if(is_single()):
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          else:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          endif;
          break;
      }

    }

  }

add_action('wp_footer', 'enqueue_lightbox_script');

function enqueue_lightbox_script() {

  echo '

    <script type="text/javascript" src="' . home_url() . '/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js"></script>
    <script>
    jQuery(document).ready(function(){jQuery(".entry-featured .entry-thumb").iLightBox({skin: "light",linkId: "gallery-image",overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: "horizontal",controls: {thumbnail: false}});});
    </script>

  ';
}

Hope that helps.

-Bryan