Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Need a little help?  Find answers quickly by searching the forum.
Group Admins
  • jeffw
  • ljungi
  • maxleondalheimer
  • admin
Group Mods
  • malekovitch

Support for: Vellum – Responsive WordPress Theme

Vellum

Public Group  |  active 1 month, 2 weeks ago ago
Viewing post 1 to 15 (16 total posts)

Portfolio page with lightbox slideshow

  • santhony

    said

    Hello!

    I need to be able to have a portfolio page, and when you click an item, i need it to pop up a lightbox where i can scroll through a few images. Basically a combo of the gallery post type and the standard post type. The gallery post type cannot open in a lightbox, it just clicks through to the detail page.

    The other option would be similar to the Avada theme, where you can simply add more than 1 featured image, so that when you do a standard portfolio item, and have it open in a lightbox, it could scroll through multiple items.

    This is urgent as this feature is essential for my client and we are launching in 4 days!

    Please help me make this happen! Love the theme.

    Thanks,
    Sam

  • andy

    said

    I’ll have to take a look at a few things to see the best way to accomplish this. It’s going to require some editing of the PHP for at least one template file but it can be done. I’ll post back here once I have some code or further details.

  • santhony

    said

    Thank you Andy! I am incredibly grateful for your assistance and excited to see how we can accomplish this. #LearningByDoing

    Sam

  • santhony

    said

    Hi Andy, do you have a timeline on this? I do not want to bother you, I just need to be able to set some expectations for a client who wants their site live on the in 3 days. Once you have this lightbox feature figured out, I need to get in there and build out a couple portfolios/galleries.

    Thank you so much for your help,
    Sam Anthony

  • andy

    said

    I’ll be trying to look at it today. Thanks for hanging in there while I check for a solution.

  • andy

    said

    I had family visiting this weekend and didn’t get to work on it. I’m looking at the code now. Thanks!

  • andy

    said

    First, in the file “templates/grid.php” on lines 180 and 181, change both parameters to “false” as shown below:

    'slide_paging' => 'false', 
    'autoplay'     => 'false',

    Next, in the file “extensions/content-rotator/load.php” about line 230 you will see:

    // In blog lists we use links to wrap the images
    if ( ! is_single() )  {
      $before = '<a href="'. get_permalink() .'" title="'. sprintf( __( 'Permalink to %s', 'framework' ), the_title_attribute( 'echo=0' ) ) .'" rel="bookmark" class="plain-image '. get_post_format() .'">'; 
      $after = '</a>';
    }
     
    // Create the media display
    if ($attachments) {
      foreach ($attachments as $attachment) {
     
        // Get the image data
        $image['id'] = $attachment->ID;
     
        // Retrieve the resized image
        $thumbnail = $this->getResizedImage( $image );
     
        // Create the content item
        $content[$attachment->ID] = $before . $thumbnail['full_image_tag'] . $after;
      
      }
    }  

    Replace that with:

    // Create the media display
    if ($attachments) {
      foreach ($attachments as $attachment) {
     
        // Get the image data
        $image['id'] = $attachment->ID;
        
        // Retrieve the resized image
        $thumbnail = $this->getResizedImage( $image );
     
        // In blog lists we use links to wrap the images
        if ( ! is_single() )  {
          $before = '<a href="'. $thumbnail['large_image'] .'" title="'. sprintf( __( 'Permalink to %s', 'framework' ), the_title_attribute( 'echo=0' ) ) .'" rel="bookmark-'.$post_id.'" class="popup plain-image '. get_post_format() .'">'; 
          $after = '</a>';
        }
     
        // Create the content item
        $content[$attachment->ID] = $before . $thumbnail['full_image_tag'] . $after;
      
      }
    }  
    

    In your Custom CSS field of the Theme Options, add this custom class to hide the pagination “next” and “previous” arrows on the thumbnail image (if you want to)

    .rotator-nav { display: none; }

    IMPORTANT → Keep in mind that if you modify core theme files then each time you update the theme you will need to make all of those modifications again to the updated theme files.

  • santhony

    said

    Andy,

    I apologize as I am afraid I have miscommunicated my desire here. I really hope you will still be able to assist me.

    After making the changes you suggested, my gallery portfolio item, no longer displays an image at all.

    To break it down:

    I have a portfolio of different cats we have for available for sale. Each portfolio item is for one cat. I have multiple photos I need to display for each cat.

    What I would like to happen:

    When i click on one of the cats in the portfolio, I would like it to open a lightbox where I can scroll through the photos I have uploaded for that specific cat, not scroll through the various cats.

    Is that possible? I need to upload multiple photos to each portfolio item. And then when i click that portfolio item, have it open a lightbox where i can scroll only through the photos for that portfolio item.

    If this is not possible (that would be a huge bummer), do you have any suggestions for how to make this happen in a different manner?

    Thanks,
    Sam

  • santhony

    said

    Here is a link to the page: Select Exotics

    As you can see, Audi no longer has an image with her. If i switch that portfolio item to standard, then the image shows and when i click on it, i can scroll through that image and the image for Cabery in a lightbox.

    However, i need to be able to scroll through multiple images of Audi when the lightbox pops up. Then if i wanted to view another cat, i would close the lightbox and select a different cat.

    Hopefully that helps.

  • santhony

    said

    Looking back at your email, I am thinking that maybe we were on the same page, since you suggest removing the navigation arrows from the image, which means you must have been thinking it was a gallery portfolio item.

    No matter what, the changes didn’t seem to have the desired effect. Any help would be greatly appreciated.

    Thanks again Andy,
    Sam Anthony

  • andy

    said

    Please make sure you have the “Gallery” post format selected and also have a default feature image (bottom right of the edit screen) set for the portfolio item. In my site where I tested this code the image is showing and clicking it opens the lightbox as desired.

    Also, make sure you DON’T have the option for “lightbox” selected in the portfolio options. That takes another path and won’t work. It needs to be set to link to the post. I know that doesn’t make sense but we’re breaking from the default theme functionality here and editing the PHP files so things are not always going to follow the logic that is designed to work by default.

  • santhony

    said

    Andy,

    I am looking right now and:
    - I have the gallery post format selected.
    - I have a featured image set
    - I have “open item details page” selected

    Is there anything else i need to be aware of? I am not seeing a featured image display. Could there be a typo in the code?

    Is there any way i can get you credentials so you can see for yourself? So you aren’t doubting the changes I have made? Or maybe you will find something sill that i have done.

    Also, to be clear, i have created a page, set the template to “default template”, and have used the portfolio element in visual composer to display the portfolio. In that element, i have defined it so only certain categories are displayed. I have set it to order by date. Could any of this be causing the issue? (just trying to give you as much info as possible)

    Thanks,
    Sam

  • santhony

    said

    Also, just wanted to let you know that now galleries in the blog section do not work, either. No thumbnail image is displayed. And when i click through, no images display on the actual post page.

    Sam

  • santhony

    said

    Andy!

    I just set the files back to their default state, and then re-made the changes and it worked! Here is a potential reason why it didnt work the first time:

    I copied your code from my outlook email client. This time, I copied from the forum webpage. I don’t understand, maybe outlook messed up a character or added some weird spacing.

    Thank you again. This works perfectly. You rock. And I will be on the lookout for your themes in the future. Dynamite support.

    –Sam

Viewing post 1 to 15 (16 total posts)
Topic tags: Lightbox, portfolio