Club view should as good as profile ones

templates/member/picture_update.html

@@ -0,0 +1,95 @@
+{% load i18n crispy_forms_tags %}
+{% block profile_content %}
+<div class="text-center">
+<form method="post" enctype="multipart/form-data" id="formUpload">
+  {% csrf_token %}
+  {{ form |crispy }}
+</form>
+</div>
+<!-- MODAL TO CROP THE IMAGE -->
+<div class="modal fade" id="modalCrop">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
+        <img src="" id="modal-image" style="max-width: 100%;">
+      </div>
+      <div class="modal-footer">
+        <div class="btn-group pull-left" role="group">
+          <button type="button" class="btn btn-default" id="js-zoom-in">
+            <span class="glyphicon glyphicon-zoom-in"></span>
+          </button>
+          <button type="button" class="btn btn-default js-zoom-out">
+            <span class="glyphicon glyphicon-zoom-out"></span>
+          </button>
+        </div>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
+        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block extracss %}
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block extrajavascript%}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script>
+    <script>
+     $(function () {
+
+         /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
+         $("#id_image").change(function (e) {
+             if (this.files && this.files[0]) {
+                 var reader = new FileReader();
+                 reader.onload = function (e) {
+                     $("#modal-image").attr("src", e.target.result);
+                     $("#modalCrop").modal("show");
+                 }
+                 reader.readAsDataURL(this.files[0]);
+             }
+         });
+
+         /* SCRIPTS TO HANDLE THE CROPPER BOX */
+         var $image = $("#modal-image");
+         var cropBoxData;
+         var canvasData;
+         $("#modalCrop").on("shown.bs.modal", function () {
+             $image.cropper({
+                 viewMode: 1,
+                 aspectRatio: 1/1,
+                 minCropBoxWidth: 200,
+                 minCropBoxHeight: 200,
+                 ready: function () {
+                     $image.cropper("setCanvasData", canvasData);
+                     $image.cropper("setCropBoxData", cropBoxData);
+                 }
+             });
+         }).on("hidden.bs.modal", function () {
+             cropBoxData = $image.cropper("getCropBoxData");
+             canvasData = $image.cropper("getCanvasData");
+             $image.cropper("destroy");
+         });
+
+         $(".js-zoom-in").click(function () {
+             $image.cropper("zoom", 0.1);
+         });
+
+         $(".js-zoom-out").click(function () {
+             $image.cropper("zoom", -0.1);
+         });
+
+         /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
+         $(".js-crop-and-upload").click(function () {
+             var cropData = $image.cropper("getData");
+             $("#id_x").val(cropData["x"]);
+             $("#id_y").val(cropData["y"]);
+             $("#id_height").val(cropData["height"]);
+             $("#id_width").val(cropData["width"]);
+             $("#formUpload").submit();
+         });
+
+     });
+    </script>
+{% endblock %}