0

I'm using Foundation V4 framework within a child theme for a website.

I currently have the wordpress post loop outputting all the content as per normal, for images I plan to do something a little different and output the posts featured image into foundations modal view and output a link to trigger the modal view, only if the conditions that a featured image exists.

I have attempted to output the images into the modal for each post within the loop with no such look, this does work without a foreach statement, however it outputs the same featured image into each modal code.

Any help would be greatly appreciated!

 <?php query_posts('cat=5'); ?>
      <?php
      if ( have_posts() ) : while ( have_posts() ) : the_post(); 
       ?>
      <div class="small-12 large-6 columns">
        <div class="menu_item 
        <?php
          $posttags = get_the_tags();
          if ($posttags) {
            foreach($posttags as $tag) {
              echo $tag->name . ' ';
            }
          }
        ?>">
        <div class="small-12 large-8 columns">
          <div class="item_title">
            <h3><?php the_title() ?></h3>
          </div>
          <div class="item_content hide-for-small">
            <?php the_content(); ?>
          </div>
          <div class="dietary_info">
            <ul>
              <?php
                $posttags = get_the_tags();
                if ($posttags) {
                  foreach($posttags as $tag) {
                    echo "<li class='$tag->name'></li>";
                  }
                }
              ?>
              <?php 
                if (has_post_thumbnail() ) {
                  echo "<li><a href='#' class='photo' data-reveal-id='myModal'></a></li>";
                  foreach(has_post_thumbnail())
                  {
                    echo "<div id='myModal' class='reveal-modal tiny' data-reveal aria-labelledby='modalTitle' aria-hidden='true' role='dialog'>".the_post_thumbnail();."</div>";
                  }
                } 
              ?>
            </ul>
          </div>
        </div>
        <div class="small-12 large-4 columns">
          <?php if (get_field ('item_price') ) : ?>
              <p>£ <?php echo the_field ('item_price'); ?></p>
          <?php endif; ?>
          <?php if (get_field ('item_price_2') ) : ?>
              <p>£ <?php echo the_field ('item_price_2'); ?></p>
          <?php endif; ?>
        </div>
      </div>
    </div>
  <?php endwhile; endif; ?>
0

first, read this about query_posts.

to answer your question-

has_post_thumbnail() returns true or false, iterating over that in a foreach loop isn't possible.

I'll guess that the reason why the same modal appears to be repeated is that you're giving them all the same id, so the first one is always opened. Use the post's ID to make those unique to each post.

if (has_post_thumbnail() ) {
    echo '<li><a href="#" class="photo" data-reveal-id="myModal' . get_the_ID() . '"></a></li>';
    echo '<div id="myModal' . get_the_ID() . '">' . get_the_post_thumbnail() . '</div>';
}
  • Thanks for your reply Milo, i have tried what you have suggested, however the id for the modal is purely there so that foundation can apply the correct styles. The issue resides within the modal, which now contains . get_thepost_thumbnail() . and still seems to show the same image – Matt Meadows Mar 17 '15 at 1:51
  • I doubt the ID is solely for styling, why would the link have a data-reveal-id attribute containing the value of that ID if that was the case? Have you looked at the page source and verified that each instance of the modal has the same src in every img tag? – Milo Mar 17 '15 at 2:08
  • On further inspection of the img tags within each of the modals, you are correct in assuming that they are in fact different (the image src that is) – Matt Meadows Mar 17 '15 at 13:58
  • Milo, after looking into this a little further you were correct in saying that the ID's were doing more than just styles, as you had stated, a unique id was required for each modal produced to be triggered by the corresponding link button. Thank you! – Matt Meadows Mar 17 '15 at 18:05

Your Answer

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

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