[harrymartinphotographyParticipant]

Hi,

I’m wondering if it is possible to set up a filterable portfolio as standard, but when images are clicked they appear as a lightbox rather than clicking through to the media page.

Many thanks.

[Paul RModerator]

Hi Harry,

Thanks for writing in!

You can try this link

https://theme.co/x/member/forums/topic/lightbox-image-in-renew-portfolio/#post-111327

Hope that helps.

[harrymartinphotographyParticipant]

Hi,

Have only just gotten round to trying this for my site – installed lightbox plus plugin but it doesn’t seem to work with the images on the portfolio pages? Is there a way to use the X responsive lightbox plugin with the portfolios?

Cheers

[Paul RModerator]

Hi Harry,

X theme has a built in lightbox functionality, no need to install another plugin.

You need to follow the instructions given from the link above to make it work in portfolio pages.

Thanks

[harrymartinphotographyParticipant]

Hi I followed the instructions, created a new child theme and edited the content-portfolio.php and functions.php files with the text supplied but then when I go to one of the portfolios nothing opens at all – just my header, part of the background and nothing else.

[harrymartinphotographyParticipant]

e.g. the page:

http://www.harrymartinphotography.co.uk/galleries/birds/

Copied & pasted the code straight from the page, so not sure what’s happened, all other pages work find.

[Paul RModerator]

Hi Harry,

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:

– Link to your site
– 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.

[harrymartinphotographyParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Harry,

Sorry I couldn’t login with the credentials you give. Please confirm.

Thanks.

[harrymartinphotographyParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

The above provided method was for our previous version of the theme. So, please ignore them and follow these steps:

Step 1: Copy the file wp-content/themes/x/framework/views/renew/content-portfolio.php in your child theme’s folder /framework/views/renew/, open the copied file in a text editor and replace entire code with following:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <?php if ( ! x_is_portfolio_item() ) : ?>

    <div class="entry-featured">
      <?php x_portfolio_item_featured_content(); ?>
      <div class="entry-cover">
        <div class="entry-cover-content">
          <span><?php echo get_post_meta( get_the_ID(), '_x_portfolio_media', true ); ?></span>
          <h2 class="entry-title entry-title-portfolio">
            <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ?>" class="entry-title-a" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
          </h2>
          <span><?php echo get_the_date( 'm.d.y' ); ?></span>
        </div>
      </div>
    </div>

  <?php endif; ?>

  <div class="entry-wrap cf">

    <?php if ( is_singular() ) : ?>

      <div class="entry-info">
        <div class="entry-featured">
          <?php x_featured_portfolio( 'cropped' ); ?>
        </div>
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_renew_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>

    <?php endif; ?>

  </div>
</article>

Step 2: Add following code in your child theme’s functions.php file:

// Featured Image - Open Index Posts Image in a lightbox - RENEW
// =============================================================================

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 );
        }
      }

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

// Adding Lightbox jQuery code.

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($) {
         $(\'.page-template-template-layout-portfolio .entry-featured .entry-thumb\').click(function(e) {
            e.preventDefault();
         });
      });
      jQuery(document).ready(function(){jQuery(".page-template-template-layout-portfolio .entry-title-a").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>

  ';
}
?>

Step 3: I see you are using a caching plugin, please clear it, and disable during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. 🙂

Thank you.

[harrymartinphotographyParticipant]

While my portfolio now displays correctly the images just open to the image link and not into a lightbox. I have disabled the cache plugin and used the new code you supplied.

[ZeshanMember]

Hi Harry,

I have updated the code in your functions.php file and in my previous response. The images now should open in a lightbox 🙂

Cheers!

[harrymartinphotographyParticipant]

That’s working now excellent, one last problem however when the image shows in the lightbox it appears twice (as in the previous image is identical while there’s only one copy of the photo in the portfolio).
Also is there a way to enable thumbnail navigation in the lightbox (below the main image) with arrow key navigation also? I pretty much just want it identical to how the responsive lightroom plugin works!

Thanks!

[ZeshanMember]

Hi Harry,

Again, I have updated the code in your functions.php file and in my earlier response. This should be good now 🙂

Cheers!

[Author]

Posts