AnswerBun.com

Displaying all the images from all of my articles

WordPress Development Asked on December 22, 2020

I’m trying to replicate that codepen but using php wordpress. Basically I want my blogpost images displaying in another div and it changes every time you select another menu.

Thanks for the help.
Here is my code:

<?php 
$images = get_field('gallery');
if( $images ): ?>
<ul>
    <?php foreach( $images as $image ): ?>
        <li>    
                    <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <p><?php echo esc_html($image['caption']); ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

I have noticed that $images = get_field('gallery'); stores the image of the latests post before its called. So I guess it has something to do with that. Now I wish I could just get all the images somewhere and apply them a data id corresponding to my articles. That is why I have a $counter = -1;.

Here is the complete code:

<div class="four">



    <?php
    $counter = -1;
// the query
    $all_posts = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1 ) );

    if ( $all_posts->have_posts() ) :
        ?>

        <ul>
            <?php while ( $all_posts->have_posts() ) : $all_posts->the_post(); $counter++ ?>
                <li class='sub-menu'> <a href='#' class="exposition"  data-id="divId<?php echo $counter; ?>"><?php the_title(); ?></a>  <ul>
                    <li><?php the_content(); ?>

                </li>
            </ul>
        </li>
    <?php endwhile; ?>
</ul>

<?php else : ?>
<?php endif; ?>



</div>
<div class="five">

<?php 
$images = get_field('gallery');
if( $images ): ?>
    <ul>    <div class="slide-photos" id="divId<?php echo $counter; ?>" data-id="divId<?php echo $counter; ?>"> 
        <?php foreach( $images as $image ): ?>
            <li>    
                <div class="photos-ind"><img id="divId<?php echo $counter; ?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="divId<?php echo $counter; ?>"/></div>
            </li>
        <?php endforeach; ?>
           </div>
    </ul>
<?php endif; ?>


</div>
</div>

All it does from now, is just displaying the latests post’s images correctly, what I would like is that its able to detect which post i’m clicking and display the image corresponding.

Add your own answers!

Related Questions

How to pass parameters (data) from plugin PHP to React

4  Asked on November 9, 2021 by gilbert-mizrahi

 

Get the post ID and display the images

1  Asked on November 9, 2021

   

Admin user column sort by numeric meta key

0  Asked on November 9, 2021 by david-sticker

     

Admin role not really admin

1  Asked on November 6, 2021 by adrian-le-roy-devezin

   

Jquery Validation Engine with Conatct Form 7

1  Asked on November 6, 2021 by magecode

 

How many post WordPress can handle?

1  Asked on November 6, 2021 by kabir

   

Bad request 400 from custom ajax call

3  Asked on November 6, 2021 by jpl

   

How to add custom preview urls for some pages?

0  Asked on November 6, 2021 by haxpanel

   

Password protect directory but not files

1  Asked on October 30, 2021

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP