php loading different structure than source code

Question

I was trying to code in a conditional statement into a template file and had a bit of an issue.

This is the code in the file

     else
            {
                echo('<div class="thumbList"><a href="' . the_permalink() . '"><div class="prod-thumb">' . the_post_thumbnail( 'product-thumb', array( 'class' => 'product-thumb' ) ) . '</div> 
    <div class="prod-info">
        <span class="prod-ttl"><h4>' . the_title() . '</h4></span>
        <table class="prod-table">
            <tr class="odd"><td class="desc-title"><strong>Design No.:</strong></td><td><span>' .  get_post_meta($post->ID, 'prod_id', true) . '</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Product Status:</strong></td><td><span>' . get_post_meta($post->ID, 'prod_status', true) . '</span></td></tr>
            <tr class="even"><td class="desc-title"><strong>Style:</strong></td><td><span>' . get_post_meta($post->ID, 'prod_style', true) . '</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Size:</strong></td><td><span>' . wpautop(get_post_meta($post->ID, 'prod_sizes', true)) . '</span></td></tr>' . ($post->prod_price && $post->prod_sale == ""?('<tr class="even"><td class="desc-title">Original Price:</td><td><span>' . get_post_meta($post->ID, 'prod_price', true) . '</span></td></tr>'):($post->prod_sale != ""?('<tr class="even"><td class="desc-title"><div style="font-weight:bold;color:#FF2929;">Sale Price:</div></td><td><span>' . get_post_meta($post->ID, 'prod_sale', true) . '</span></td></tr><tr class="even"><td class="desc-title"><div style="text-decoration:line-through;color:#8C8C8C;">Original Price:</div></td><td><span><div style="text-decoration:line-through;color:#8C8C8C;">' . get_post_meta($post->ID, 'prod_price', true) . '</div></span></td></tr>') : '<p></p>')) . '</table>
        <br/><br/>' . ($post->post_content?('<div class="resp320Hid" style="color:#b8b042;"><div class="entry">' . the_content() . '</div></div>'):'') . '<div class="resp320Hid"><p><span>Click here to view more Details</span></p></div></div>' . ($post->post_content?('<div class="resp320Show" style="clear:both;"><div class="entry">' . the_content() . '</div></div>'):'') . '<div class="resp320Show"><p><span>Click here to view more Details</span></p></div></a></div>'
);}

This is what it's supposed to output

    <div class="thumbList">                 
<a href="http://dev.imagecarpets.com/products/new-arrival/gabbeh-rug-12767/">           
    <div class="prod-thumb">                
        <img width="250" height="388" src="http://dev.imagecarpets.com/wp-content/uploads/2013/12/Gabbeh_12767__4.01x6.06-250x388.jpg" class="attachment-product-thumb wp-post-image" alt="Gabbeh_12767__4.01x6.06" />      </div>  
    <div class="prod-info">
        <span class="prod-ttl"><h4>Gabbeh Rug-12767</h4></span>
        <table class="prod-table">
            <tr class="odd"><td class="desc-title"><strong>Design No.:</strong></td><td><span>12767</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Product Status:</strong></td><td><span>In Stock</span></td></tr>
            <tr class="even"><td class="desc-title"><strong>Style:</strong></td><td><span>Allover</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Size:</strong></td><td><span><p>4.1 x 6.6</p>

Click here to view more Details

Click here to view more Details

</a>    

But instead, for some reason, when the page loads in the browser, this is what it looks like:

    http://dev.imagecarpets.com/products/contemporary-rug/moroccan-rug-140105/<img width="450" height="534" src="http://dev.imagecarpets.com/wp-content/uploads/2014/02/Morracan_140105_8.05X10.00DRK-1-450x534.jpg" class="product-thumb wp-post-image" alt="Morracan_140105_8.05X10.00DRK (1)" />Moroccan Rug-140105<div class="thumbList"><a href=""><div class="prod-thumb"></div>  
    <div class="prod-info">
        <span class="prod-ttl"><h4></h4></span>
        <table class="prod-table">
            <tr class="odd"><td class="desc-title"><strong>Design No.:</strong></td><td><span>140105</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Product Status:</strong></td><td><span>In Stock</span></td></tr>
            <tr class="even"><td class="desc-title"><strong>Style:</strong></td><td><span>Allover</span></td></tr>
            <tr class="odd"><td class="desc-title"><strong>Size:</strong></td><td><span><p>8.5 x 10</p>

Click here to view more Details

Click here to view more Details

The thumbnail image and permalink are loaded outside the thumblist class as it was intended and the link doesnt turn into a link. It just prints the path unformatted. I probably did something dumb but I can't figure it out. Can anyone help

Answer 1

You're using template tags within an echo statement that themselves echo a value. You need to use the versions that return their value.

the_permalink() should be get_permalink, the_post_thumbnail should be get_the_post_thumbnail, the_title should be the_title( '', '', false ), the_content should be get_the_content().