I am trying to create multiple grid view gallery with wordpress custom post thumbnail .
My HTML CODE is:
<ul class="slides">
<li>
<div class="photo-1">
<img src="images/photostream/one.jpg" width="101" height="102">
<span class="flex-photoCaption"><a href=""> <i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/two.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/three.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/four.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
</li>
<li>
<div class="photo-1">
<img src="images/photostream/one.jpg" width="101" height="102">
<span class="flex-photoCaption"><a href=""> <i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/two.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/three.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
<div class="photo-1">
<a href=""><img src="images/photostream/four.jpg" width="101" height="102"></a>
<span class="flex-photoCaption"> <a href=""><i class="fa fa-search"></i></a></span>
</div>
</li>
</ul>
For Custom template I am doing
<ul class="slides">
<?php
global $post;
$photo_args = array(
'post_type' => 'photo_gallery',
'posts_per_page' => -1,
'order' => 'ASC',
);
$photo_querys = get_posts( $photo_args );
?>
<?php foreach($photo_querys as $post) : setup_postdata($post); ?>
<li>
<?php
$element_show = 1;
$element_show = '<div class="photo-1">'. the_post_thumbnail('gallery_image').'
<span class="flex-photoCaption"><a href=" '. get_permalink(). '"> <i class="fa fa-search"></i></a></span>
</div>';
$element_to_show = 2 * $element_show ;?>
<?php echo $element_to_show ; ?>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>
Images are showing but there is showing “0” value after the “li” elements
This is from my view source
<li style="width: 120px; float: left; display: block;">
<img draggable="false" src="http://localhost/azadfoundation/final/wp-content/uploads/2014/11/selfdefense8_fs-100x102.jpg" class="attachment-gallery_image wp-post-image" alt="selfdefense8_fs" height="102" width="100">
0
</li>
I am actually trying to do this
But what I am getting is this
I am very sure that I am doing wrong with my code. Can anyone please help me to solve this.
Thanks in advance.