0

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

1 Answer 1

2

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. =)

9
  • thanks for this Sally _ I'm a bit confused tbh _ Did you get a chance to visit the page I linked to? Everything is working except that the wrong post / image is being displayed in the modal _ Whatever post is last added to the page is the one being displayed _ So i think this is more a question of using the inbuilt Wordpress post ID rather than relying on Bootstrap functionality to try and resolve the issue _ it's really how to use the Wordpress post ID is what I need _ but thanks again May 11, 2019 at 20:43
  • Yes, I understand it - and you could try wp_reset_postdata(); (which you should've called after the endwhile, anyway..) but it won't work for what you're trying to do. But you see, you'd only be using one modal; otherwise, you could move the modal into the while loop and the post ID would work. But really, the modal is a JavaScript thing and if you want to be able to display varying content, please consider trying what I suggested in the answer. And yes, the first thing I did after reading this question was visiting the link you provided.
    – Sally CJ
    May 11, 2019 at 20:50
  • aha! _ I only want to use one modal Sally _ but for it the same modal to display whichever image is clicked on _ I will add the wp_reset_postdata() as you stated but just to be clear _ Are you advising put all of the code for the modal inside the while loop? (Thanks for checking the link) May 11, 2019 at 20:55
  • 1
    and not supposed to use comment to say thanks but I really am very grateful for your input : ) May 11, 2019 at 21:06
  • 1
    You're welcome, @maik. And although you already got it working, I revised the answer and hopefully it's more clear now - and helpful to other users as well. :) Cheers and all the best!
    – Sally CJ
    May 11, 2019 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.