[Resolved] post content in bootstrap lightbox

[Author]

Posts

[emilyr]

hi–

following this thread: https://toolset.com/forums/topic/using-a-lightbox-in-my-view-to-display-view-content-template/
i've managed to somewhat get my post content to appear in a lightbox when a small icon is clicked. so far, there are two things i cannot figure out:

1- the post content that appears does not match the post that is clicked (the wrong person's bio is showing up)
2- when i click the "x" to close the modal, the whole screen stays dark

how can i fix these two issues?

site is here: hidden link
site password: beets

thanks,
emily

[Christian Cox]

Hi, please refer to the other ticket for a recommendation here. Notice in Beda's response that the "a" tag is closed before the modal element begins:
https://toolset.com/forums/topic/using-a-lightbox-in-my-view-to-display-view-content-template/#post-343358

<a href="#" class="btn btn-info" data-toggle="modal" data-target="#myModal">
    View Text
</a>
 
<div class="modal fade" id="myModal" role="dialog">
...

This is something that needs to be fixed in your View. Also, you have multiple modal elements with the same id "myModal". This won't work, because each modal and its matching trigger "a" tag need to have the same ID so they can talk to each other effectively. This ID it needs to be different from the other modal IDs. So when building the HTML here, you should append a unique identifier to each trigger and modal, like the post ID:

<a href="#" class="btn btn-info" data-toggle="modal" data-target="#myModal-[wpv-post-id]">
    View Text
</a>
 
<div class="modal fade" id="myModal-[wpv-post-id]" role="dialog">

Those are the first two things I would try, then let me know if you're still experiencing issues and I can take another look.

[emilyr]

hi christian— thanks for taking a look!

i did as you suggested, and things are looking good with one exception—im now getting everyone's bio appearing on every post. how can i limit the view to only show only the persons bio ?

[Christian Cox]

You should apply a Query Filter to the People Bios View. If you cannot see the Query Filter panel, you can enable it in the Screen Options tab at the top of the editor screen.

You only want to show the Bio of the current person, so you should filter by post ID, where post ID is set by a Views shortcode attribute called "ids". This means that we can supply the person ID from the current People Grid View item as our filter criteria. Modify the View shortcode in your People Grid View Loop Content Template:

[wpv-view name="people-bios" ids="[wpv-post-id]"]

This shortcode now tells Views to place the People Bios View, and pass in the current post ID as the filter criteria. Then the filter in the People Bios View knows which Bio to display, and filters out all the unrelated ones. This process is called "passing arguments into Views" and is described in detail here:
https://toolset.com/documentation/user-guides/passing-arguments-to-views/

[emilyr]

Boom! i fussed around with those for a bit but couldn'g figure out the right combo. THANKS so much for taking a look and for the explanation as well. so often im not quite sure what each bit of code is doing :/

so i also just updated views and noticed that my font awesome icons are gone. any idea what's up there, or should i start a new thread about that?

again, THANKS.

[Christian Cox]

so i also just updated views and noticed that my font awesome icons are gone. any idea what's up there, or should i start a new thread about that?
Hmm, not sure offhand so let's address that in a separate ticket if you don't mind.

[emilyr]

Terrific support— Thanks so much!