display WP image posts in Bootstrap 4 modal

by

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="https://wordpress.stackexchange.com/questions/337684/<?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. =)

Leave a Comment