Profilbild wird angezeigt und Modal angepasst

users/static/users/css/custom.css

@@ -53,6 +53,14 @@ html h1 {
 body{
 	background-color: #f8f9fc;
 }
+
+.preview {
+  overflow: hidden;
+  width: 200px; 
+  height: 200px;
+}
+
+
 /*
 		FOR TREE ORGA
 

users/templates/users/profile.html

@@ -3,7 +3,7 @@
 {% block content %}
     <div class="content-section">
       <div class="media">
-        <img class="img-profile " width="17%" src="{{ prof_user.profile.get_photo_url }}">
+        <img class="img-profile " width="17%" src="{{ user.profile.get_photo_url }}">
           <div class="media-body col-5">
           <h2 class="account-heading">Profil von {{ user.first_name }} {{ user.last_name }}</h2>
           <hr>

users/templates/users/profile_update.html

@@ -78,7 +78,7 @@
     </div>
 <!-- MODAL TO CROP THE IMAGE -->
   <!-- MODAL TO CROP THE IMAGE -->
-<div class="modal fade " id="modalCrop">
+<div class="modal fade " id="modalCrop" data-backdrop="static" data-keyboard="false">
   <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
@@ -134,9 +134,9 @@
       var cropBoxData;
       var canvasData;
       var $image = $("#imagemod");
-      $("#modalCrop").on("shown.bs.modal", function () {    
+      $("#modalCrop").on("shown.bs.modal", function () {  
         $image.cropper({
-          viewMode: 3,
+          viewMode: 3,          
           aspectRatio: 1/1,   
           strict: false,
           cropBoxMovable: true,