ok I have a portfolio page. Every portfolio item has thumbnail attached. what I want is to print out the first thumbnail from the first post twice. One at the beginning & other at the ending. like: image_1, image_2, image_3, image_4 & then image_1 again.
my code is:
<div class="main-interior portfolio" id="portfolio-big-pics" style="display: block;">
<?php $args = array( 'post_type' => 'portfolio', 'order' => 'dsc');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $extraFirstClass = $loop->current_post == '0' ? ' main-image-porfolio-main' : ''; ?>
<?php
$attributes = array(
"class" => "main-image portfolio " . $extraFirstClass,
"id" => "photo_{$post->ID}",
);
the_post_thumbnail("portfolio_thumb", $attributes);
?>
<?php endwhile; ?>
<?php rewind_posts(); ?>
<div class="portfolio-box">
<h5>Portfolio</h5>
<ul class="item-list" id="portfolio-list">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="<?php echo $post->ID; ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
How can I do it?
As previously answered by me here, I would use PHP for
. However, if for some reason you don't want that, I don't think you would need to resort to two loops for this. You can do the following:
<?php
$args = array( 'post_type' => 'portfolio', 'order' => 'dsc');
$loop = new WP_Query( $args );
$first = $loop->posts[0];
$attributes = array(
"class" => "main-image portfolio",
"id" => "photo_{$loop->posts[$i]->ID}",
);
<div class="main-interior portfolio" id="portfolio-big-pics" style="display: block;">
for( $i = 0; $i < count($loop->posts); $i++ ) {
$attrs = $attributes;
$attrs["class"] .= $i === 0 ? ' main-image-portfolio-main' : '';
echo get_the_post_thumbnail( $loop->posts[$i]->ID, "portfolio_thumb", $attrs );
}
echo get_the_post_thumbnail( $first->ID, "portfolio_thumb", $attrs );
?>
<div class="portfolio-box">
<h5>Portfolio</h5>
<ul class="item-list" id="portfolio-list">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" rel="<?php echo $post->ID; ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
<li>
<a href="<?php echo get_permalink($first->ID);?>" rel="<?php echo $first->ID; ?>"><?php echo $first->post_title;?></a>
</li>
</ul>
</div>
</div>
here is the code, edit it according to your needs:
$(document).ready(function()
{
var imagesrc = $(".example post's image class").attr("src");
$(".the container or post after which you want to put your image").appendTo("<img src='"+imgsrc+"' alt='image' />");
});