polyglot/app/views/pages/_contact.html.erb

<div class="card">
  <div class="info">
    <% if contact.photo.url.nil? %>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=65>
    <% else %>
      <%= cl_image_tag(contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65, transformation: [
          { gravity: "face:auto", width: 500, height: 500, radius: "max", crop: "crop" }
        ])%>
    <% end %>
    <div class="text text-color">
      <% if contact.first_name.nil? || contact.last_name.nil? %>
        <p><%= contact.email %></p>
      <% else %>
        <p><%= contact.first_name %> <%= contact.last_name %></p>
      <% end %>
      <p class="darker">Last call: <%= Time.now %></p>
    </div>
  </div>
  <div class="call" data-user-id="<%= contact.id %>">
    <!-- Calls establish_call in pages_controller -->
    <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do  %>
      <i class="fas fa-phone"></i>
    <% end %>
  </div>
   <%= link_to connection_path(contact), method: :delete do %>
   <button type="button" class="close close-location" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>
   <% end %>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
      <div class="modal-content modal-color">
        <div class="modal-header">
          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do  %>
            <i class="fas fa-times-circle"></i>
          <% end %>

            <div class="modal-container">
              <% if contact.photo.url.nil? %>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
              <% else %>
                <%= cl_image_tag(contact.photo, class: "profile avatar dropdown-toggle img-circle modal-picture", width:150, transformation: [
          { gravity: "face:auto", width: 500, height: 500, radius: "max", crop: "crop" }])%>
              <% end %>
              <div class="modal-text">
                <h4 class="modal-title" id="myModalLabel">Calling</h4>
                <h4>
                  <strong>
                    <% if contact.first_name.nil? || contact.last_name.nil? %>
                      <p><%= contact.email %></p>
                    <% else %>
                      <p><%= contact.first_name %> <%= contact.last_name %></p>
                    <% end %>
                  </strong>
                </h4>
              </div>
            </div>

        </div>
      </div>
    </div>
  </div>
</div>