0

This question relates directly to a previous question I asked in Wordpress StackExchange: display WP image posts in Bootstrap 4 modal that was superbly solved by Sally CJ

I further developed the solution by adding a title to the modal image BUT now the client wants to put the WP post Meta details inside the modal as well. I have tried to further develop the original solution but all my attempts have failed.

This is the complete code-block which calls the modal:

<div class="row">
    <?php
       global $query_string;
       query_posts( $query_string . '&posts_per_page=-1' );
    ?>
                        
    <?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(); ?>" data-image="<?php the_post_thumbnail_url(); ?>" data-title="<? 
                  php echo the_title(); ?>">
                     <?php $post_id = get_the_ID(); ?>
                     <?php the_post_thumbnail(); ?>
                  </a>
                  <br />
                  <span class="fontBrand1 fontType1 text"><?php echo the_title(); ?></span>
                  <span class="fontBrand2 fontType1 smallText">&nbsp;<?php echo get_post_meta($post- 
                  >ID, 'Materials', true); ?>&nbsp;<?php echo get_post_meta($post->ID, 'Dimensions', 
                  true); ?>&nbsp;<?php echo get_post_meta($post->ID, 'Price', true); ?></span>
              </div><!-- /.divPad -->
          </div>
                               
      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>
                   
</div><!-- /.row -->

And this is the actual modal code:

<div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-labelledby="galleryModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <?php the_post_thumbnail($post_id); ?>
                <?php echo get_the_title($post_id); ?>

            </div>
        </div><!-- /.modal-content -->
    </div>
</div><!-- /#galleryModal -->

I am trying to rewrite these code lines from the main code block to the modal block, so that the Meta details are displayed in the modal. Once this has been achieved the details will be removed from the main block.

<span class="fontBrand2 fontType1 smallText">&nbsp;<?php echo get_post_meta($post- 
>ID, 'Materials', true); ?>&nbsp;<?php echo get_post_meta($post->ID, 'Dimensions', 
true); ?>&nbsp;<?php echo <span class="fontBrand2 fontType1 smallText">&nbsp;<?php echo get_post_meta($post- 
                  >ID, 'Materials', true); ?>&nbsp;<?php echo get_post_meta($post->ID, 'Dimensions', 
                  true); ?>&nbsp;<?php echo get_post_meta($post->ID, 'Price', true); ?></span> ?></span>

I suspect the problem is being caused by my not being able to correctly alter

<?php echo get_post_meta($post->ID, 'Materials', true); ?> 

to

<?php echo get_post_meta($post_id, 'Materials', true); ?>

Note that the $post_id variable was created in the main block with <?php $post_id = get_the_ID(); ?> and has already been used successfully to display both image and title in the modal already... However, and despite many and varied attempts, I've not been able to use the same variable to display the Meta details

I hope I've managed to explain the problem clearly enough and happy to supply any further details that might be needed. Any help you can give will be very much appreciated. Thanks

2
  • 1
    This is actually a JS question, and you would want to wrap the post metadata in a parent element (e.g. div) and give it a CSS class like meta, then use something like button.closest( 'div' ).find( '.meta' ).html() to get the div HTML. Try a demo here. And BTW, your script contains invalid HTML (<div class="horizBuffer2" - the tag is not closed). – Sally CJ Jan 18 at 3:20
  • 1
    And note that the_permalink() and the_title() echo the output, so for example, don't do echo the_title(). Also, please avoid using query_posts(). – Sally CJ Jan 18 at 3:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.