custom post types - How to add a lightbox to class mix?

I have a question: how to add a lightbox to a photo. I've been sitting here a bit and I can not deal with it.

<?php 


//Dynamic Portfolio With Shortcode

function portfolio_shortcode($atts){
    extract( shortcode_atts( array(
        'category' => ''
    ), $atts, '' ) );

    $q = new WP_Query(
        array('posts_per_page' => 50, 'post_type' => 'portfolio')
        );        


//Portfolio taxanomy query
    global $paged;
    global $post;
    $args = array(    
        'post_type' => 'portfolio',
        'paged' => $paged,
        'posts_per_page' => -1,
    );

    $portfolio = new WP_Query($args);
    if(is_array($portfolio->posts) && !empty($portfolio->posts)) {
        foreach($portfolio->posts as $gallery_post) {
            $post_taxs = wp_get_post_terms($gallery_post->ID, 'portfolio_category', array("fields" => "all"));
            if(is_array($post_taxs) && !empty($post_taxs)) {
                foreach($post_taxs as $post_tax) {
                    $portfolio_taxs[$post_tax->slug] = $post_tax->name;
                }
            }
        }
    }
?>        

        <!--Category Filter-->

        <ul class="portfolio_button_area fix">
            <li class="filter portfolio_button active" data-filter="all">Pokaż wszystkie</li>
            <?php foreach($portfolio_taxs as $portfolio_tax_slug => $portfolio_tax_name): ?>
                <li class="filter portfolio_button" data-filter=".<?php echo $portfolio_tax_slug; ?>"><?php echo $portfolio_tax_name; ?></li>
            <?php endforeach; ?>
        </ul>        
        <!--End-->



<?php

   echo'<div id="Container">';
    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        //Get Texanmy class        
        $item_classes = '';
        $item_cats = get_the_terms($post->ID, 'portfolio_category');
        if($item_cats):
        foreach($item_cats as $item_cat) {
            $item_classes .= $item_cat->slug . ' ';
        }
        endif;




                echo'<div class="mix '.$item_classes.'">'.get_the_post_thumbnail().'</div>';


    endwhile;
 echo'</div>';

    wp_reset_query();

}
add_shortcode('portfolio', 'portfolio_shortcode');

I have a question: how to add a lightbox to a photo. I've been sitting here a bit and I can not deal with it.

<?php 


//Dynamic Portfolio With Shortcode

function portfolio_shortcode($atts){
    extract( shortcode_atts( array(
        'category' => ''
    ), $atts, '' ) );

    $q = new WP_Query(
        array('posts_per_page' => 50, 'post_type' => 'portfolio')
        );        


//Portfolio taxanomy query
    global $paged;
    global $post;
    $args = array(    
        'post_type' => 'portfolio',
        'paged' => $paged,
        'posts_per_page' => -1,
    );

    $portfolio = new WP_Query($args);
    if(is_array($portfolio->posts) && !empty($portfolio->posts)) {
        foreach($portfolio->posts as $gallery_post) {
            $post_taxs = wp_get_post_terms($gallery_post->ID, 'portfolio_category', array("fields" => "all"));
            if(is_array($post_taxs) && !empty($post_taxs)) {
                foreach($post_taxs as $post_tax) {
                    $portfolio_taxs[$post_tax->slug] = $post_tax->name;
                }
            }
        }
    }
?>        

        <!--Category Filter-->

        <ul class="portfolio_button_area fix">
            <li class="filter portfolio_button active" data-filter="all">Pokaż wszystkie</li>
            <?php foreach($portfolio_taxs as $portfolio_tax_slug => $portfolio_tax_name): ?>
                <li class="filter portfolio_button" data-filter=".<?php echo $portfolio_tax_slug; ?>"><?php echo $portfolio_tax_name; ?></li>
            <?php endforeach; ?>
        </ul>        
        <!--End-->



<?php

   echo'<div id="Container">';
    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        //Get Texanmy class        
        $item_classes = '';
        $item_cats = get_the_terms($post->ID, 'portfolio_category');
        if($item_cats):
        foreach($item_cats as $item_cat) {
            $item_classes .= $item_cat->slug . ' ';
        }
        endif;




                echo'<div class="mix '.$item_classes.'">'.get_the_post_thumbnail().'</div>';


    endwhile;
 echo'</div>';

    wp_reset_query();

}
add_shortcode('portfolio', 'portfolio_shortcode');

• custom-post-types
• loop
• lightbox

Share Improve this question edited Mar 21, 2019 at 8:19 Amirition 35555 silver badges2020 bronze badges asked Mar 21, 2019 at 7:58 asqaniuszasqaniusz 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you only need to add a "lightbox" class to each element you just need to change this :

 echo'<div class="mix '.$item_classes.'">'.get_the_post_thumbnail().'</div>';

to this :

echo'<div class="mix lightbox '.$item_classes.'">'.the_post_thumbnail('thumbnail', array('class' => 'lightbox')) .'</div>';

And if you want to add the full size image to be opened, try this :

$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo'<div class="mix lightbox '.$item_classes.'"><a href="' . esc_url($featured_img_url) . '">' . the_post_thumbnail('thumbnail', array('class' => 'lightbox')) .'</a></div>';

check this for all the sizes available