php - Get the post ID and display the images

So I'm making a website divived in two parts, one is for the text, and the other part is for the images. What I'm trying to do, is to display the specific images belonging to each post. I'm also using Advanced Custom Fields to make it easier for me. So I know can have my id post using:

global $post; echo $post->ID;

What I don't know, is how to display the images corresponding to that.

here is my code:

<?php 

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

I also have that javascript

    $(document).ready(function(){
  $(".exposition").on('click',function(){

   var hello = $(this).attr('data-id');
   $('.slide-photos').hide();
   $('[id='+ hello + ']').show();
   $('[id='+ hello + ']').flickity({
 wrapAround: true, lazyLoad: 2, selectedAttraction: 0.1,
friction: 0.5, cellAlign: 'left', adaptiveHeight: false, imagesLoaded: true, 
   });
   console.log('[id='+ hello + ']');
 });

});

So I'm making a website divived in two parts, one is for the text, and the other part is for the images. What I'm trying to do, is to display the specific images belonging to each post. I'm also using Advanced Custom Fields to make it easier for me. So I know can have my id post using:

global $post; echo $post->ID;

What I don't know, is how to display the images corresponding to that.

here is my code:

<?php 

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

I also have that javascript

    $(document).ready(function(){
  $(".exposition").on('click',function(){

   var hello = $(this).attr('data-id');
   $('.slide-photos').hide();
   $('[id='+ hello + ']').show();
   $('[id='+ hello + ']').flickity({
 wrapAround: true, lazyLoad: 2, selectedAttraction: 0.1,
friction: 0.5, cellAlign: 'left', adaptiveHeight: false, imagesLoaded: true, 
   });
   console.log('[id='+ hello + ']');
 });

});

• php
• images

Share Improve this question edited Jul 21, 2020 at 14:39 pual asked Jul 21, 2020 at 14:33 pualpual 11366 bronze badges 2

• Your code has get_field(). Are you using Advanced Custom Fields to add images to a post? – Jacob Peattie Commented Jul 21, 2020 at 14:37
• Yes, I'm using Advanced Custom Fields to have all of my images in a gallery so it's easier for the ones using it. – pual Commented Jul 21, 2020 at 14:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As far as I know get_field() function will return the response according to the current post (There's no need to specify the post ID). But if you want to specify the post ID then you have to type it in the second argument, like:

get_field( $selector, $post_id );

So your code would be like this:

<?php

global $post;

$post_id = 0 !== $post->ID ? $post->ID : false;
$images  = get_field( 'gallery', $post_id );

if ( $images ): ?>
// Your content.
<?php endif; ?>

Do not use $post->ID directly in the second argument because the value might be 0 sometimes if WP_Query fails. If that happens use false to target the current post.

Check the resources:

https://www.advancedcustomfields.com/resources/get_field/