Displaying all the images from all of my articles
basically, I’m trying to get all the images from all of my articles somewhere to give them then a data id and to display them when you click the title.
What I want to do is to get all of my image somewhere and be able to display them in my div id="five"
, but since I’m new, I don’t really see how to do that.
Here is a pen showing what I mean but that Is static.
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 previous post. 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>
<?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>
Leave an answer