WordPress.org

Ready to get started?Download WordPress

Forums

the_post_thumbnail (); in shortcode printed out the loop (4 posts)

  1. FilippoFF
    Member
    Posted 1 year ago #

    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!

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  3. Peter
    Member
    Posted 1 year ago #

    change $thumbgram = the_post_thumbnail('thumbnail');

    To:

    $thumbgram = get_the_post_thumbnail( $post->ID, '', 'src' );

    You will have to play with the attributes to return just the URL I'm doing this from memory if you check the codex it will give you the right attributes if this isn't quite right

  4. FilippoFF
    Member
    Posted 1 year ago #

    Thank u a lot! It's working!
    You know, it'hard work alone... :)

Topic Closed

This topic has been closed to new replies.

About this Topic