Champs ACF dans modal Bootstrap

Bonjour à tous,

Je travaille actuellement sur un site. Pour le personnaliser au mieux j'utilise ACF.
Je suis confrontée à un problème depuis une semaine qui me rend complètement marteau .
En effet, j'ai une galerie d'images qui s'affiche sur ma page web. En dessous de chaque image pour le moment un bouton modal. J'aimerais lorsqu'on clique dessus les champs personnalisés s'affichent. Bon, cella fonctionne mais le contenu est toujours le même à chaque modal. Si vous pouviez m'aider ça serait top top top. Merci à tous.

<div class="<?php echo $termsString; ?> item col xl3 l3 m3 s12"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
            <h3><?php the_title(); ?></h3>
            <img class="imagelitho" src="<?php the_field('image'); ?>" />
            <!-- Button trigger modal -->
            <a class="btn btn-primary btn-lg"  href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">Launch demo modal</a>
           
        </div> <!-- end item -->
        <!-- Modal -->
        <div id="myModal-<?php echo $i; ?>" class="modal fade" tabindex="-1">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Get to the Front of The Queue</h4>
                    </div>
                    <div class="modal-body">
                        <img class="imagelitho"   src="<?php the_sub_field('image'); ?>" > 
                    </div>
                    <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->

    <?php endif; ?>

Modifié par Orangelektrik (26 Jan 2019 - 00:23)

J'ai résolu le problème!!!! voici le code si ça peut servir à d'autre.
Et le lien d'explication pour la modal :
https://coolestguidesontheplanet.com/use-bootstrap-modals-wordpress-themes/
Et celui pour le php :
https://stackoverflow.com/questions/40044525/how-do-i-get-a-bootstrap-modal-to-work-and-open-for-each-slidecustom-post-types

<?php $i = 0;?>
    <?php $the_query =  new WP_Query( array( 'post_type' => 'lithographie') ); ?> 
    <?php if ( $the_query->have_posts() ) : ?>

    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
        $termsArray = get_the_terms( $post->ID, "categorie" );  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
            $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }

        ?> 
        <div class="<?php echo $termsString; ?> item col xl3 l3 m3 s12"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
            <h3><?php the_title(); ?></h3>
            <img class="imagelitho btn btn-primary btn-lg" data-toggle="modal" src="<?php the_field('image'); ?>" href="#" data-target="#myModal-<?php echo $i; ?>"/>
            <!-- Button trigger modal -->
<!--            <a class="btn btn-primary btn-lg"  href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">Launch demo modal</a>-->
            
        </div> <!-- end item -->

        <div id="myModal-<?php echo $i; ?>" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <!--                        <button class="close" type="button" data-dismiss="modal">×</button>-->
                        <h4 class="titrepage"><?php the_title(); ?></h4>
                    </div>
                    <div class="modal-body">
                        <img class="imagelitho" src="<?php the_field('image'); ?>" />

                    </div>
                    <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button>

                    </div>
                </div>
            </div>
        </div>
        <?php $i++;?>

        <?php endwhile;  ?>
        <?php endif; ?>

Modifié par Orangelektrik (26 Jan 2019 - 16:01)