[Bryan CParticipant]

Hello,

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

[CousettMember]

I just wanted to check have you looked at using the built in portfolio feature of X? The integrity demo shows how this would look http://theme.co/x/demo/integrity/1/portfolio/ I think then modifying the template file for integrity so that it opens in a lightbox instead of the full link to another page. Let us know what you think of this solution.

[Bryan CParticipant]

I would definitely like to use the built-in portfolio feature, but would it be simple to modify the template file so that it opens in lightbox? If you could provide some direction and help with doing so then that would be my solution.

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.

[Paul RModerator]

Hi Bryan,

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

[ZeshanMember]

Hi Bryan,

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.

[Bryan CParticipant]

Thanks, that was exactly what I was looking for!

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

[RadModerator]

Hi 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!

[Bryan CParticipant]

Hi Support,

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

[Paul RModerator]

Hi 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 CParticipant]

Unfortunately I tried that on my test site and my real site that’s now being set up, and it didn’t yield any different of a result. Any idea why? Thanks for your time!

-Bryan

[RadModerator]

Hi Bryan,

How about this,

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-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

      if ( x_is_portfolio() ) {

      		printf( '<a href="%1$s" class="entry-thumb portfolio-lightbox-item" title="%2$s">%3$s</a>',
            esc_url( wp_get_attachment_image_src( get_post_thumbnail_id ( get_the_ID(), 'entry-fullwidth' ) ) ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          	);

      } else {
	      switch ( is_singular() ) {
	        case true:
	          printf( '<div class="entry-thumb">%s</div>', $thumb );
	          break;
	        case false:
	          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
	          );
	          break;
	      }
  	  }

    }

  }
endif;

add_action('x_before_site_begin', 'enqueue_lightbox_script', 0);
function enqueue_lightbox_script() {
     echo do_shortcode('[lightbox selector="a.portfolio-lightbox-item"]');
}

Hope this helps 🙂

[Bryan CParticipant]

Nope, sorry, it didn’t work. I tried exactly that and it broke the lightbox working for the portfolio. Unless I needed to have a different code in the CSS or Javascript of the customizer I’m not sure what went wrong if you thought it should work. Any further instructions that should have come with?

I had to revert to the original code to make sure the portfolios looked good as the blog thing is less of a priority

[ZeshanMember]

Hi Bryan,

In that case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Cheers!

[Bryan CParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Bryan,

Thank you for login credentials!

I can see more than one child theme in your website using FTP. Unfortunately, I couldn’t login to your WordPress admin panel as it’s giving me invalid username error. Would you mind confirming the WordPress logins again so that we can take a closer look to your admin panel?

Thanks!

[Author]

Posts