display WP image posts in Bootstrap 4 modal

Question

I have a series of image posts displayed on a page of a WP site that uses Bootstrap 4

The images normally display in a larger size when they're clicked on but I want to display them in a dropdown modal _ The problem is that when I implement the modal it only displays the last post on the page NOT the image that was clicked on _

I realise this is because I need to get the post ID and add the same ID to the modal code _ However, I have tried several ways of doing this but not been successful

this is the code I currently have on the page >>>

<?php get_header(); ?>
        
        <div class="container fadeIn" id="perimeter">
            
            <section class="gallery" id="mainGallery">
                <div class="container">
                    <div class="row">
                        <?php $featured_query = new WP_Query( array(
                            'category_name' => 'canvas'
                        )); ?>
                        
                        <?php while($featured_query->have_posts()) : 
                            $featured_query->the_post(); ?>
                                <div class="col-md-6">
                                    <div class="divPad">
                                        <a data-toggle="modal" data-target="#galleryModal" href="<?php echo the_permalink(); ?>">
                                            <?php the_post_thumbnail(); ?>
                                            <?php $post_id = get_the_ID(); ?>    
                                        </a>
                                        <br />
                                        <span class="fontBrand1 fontType1 text"><?php echo the_title(); ?></span>
                                        <span class="fontBrand2 fontOpenSans smallText"><?php echo get_post_meta($post->ID, 'Materials', true); ?><?php echo get_post_meta($post->ID, 'Dimensions', true); ?><?php echo get_post_meta($post->ID, 'Price', true); ?></span>
                                    </div><!-- /.divPad -->
                                </div>
                        <?php endwhile; ?>
                   
                    </div><!-- /.row -->
                </div><!-- /.container -->
            </section><!-- /#mainGallery -->
            
            <div class="horizBuffer2"></div>
        </div><!-- /#perimeter -->
        
        <!-- modal -->
        <div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-labelledby="galleryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    
                    <div class="modal-header">
                        <h5 class="modal-title" id="galleryModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <?php the_post_thumbnail(); ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div>
        </div><!-- /#galleryModal -->
        
<?php get_footer(); ?>

Any help would be greatly appreciated _ thanks

Answer 1

I realise this is because I need to get the post ID and add the same ID to the modal code

No, that's not true in your case. If you want to use a single modal for all the different images — i.e. a different image is displayed in the modal based on the button/link which triggers the modal (or simply, the button/link that was clicked), you need JavaScript to achieve that, just as what stated in the Bootstrap 4's Modal documentation — and after all, the modal itself is a JavaScript plugin:

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

So based on the example there and your code:

Option 1: You can simply use this script to replace the modal content with the inner HTML of the button/link which triggers the modal:

jQuery( function( $ ){
    $( '#galleryModal' ).on( 'show.bs.modal', function ( event ) {
        var button = $( event.relatedTarget ); // Button/link that triggered the modal
        var modal = $( this );

        // Update the modal's content.
        modal.find('.modal-body').html(
            button.html()
        );
    });
});

Option 2: Or use the data-* attribute for more control such as displaying a larger preview of the post thumbnail. And here I use data-image and large as the thumbnail size:

1. Add the data-image: (wrapped for clarity)

   <a data-toggle="modal" data-target="#galleryModal" href="<?php echo the_permalink(); ?>"
     data-image="<?php the_post_thumbnail_url( 'large' ); ?>">
   

   See the reference if you need help with the the_post_thumbnail_url().

2. Add the script: (take note of the new image variable)

   jQuery( function( $ ){
       $( '#galleryModal' ).on( 'show.bs.modal', function ( event ) {
           var button = $( event.relatedTarget ); // Button/link that triggered the modal
           var image = button.data( 'image' );    // Get the image URL from the data-image
                                                  // attribute of the button/link above.
           var modal = $( this );
   
           // Update the modal's content.
           modal.find('.modal-body').html(
               '<img src="' + image + '" alt="" />'
           );
       });
   });
   

Note that you should place the script in an external JavaScript file (e.g. in wp-content/themes/your-theme/custom.js) and load the file via the theme's functions.php file. Or wrap the script code with <script> and </script> tags and then add the script in the footer.php or header.php file. ( Check this article if you need help. You can also search on WPSE. :) )

And in the modal-body DIV, you don't need the the_post_thumbnail().. or you can change it to Loading... or display a "special" image/content which serves similar purposes like a video's poster image. But then, it's just a suggestion. =)