Refactor profile section and adjust GIF placement for improved layout

Author: mertcanozdemir

_layouts/about.liquid

@@ -15,48 +15,46 @@ layout: default
   </header>
 
   <article>
-    <div
-      class="profile-container"
-      style="{% if page.profile.align == 'right' %}float: right; margin-left: 20px;{% else %}float: left; margin-right: 20px;{% endif %} max-width: 30%;"
-    >
-      {% if page.profile %}
-        <div class="profile">
-          {% if page.profile.image %}
-            {% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
-            {% if page.profile.image_circular %}
-              {% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
-            {% else %}
-              {% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
-            {% endif %}
-            {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
-            {%
-              include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
-              cache_bust=true
-            %}
-          {% endif %}
-          {% if page.profile.more_info %}
-            <div class="more-info">{{ page.profile.more_info }}</div>
+    {% if page.profile %}
+      <div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
+        {% if page.profile.image %}
+          {% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
+          {% if page.profile.image_circular %}
+            {% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
+          {% else %}
+            {% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
           {% endif %}
-        </div>
-      {% endif %}
+          {% capture sizes %}(min-width: {{ site.max_width }}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+          {%
+            include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
+            cache_bust=true
+          %}
+        {% endif %}
+        {% if page.profile.more_info %}
+          <div class="more-info">{{ page.profile.more_info }}</div>
+        {% endif %}
 
-      <!-- GIF placed below profile picture, aligned to the same side -->
-      {% if page.header_gif and page.header_gif.enable %}
-        <div class="gif-container" style="margin-top: 20px; margin-bottom: 20px; width: 100%;">
-          <img
-            src="{{ page.header_gif.file | prepend: '/assets/img/' | relative_url }}"
-            alt="{{ page.header_gif.alt }}"
-            class="img-fluid z-depth-1"
-            style="width: 100%;"
-          >
-          {% if page.header_gif.caption %}
-            <div class="caption" style="text-align: center; margin-top: 10px; font-style: italic; color: #6c757d; font-size: 0.9em;">
-              {{ page.header_gif.caption }}
-            </div>
-          {% endif %}
-        </div>
-      {% endif %}
-    </div>
+        <!-- Move GIF inside profile div to place it below profile picture -->
+        {% if page.header_gif and page.header_gif.enable %}
+          <div class="gif-container" style="margin-left: 50px; margin-top: 20px; margin-bottom: 20px; width: 100%;">
+            <img
+              src="{{ page.header_gif.file | prepend: '/assets/img/' | relative_url }}"
+              alt="{{ page.header_gif.alt }}"
+              class="img-fluid z-depth-1"
+              style="width: 60%;"
+            >
+            {% if page.header_gif.caption %}
+              <div
+                class="caption"
+                style="margin-left: -120px;text-align: center; margin-top: 10px; font-style: italic; color: #6c757d; font-size: 0.9em;"
+              >
+                {{ page.header_gif.caption }}
+              </div>
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
 
     <div class="clearfix">{{ content }}</div>
 

_pages/about.md

@@ -11,11 +11,9 @@ profile:
 header_gif:
   enable: true
   file: mybrain.gif
-  alt: "Description of your GIF"
-  caption: "Visualizing of the my brain model"
-  width: "100px"
-news: true
-selected_papers: true
+  caption: "my brain "
+news: false
+selected_papers: false
 social: true
 ---