PHP concatenation syntax error when using css for animation effect - php

Question

In a Wordpress page template I have the following code in an effort to replicate a successful archive page:
<?php $args = array( 'post_type' => 'casestudies', 'posts_per_page' => 12 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="casestudy">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
echo '<span class="details"><div class="anchor-hover details-h3">'.the_title().'</div>';
echo '<p class="desc">'.get_post($post_id)->post_excerpt.'</p></span>';
endwhile; ?>
<div class="clear"></div>
I need to compress that into only one echo, in order to have the css animation work. I will also need to wrap the entire display starting with "echo" with this div:
<div<?php post_class('margin') ?> id="post-<?php the_ID(); ?>">
The title and excerpt are only supposed to show when the cursor is hovering over the thumbnail, but I can't get this line of code in without an unexpected syntax error.
I am able to get this to work on the archive for this post type so there should be some way to do it.
Am I asking too much of this kind of code? Is there a reason I can get the animation working on the archive page working but not this one? Thanks

Answer 1

you can't double parse php...
echo '<div class="casestudy">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
should be
echo '<div class="case study">'.get_the_post_thumbnail( $post->ID, '180,180' ).'</div>';
specifically:
<?php the_permalink() ?>
should be
.'the_permalink().'

Answer 2

It might help you to format your code a bit. It looks like there may be problems with single and double quotes, along with PHP tags inside strings. If you are creating large HTML template fragments, you may want to use something like ob_start() and ob_get_clean()
Here's just a quick example using your code:
<?php
$args = array( 'post_type' => 'casestudies', 'posts_per_page' => 12 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) {
$loop->the_post();
ob_start();
?>
<div class="casestudy">
<a href="<?php the_permalink() ?>" class="anchor- hover">
<?php
echo get_the_post_thumbnail( $post->ID, '180,180' );
?>
</a>
</div>
<span class="details">
<div class="anchor-hover details-h3">
<?php
echo the_title();
?>
</div>
<p class="desc">
<?php
echo get_post($post_id)->post_excerpt;
?>
</p>
</span>
<?php
echo ob_get_clean();
}
?>
<div class="clear"></div>
Side note: you probably shouldn't put an inline element (span) inside a block level element (div).