2

I have a channel named Bios that has six fields of information per person. I want to dynamically generate a bootstrap modal with the selected person’s bio info when their photo is selected from a page. I see I can hard code it for a single person using entry_id but is there any way else to pull the correct data without resorting to making a template for each person and using the URL segment variables?

This is my first time working with ExpressionEngine for a site build. I tested it out using entry_id just to make sure I was pulling the channel fields correctly:

<div class="modal" id="bioModal">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header text-blue">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    {exp:channel:entries channel="bios" entry_id="9"}
          <img src="{bio_photo}" class="bio-photo img-responsive" alt="bio photo">
          <div class="bio-header">
            <h4 class="modal-title">{bio_name}</h4>
            <h5 class="modal-title">{job_title}</h5>
          </div>
        </div>
        <div class="modal-body text-black">
          <p class="bio-details">{bio_details}</p>
        </div>
    {/exp:channel:entries}
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>
Improve this question

1 Answer 1

Reset to default
0

If you'd like to generate a div.modal for each of the entries in your bios channel, this is approximately what you're looking for, I think:

{exp:channel:entries channel="bios" dynamic="no"}
<div class="modal" id="bioModal">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header text-blue">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <img src="{bio_photo}" class="bio-photo img-responsive" alt="bio photo">
          <div class="bio-header">
            <h4 class="modal-title">{bio_name}</h4>
            <h5 class="modal-title">{job_title}</h5>
          </div>
        </div>
        <div class="modal-body text-black">
          <p class="bio-details">{bio_details}</p>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>
{/exp:channel:entries}

The "dynamic='no'" prevents the exp:channel:entries loop from guessing which entry you're trying to view based on the URL.

I think that's what you were getting at... follow up if not.

Improve this answer
3
  • 1
    As written is going to give you multiple modals all with the id "bioModal". This is invalid html and will break the modal display action which is based on the id. Something like id="bioModal_{entry_id}" would fix this. You'll then have to dynamically create the buttons that fire the modal as well: <a href="#bioModal_{entry_id}" role="button" data-toggle="modal"> This means two EE calls. Might be better to look for a way to load the contents of the modal dynamically (which is not built in to twitter bootstrap).
    – AllInOne
    Jan 21, 2015 at 23:57
  • Nick The "dynamic=no" wasn't quite what I was looking for although the functionality of limiting the channel entries loop is good to know. I'm going to have to do some additional setup to get AllInOne's solution to work but I believe that's the direction I need to go.
    – ryoungz
    Jan 22, 2015 at 13:49
  • @AllInOne can you make your comment an answer so I can mark it answered?
    – ryoungz
    Feb 1, 2015 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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