Support » Fixing WordPress » the_post_thumbnail (); in shortcode printed out the loop

  • Hi evryone,
    I’m sorry for my english, I’ll try to explain.
    Im working to my portfolio page with custom_post_type posted via shortcode. The portfolio is filtered by Isotope.js and the thumbnail is attached from a custom meta box. it’s working fine.
    The problem is this, if i try to attach the post thumb with the_post_thumbnail(); and not with my meta box, the thumbs images are loaded before and out of the loop.

    thi is the html resulted with the custom meta boxe:

    <div class="portfolio">
    ....
    ....
    <article class="post-222 portfolio type-portfolio status-publish hentry coll-5 fracassi" id="#">
         <div class="wrapper">
    <a href="http://xxx.it" class="thumb">
    
    <span class="x-preloader"></span>
    
    <img alt="" src="http://www.xxx.it/test/wp_test/wp-content/uploads/2013/01/0d57b590560211e2bf5922000a1f8cdc_72-300x300.jpg">
    
    </a>
    <div class="info">
        <h3 class="title">Mi fracassi</h3>
             <span class="text"></span><div><h1>Test TEST</h1></div></div>
        </div>
           </article>
    
    ....
    ....
    </div>

    And this is the resoult with the the_post_thumbnail(); :

    <strong><img alt="" src="http://www.xxx.it/test/wp_test/wp-content/uploads/2013/01/0d57b590560211e2bf5922000a1f8cdc_72-300x300.jpg"></strong>
    
    <div class="portfolio">
    ....
    ....
    <article class="post-222 portfolio type-portfolio status-publish hentry coll-5 fracassi" id="#">
         <div class="wrapper">
    <a href="http://xxx.it" class="thumb">
    
    <span class="x-preloader"></span>
    
    </a>
    <div class="info">
        <h3 class="title">Mi fracassi</h3>
             <span class="text"></span><div><h1>Test TEST</h1></div></div>
        </div>
           </article>
    
    ....
    ....
    </div>

    How can you see the <img> is coming out of the portfolio wrap…

    here the shortcode:

    /*-----------------------------------------------------------------------------------*/
    /*	Portfolio Shortcode
    /*-----------------------------------------------------------------------------------*/
    function coll_portfolio($atts, $content = null)
    {
        extract(shortcode_atts(array(
            'columns' => '3'
        ), $atts));
    
        $output = '';
    
        // start portfolio
        $output .= '<div class="portfolio">';
        // start filter
        $output .= '<ul class="filter">';
        $taxonomy = array ('port-cat', 'instagram-cat');
        $tax_terms = get_terms($taxonomy, 'orderby=none');
        // first item (all)
        $output .= '
    <li><a href="#">' . __('All', 'framework') . '</a></li>
    ';
        foreach ($tax_terms as $tax_term) {
            $output .= '<li ><a href="#">slug . '">' . $tax_term->name . '</a>';
        }
        $output .= ''; // end filter
    
        // start items
        $output .= '<div class="items clearfix">';
        $loop = new WP_Query(array('post_type' => array ( 'portfolio', 'instagram'), 'posts_per_page' => -1));
        while ($loop->have_posts()) : $loop->the_post();
            global $post;
            // get thumbnail
    
            $cols = 'coll-' . $columns;
            // build
    		if ('portfolio' == get_post_type ()) {
    		$thumb = get_post_meta(get_the_ID(), 'thumbnail', true);
            $output .= "<article id='" . $post->post_name . "' class='" . join(" ", get_post_class($cols)) . "'>";
            $output .= '<div class="wrapper">';
    
    		$output .= '<a href="' . get_permalink(get_the_ID()) . '">';
            $output .= '<span class="x-preloader"></span>';
            $output .= '<img src="' . $thumb . '" alt=""/>';
            $output .= '</a>';
    		$output .= '<div class="info">';
            $output .= '<h3 class="title">' . get_the_title(get_the_ID()) . '</h3>';
            $output .= '<span class="text">' . get_the_excerpt() . '</span>';
    		$output .= '<div><h1>porca paletta</h1></div>';
            $output .= '</div>';
            $output .= '</div>';
            $output .= '</article>';
               }
    		elseif ('instagram' == get_post_type ()) {
    		$thumbgram = the_post_thumbnail('thumbnail');
    		 $output .= "<article id='" . $post->post_name . "' class='" . join(" ", get_post_class($cols)) . "'>";
    
            $output .= '<img src="' . $thumbgram . '" alt=""/>';
            $output .= '';
    		$output .= '<div class="info">';
            $output .= '<h3 class="title">' . get_the_title(get_the_ID()) . '</h3>';
            $output .= '<span class="text">' . get_the_excerpt() . '</span>';
            $output .= '</div>';
            $output .= '</div>';
            $output .= '</article>';
    			}  
    
        endwhile;
        wp_reset_postdata();
        $output .= '</div>'; // end items
    
        $output .= '</div>'; // end portfolio
        return $output;
    }
    
    add_shortcode('portfolio', 'coll_portfolio');

    I have tried several solutions, but without success,
    some of you maybe know something i miss…
    If you need more code’s to see i can show.
    Thank to every one!

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘the_post_thumbnail (); in shortcode printed out the loop’ is closed to new replies.