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.
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP