[jasmin4uParticipant]

Hi there! I have come across 4 posts that have something to do with my question but I still didn’t find the right answer!
I would like to add a portfolio item with a title and a featured image so it shows up on my portfolio page with 4 columns…and when I click the title, i want it to open in original size in a lightbox instead of opening in a single portfolio page. Is that possible? thanks for ur help! kind regards, J

[Nabeel AModerator]

Hi there,

Please refer to this thread http://theme.co/x/member/forums/topic/make-portfolio-items-work-like-a-lightbox-gallery/#post-111428

Hope this helps!

[jasmin4uParticipant]

This reply has been marked as private.

[jasmin4uParticipant]

I just saw this change worked for my blog posts: featured image of an image post opens in a lightbox now. I wd like to make it work for my portfolio posts though…

[ZeshanMember]

Hi there,

Thank you for writing in!

Instead of using above provided code, please add following 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(){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>

  ';
}

After that, 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>

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer, or look into service like Elto or WerkPress. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

Hope this helps. 🙂

Thank you.

[jasmin4uParticipant]

Thank you very much for your help! I think we r a big step closer.
Now the image opens in a new window but not in a light box.
Do u know if there is an additional plugin i need to install in order to make it work?
If you wanna take a look:
http://www.michael-berrer.de/media
see login credentials above.

[ZeshanMember]

Hi Jasmin,

I’ve added the following code under Custom > JavaScript in the Customizer in your website:

jQuery(document).ready(function(){jQuery(".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}});});

Hope this helps. 🙂

Thank you.

[jasmin4uParticipant]

U r a genius!!! :))) Now the portfolio works…
but i have no idea what happened to the blog. When I hover a featured image now it seems to open in a lightbox but then nothing really happens.
see here when u click on the featured image of the post “Genf R32 Ehrad (SUI)”:
http://www.michael-berrer.de/news
I wd like that the images link to the single blog post as they did before.

[Nabeel AModerator]

Hi there,

Upon checking the news page, it seems the jQuery script is causing the images to open in a lighbox, if you disable the JavaScript everything starts working fine. Replace the child’s theme function.php file code with this one:

<?php
// 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(){jQuery(".page-id-1884 .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>

  ';
}
?>

Let us know how this goes!

[jasmin4uParticipant]

Now it works!! 🙂 Thank you so much!

[jasmin4uParticipant]

This reply has been marked as private.

[Kosher KMember]

Hi There,

Thanks for writing in,

The previous code provided has a javascript to open a the image on lightbox,

<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(".page-id-1884 .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>

However, the selector only targets a specific page which define on the above code “.page-id-1884 .entry-featured .entry-thumb”

Can you please try adding additional selector for the english page, should like this

“.page-id-1884 .entry-featured .entry-thumb, .page-id-2290 .entry-featured .entry-thumb”

Your script should look like this (notice the additional selector) on the very first line jQuery(document).ready(function(){jQuery(".page-id-1884 .entry-featured .entry-thumb, .page-id-2290 .entry-featured .entry-thumb")

<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(".page-id-1884 .entry-featured .entry-thumb, .page-id-2290 .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 this helps,

Have a great day

[jasmin4uParticipant]

Thanks for helping…
I added the code but it doesn’t work.
Just to test it…I tried replacing the page id 1884 with 2290 to see if the english MEDIA portfolio wd open with lightbox then but also this didn’t work 🙁
Can it be that we need to add something extra?

[RadModerator]

Hi Jasmin,

Change this

.page-id-1884 .entry-featured .entry-thumb, .page-id-2290 .entry-featured .entry-thumb

to this

.page-template-template-layout-portfolio-php .entry-featured .entry-thumb

That will select all portfolio pages regardless of ID.

CHeers!

[jasmin4uParticipant]

It works for my German portfolio but still not for my English portfolio 🙁

[Author]

Posts