Jump to content

Staff Bio Pop Up Box


Rob Pearson
 Share

Recommended Posts

Greetings, for the past few days i've been having trouble trying to add a "View Bio" button which would open a popup with that persons staff biography.
Currently i've got:

{{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
    <br>
    <div class='ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
{{endif}} 

Below is an image of how the message opens. We would like the Bio to do the same

https://i.gyazo.com/23ae919acd6e5c1c51078107496511f4.mp4

It gets the information for the users bio, but i have no idea on how to make it display in the middle of your screen via pop-up, kind of like the message module/button does, on the staff directory.

Any tips and help are greatly appreciated :)

Edited by Rob Pearson
Link to comment
Share on other sites

Hello @Jacques Corby-Tuech thank you for highlighting that.

When using the ips.ui.dialog i get this error

c26656e2a9da7f265681d369992f28aa.png

This is my code

          <a href='elementWithDialog' data-ipsDialog data-ipsDialog-url='elementWithDialog'>Launch dialog</a>
          
          
<div id='elementWithDialog' data-ipsDialog>
<!--PULL USER BIO --> {{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
    <br>
    <div class='ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
<!-- END USER BIO--> {{endif}} 
</div>

<script>
var dialog = ips.ui.dialog.getObj( $('#elementWithDialog') );         
          </script>

Thanks

Link to comment
Share on other sites

We have been successful in creating the box but we have encountered a small problem

It does not display the correct information to match the staff members description. But instead they seem mixed up. How do we put a check in place or what script is required to ensure the correct description matches the staff member.

56ea93b35c5d733f6f05078710b0757c.png

As you can see we clicked on Levi but is shows EpicFail's information. Any ideas?

Link to comment
Share on other sites

  • 2 weeks later...
{{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
<a href='#' data-ipsDialog data-ipsDialog-content='#bio_{$user->id}'>View Bio</a>
<!--PULL USER BIO --> 
<div id='bio_{$user->id}' class='ipsHide ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
<!-- END USER BIO--> 
{{endif}} 

this should be correct @Rob Pearson

Link to comment
Share on other sites

Thanks BomAle.

I appreciate you taking the time to find a solution to the problem i posted about. We have since completely redesigned and created a custom staff page. You can take a look if you like.

https://www.britishborders.co.uk/staff-team

Having the pop out box as an option, as you have created above, i'm sure would be a feature that many other communities/forums would like and benefit from.

Thanks once again

Rob

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...