Want to images load first then title in WordPress loop

1 Views

ok I’m creating a portfolio page. I want all the images of the portfolio post stack together. & when visitors hover their mouse in any of the title the image ll show.

for this I’ve created this loop:

Read More
<div class="main-interior portfolio" id="portfolio-big-pics" style="display: block;">
<?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';?>
<?php the_post_thumbnail( "thumbnail", array( "class" => "main-image portfolio $extraLastClass" ) ); ?>

            <div class="portfolio-box">

                <h5>Portfolio</h5>
                <ul class="item-list" id="portfolio-list">
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>               
                </ul>

            </div>

 <?php endwhile; ?>            
</div>

as you can see my images & titles are within the loop. it prints out like: first image & first title, then second image & second title, third image+third title & so go on… what I want is print out all the images first & then the titles. like: first image, second image, third image & then first title, second title, third title. Basically from my code, all the images of the portfolio item ll load first & then the “portfolio-box” div. screenshot attached.
enter image description here

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. use <?php rewind_posts(); ?> 

    <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';?>
<?php the_post_thumbnail( "thumbnail", array( "class" => "main-image portfolio $extraLastClass" ) ); ?>
<?php endwhile; ?> 

<?php rewind_posts(); ?> 

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="portfolio-box">
        <h5>Portfolio</h5>
        <ul class="item-list" id="portfolio-list">
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>               
        </ul>
    </div>
<?php endwhile; ?>

  2. What you want is so simple. Just get out the titles from the loop, and then create the same loop again, with titles. An alternative way, if you collect the data into an array in 1 loop, and use that to show images and then pictures, so you need to run only once the query.

    <div class = "main-interior portfolio" id = "portfolio-big-pics" style = "display: block;">
    <?php
    $args = array('post_type' => 'portfolio', 'order' => 'ASC');
    $loop = new WP_Query($args);
    while ($loop->have_posts()) :
        $loop->the_post();
        $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';
        the_post_thumbnail("thumbnail", array("class" => "main-image portfolio $extraLastClass"));
    endwhile;
    ?>
</div>
<!-- HERE COMES THE TITLE SECTION -->
<div class="portfolio-titles">
    <?php
    $args = array('post_type' => 'portfolio', 'order' => 'ASC');
    $loop = new WP_Query($args);
    while ($loop->have_posts()) :
        $loop->the_post();
        ?>
        <div class="portfolio-box">
            <h5>Portfolio</h5>
            <ul class="item-list" id="portfolio-list">
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>               
            </ul>
        </div>
        <?php
    endwhile;
    ?>
</div>