templates/areas/staff-members/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="settings">
  3. <strong class="settings-header">Staff Member Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  4. <div class="settings_container">
  5.     <div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
  6.         <div>Is Bio Popup Active</div>
  7.         <div>{{ pimcore_checkbox("bioPopupActive", {reload: true} ) }}</div>
  8.     </div>
  9.     <div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
  10.         <div>Max Width on Content</div>
  11.         <div>{{ pimcore_numeric("maxWidth") }}</div>
  12.     </div>
  13.     <div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
  14.         <div>Max Width on Images</div>
  15.         <div>{{ pimcore_numeric("imgMaxWidth") }}</div>
  16.     </div>
  17.     <div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
  18.         <div>Image Alignment</div>
  19.         <div>
  20.         {{ 
  21.             pimcore_select("imageAlignment", {
  22.                 "store": [
  23.                     ["left", "Left"],
  24.                     ["center", "Center"],
  25.                     ["right", "Right"]
  26.                 ]
  27.             }) 
  28.         }}
  29.         </div>
  30.     </div>
  31. </div>
  32. </div>
  33. {% endif %}
  35. <!-- Add a dropdown/select/number field to select a limit of staff members to show here -->
  36. {% set staffMembers = app_staff_members_get() %}
  37. {% set maxWidth = pimcore_numeric("maxWidth").getData() ? ' style=max-width:' ~ pimcore_numeric("maxWidth").getData() ~ 'px;' : '' %}
  38. {% set imgAlignment = pimcore_select("imageAlignment").getData() == 'left' ? '' : pimcore_select("imageAlignment").getData() == 'center' ? ' auto-margins' : pimcore_select("imageAlignment").getData() == 'right' ? ' img-align-right' : '' %}
  39. {% set imgMaxWidth = pimcore_numeric("imgMaxWidth").getData() ? ' style=max-width:' ~ pimcore_numeric("imgMaxWidth").getData() ~ 'px;' : '' %}
  40. {% if staffMembers and staffMembers|length > 0 %}
  41.     <div class="staff-members">
  42.         <div class="inner">
  43.             <div class="row gutter-space--md"{{maxWidth}}>
  44.                 {% for staffMember in staffMembers %}
  45.                 {% set linkedInUrl = staffMember['linkedInUrl'] ? '<a class="linkedin-icon" href="' ~  staffMember['linkedInUrl'] ~ '" target="_blank"><i class="fa fa-linkedin"></i></a>' : '' %}
  46.                     <div data-aos="fade-up" class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 text-align-center">
  47.                         <div class="card">
  48.                             <div class="card-content">
  49.                                 <div class="circle-image{{imgAlignment}}"{{imgMaxWidth}}>
  50.                                     {% if pimcore_checkbox('bioPopupActive').getData() %}
  51.                                     <a href="javascript:void(0);" data-id="{{ staffMember['id'] }}" data-bio="{{ staffMember['bio'] }} {{ linkedInUrl }}" id="{{ staffMember['id'] }}" class="btn-modal" style="display: block;">
  52.                                     {% endif %}
  53.                                         {{ staffMember['profileImageThumbnail'] | raw }}
  54.                                     {% if pimcore_checkbox('bioPopupActive').getData() %}
  55.                                     </a>
  56.                                     {% endif %}
  57.                                     
  58.                                 </div>
  59.                                 <p style="margin-top: 15px;"><strong>{{ staffMember['name'] }}</strong><br>{{ staffMember['position'] }}</p>
  60.                                 {{ linkedInUrl | raw }}
  61.                             </div>
  62.                         </div>
  63.                     </div>
  64.                 {% endfor %}
  65.             </div>
  66.         </div>
  67.     </div>
  68. {% endif %}