Display image

src/character/static/character/details.css

@@ -0,0 +1,4 @@
+img.profile-pic {
+    max-width: 240px;
+    max-height: 240px;
+}

src/character/templates/character/character_details.html

@@ -3,9 +3,15 @@
 {% load django_bootstrap5 %}
 {% load character_extras %}
 
+{% block head_end %}
+    <link rel="stylesheet" href="{% static "character/details.css" %}">
+{% endblock %}
+
 {% block title %}{{ character.name }}{% endblock %}
 
 {% block content %}
+    <div class="d-flex flex-column flex-sm-row justify-content-between">
+        <div>
             <h1>{{ character.name }}</h1>
             <p>
                 Joueur : {{ character.player.get_full_name|default:character.player.username }}
@@ -29,6 +35,15 @@
                 {{ character.get_gender_display }}, {{ character.age }} ans, {{ character.height_m }}m, {{ character.weight }}kg (IMC: {{ character.imc|floatformat }})
             </p>
             {% include "character/snippets/character_details/states.html" %}
+        </div>
+        {% if character.profile_picture %}
+            <img class="rounded-5 profile-pic"
+                src="{{ character.profile_picture.url }}"
+                alt="Image de profil"
+            >
+        {% endif %}
+    </div>
+
     <div class="row">
         <div class="col-sm-12 col-md-6 col-lg-6 col-xl">
             <table id="fight-table" class="table table-hover table-sm">