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"> <?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; ?>
<?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">×</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"> <?php echo get_post_meta($post-
>ID, 'Materials', true); ?> <?php echo get_post_meta($post->ID, 'Dimensions',
true); ?> <?php echo <span class="fontBrand2 fontType1 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> ?></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
div) and give it a CSS class likemeta, then use something likebutton.closest( 'div' ).find( '.meta' ).html()to get thedivHTML. Try a demo here. And BTW, your script contains invalid HTML (<div class="horizBuffer2"- the tag is not closed).the_permalink()andthe_title()echo the output, so for example, don't doecho the_title(). Also, please avoid usingquery_posts().