closing #13

public/s/css/f0ckm.css

@@ -1724,7 +1724,8 @@ body.sidebar-right-hidden .global-sidebar-right {
     display: grid;
     grid-template-rows: auto auto auto;
     justify-items: center;
-    align-content: baseline; /*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
+    align-content: baseline;
+    /*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
     overflow: visible;
     padding: 20px;
     min-height: 0;
@@ -1997,8 +1998,13 @@ body.sidebar-right-hidden .global-sidebar-right {
 /* ─── Sidebar Skeleton Loader ─────────────────────────────────────────────── */
 
 @keyframes skeleton-shimmer {
-  0%   { background-position: -300px 0; }
+  0% {
-  100% { background-position: 300px 0; }
+    background-position: -300px 0;
+  }
+
+  100% {
+    background-position: 300px 0;
+  }
 }
 
 .sidebar-skeleton-item {
@@ -2028,12 +2034,10 @@ body.sidebar-right-hidden .global-sidebar-right {
 /* Shared shimmer base */
 .skeleton-avatar,
 .skeleton-line {
-  background: linear-gradient(
+  background: linear-gradient(90deg,
-    90deg,
       rgba(255, 255, 255, 0.04) 0%,
       rgba(255, 255, 255, 0.10) 40%,
-    rgba(255,255,255,0.04) 80%
+      rgba(255, 255, 255, 0.04) 80%);
-  );
   background-size: 600px 100%;
   animation: skeleton-shimmer 1.6s ease-in-out infinite;
   border-radius: 3px;
@@ -2050,22 +2054,51 @@ body.sidebar-right-hidden .global-sidebar-right {
   height: 10px;
 }
 
-.skeleton-name  { width: 55%; }
+.skeleton-name {
-.skeleton-time  { width: 35%; height: 8px; opacity: 0.65; }
+  width: 55%;
+}
 
-.skeleton-text-long   { width: 90%; margin-bottom: 6px; }
+.skeleton-time {
-.skeleton-text-medium { width: 70%; margin-bottom: 6px; }
+  width: 35%;
-.skeleton-text-short  { width: 45%; margin-bottom: 0; }
+  height: 8px;
+  opacity: 0.65;
+}
+
+.skeleton-text-long {
+  width: 90%;
+  margin-bottom: 6px;
+}
+
+.skeleton-text-medium {
+  width: 70%;
+  margin-bottom: 6px;
+}
+
+.skeleton-text-short {
+  width: 45%;
+  margin-bottom: 0;
+}
 
 /* Stagger the shimmer phase so each item feels alive individually (cycles every 5) */
 .sidebar-skeleton-item:nth-child(5n+2) .skeleton-avatar,
-.sidebar-skeleton-item:nth-child(5n+2) .skeleton-line { animation-delay: 0.2s; }
+.sidebar-skeleton-item:nth-child(5n+2) .skeleton-line {
+  animation-delay: 0.2s;
+}
+
 .sidebar-skeleton-item:nth-child(5n+3) .skeleton-avatar,
-.sidebar-skeleton-item:nth-child(5n+3) .skeleton-line { animation-delay: 0.4s; }
+.sidebar-skeleton-item:nth-child(5n+3) .skeleton-line {
+  animation-delay: 0.4s;
+}
+
 .sidebar-skeleton-item:nth-child(5n+4) .skeleton-avatar,
-.sidebar-skeleton-item:nth-child(5n+4) .skeleton-line { animation-delay: 0.6s; }
+.sidebar-skeleton-item:nth-child(5n+4) .skeleton-line {
+  animation-delay: 0.6s;
+}
+
 .sidebar-skeleton-item:nth-child(5n+5) .skeleton-avatar,
-.sidebar-skeleton-item:nth-child(5n+5) .skeleton-line { animation-delay: 0.8s; }
+.sidebar-skeleton-item:nth-child(5n+5) .skeleton-line {
+  animation-delay: 0.8s;
+}
 
 /* Mobile Stacking for Legacy Mode (max-width: 999px) */
 @media (max-width: 999px) {
@@ -3677,7 +3710,8 @@ ul.navbar-nav li.nav-item {
   content: "" !important;
   } */
 
-  .fa-solid.fa-angle-up, .fa-regular.fa-image {
+  .fa-solid.fa-angle-up,
+  .fa-regular.fa-image {
     margin-right: 5px;
   }
 
@@ -4344,6 +4378,26 @@ span.placeholder {
   object-fit: contain;
 }
 
+/* Inline image expansion */
+.embed-responsive.is-expanded::before {
+  display: none !important;
+}
+
+.embed-responsive.is-expanded {
+  height: auto !important;
+  overflow: visible !important;
+}
+
+.embed-responsive.is-expanded .embed-responsive-image,
+.embed-responsive.is-expanded a#elfe,
+.embed-responsive.is-expanded img#f0ck-image {
+  position: static !important;
+  height: auto !important;
+  width: auto !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
+
 a#elfe {
   height: 100%;
   width: 100%;
@@ -6292,8 +6346,10 @@ button#togglebg {
 }
 
 .fader-in {
-  /*opacity: 0.4 !important;*/ /* default */
+  /*opacity: 0.4 !important;*/
-  opacity: 0.1 !important; /* darker */
+  /* default */
+  opacity: 0.1 !important;
+  /* darker */
 }
 
 .fader-out {
@@ -6320,19 +6376,22 @@ button#togglebg {
 
 /* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */
 div.posts>a.lazy-thumb:not(.loaded) {
-  background: linear-gradient(
+  background: linear-gradient(90deg,
-    90deg,
       rgba(255, 255, 255, 0.04) 0%,
       rgba(255, 255, 255, 0.10) 40%,
-    rgba(255,255,255,0.04) 80%
+      rgba(255, 255, 255, 0.04) 80%);
-  );
   background-size: 600px 100%;
   animation: skeleton-shimmer 1.6s ease-in-out infinite;
 }
 
 /* Stagger shimmer phases so items feel alive individually */
-div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+2) { animation-delay: 0.2s; }
+div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+2) {
-div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+3) { animation-delay: 0.4s; }
+  animation-delay: 0.2s;
+}
+
+div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+3) {
+  animation-delay: 0.4s;
+}
 
 
 /* Make individual item entry subtler and faster for infinite scroll */
@@ -13668,9 +13727,11 @@ body.scroller-active #gchat-reopen-bubble {
   }
 }
 
-#nav-meme-link, #nav-upload-link {
+#nav-meme-link,
+#nav-upload-link {
   white-space: nowrap;
 }
+
 /* --- Admin IP History Styles --- */
 .admin-ips-table {
   width: 100%;
@@ -13678,6 +13739,7 @@ body.scroller-active #gchat-reopen-bubble {
   border-spacing: 0 8px;
   color: var(--white);
 }
+
 .admin-ips-table th {
   padding: 15px;
   text-align: left;
@@ -13687,19 +13749,24 @@ body.scroller-active #gchat-reopen-bubble {
   color: #888;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
+
 .admin-ips-table tr {
   transition: all 0.2s ease;
 }
+
 .admin-ips-table tbody tr {
   background: rgba(255, 255, 255, 0.02);
 }
+
 .admin-ips-table tbody tr:hover {
   background: rgba(255, 255, 255, 0.05);
 }
+
 .admin-ips-table td {
   padding: 15px;
   vertical-align: middle;
 }
+
 .ip-badge {
   font-family: monospace;
   padding: 4px 10px;
@@ -13712,10 +13779,12 @@ body.scroller-active #gchat-reopen-bubble {
   display: inline-block;
   max-width: 100%;
 }
+
 .date-cell {
   font-size: 0.85rem;
   color: #aaa;
 }
+
 .date-label {
   display: block;
   font-size: 0.7rem;

public/s/js/f0ckm.js

@@ -7822,8 +7822,16 @@ document.addEventListener('DOMContentLoaded', () => {
       const elfe = e.target.closest('#elfe');
       if (elfe) {
         e.preventDefault();
+        const expandOnClick = localStorage.getItem('imageExpandOnClick') !== 'false';
+        if (expandOnClick) {
+            const wrapper = elfe.closest('.embed-responsive');
+            if (wrapper) {
+                wrapper.classList.toggle('is-expanded');
+            }
+        } else {
             openImageModal(elfe.href);
         }
+      }
     });
   };
 

public/s/js/settings.js

@@ -711,6 +711,14 @@
         });
     }
 
+    const imageExpandToggle = document.getElementById('image_expand_toggle');
+    if (imageExpandToggle) {
+        imageExpandToggle.checked = localStorage.getItem('imageExpandOnClick') !== 'false';
+        imageExpandToggle.addEventListener('change', () => {
+            localStorage.setItem('imageExpandOnClick', imageExpandToggle.checked);
+        });
+    }
+
     // Background Blur Toggle
     const backgroundToggle = document.getElementById('show_background_toggle');
     if (backgroundToggle) {

src/inc/locales/de.json

@@ -144,6 +144,8 @@
     "disable_autoplay_hint": "Verhindert die automatische Wiedergabe von Videos und Audio",
     "disable_swiping": "Wischen deaktivieren",
     "disable_swiping_hint": "Navigation per Wischen auf Mobilgeräten deaktivieren",
+    "image_expand_on_click": "Bilder beim Klicken inline erweitern",
+    "image_expand_on_click_hint": "Anstatt das Scroll-Zoom-Modal zu öffnen, wird ein Bild beim Klicken innerhalb der Seite auf volle Größe erweitert.",
     "enable_bg_blur": "Hintergrundunschärfe aktivieren",
     "enable_bg_blur_hint": "Unscharfen Hintergrund bei Beiträgen anzeigen",
     "render_emojis": "Emojis in Zitatantworten anzeigen",

src/inc/locales/en.json

@@ -144,6 +144,8 @@
     "disable_autoplay_hint": "Prevent videos and audio from playing automatically",
     "disable_swiping": "Disable Swiping",
     "disable_swiping_hint": "Disable swipe-to-navigate on mobile devices",
+    "image_expand_on_click": "Expand images inline on click",
+    "image_expand_on_click_hint": "Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.",
     "enable_bg_blur": "Enable Background blur",
     "enable_bg_blur_hint": "Show blurred background on items",
     "render_emojis": "Render emojis in quote replies",

src/inc/locales/nl.json

@@ -144,6 +144,8 @@
     "disable_autoplay_hint": "Voorkomen dat video's en audio automatisch worden afgespeeld",
     "disable_swiping": "Swipen uitschakelen",
     "disable_swiping_hint": "Swipe-to-navigate uitschakelen op mobiele apparaten",
+    "image_expand_on_click": "Afbeeldingen inline vergroten bij klikken",
+    "image_expand_on_click_hint": "In plaats van de scroll-zoom-modal te openen, wordt een afbeelding bij klikken vergroot tot volledige grootte binnen de pagina.",
     "enable_bg_blur": "Achtergrondvervaging inschakelen",
     "enable_bg_blur_hint": "Vervaagde achtergrond tonen bij items",
     "render_emojis": "Emoji's weergeven in antwoorden",

src/inc/locales/zange.json

@@ -144,6 +144,8 @@
     "disable_autoplay_hint": "Vermeiden Sie das automatische Abspielen von Videos und Tondateien",
     "disable_swiping": "Wischen deaktivieren",
     "disable_swiping_hint": "Deaktivieren der Wisch-Navigation auf Mobilgeräten",
+    "image_expand_on_click": "Bildli beim Klickle inline uffblähe",
+    "image_expand_on_click_hint": "Anstatt dat Scroll-Zoom-Moped aufzumache, wird n Bild beim Klickle uff volle Größ im Bereich uffgepumpt.",
     "enable_bg_blur": "Hintergrundunschärfe aktivieren",
     "enable_bg_blur_hint": "Gefalteten Hintergrund auf Elementen anzeigen",
     "render_emojis": "Emojis in Zitatantworten darstellen",

views/settings.html

@@ -110,6 +110,13 @@
             </label>
             <small class="text-muted" style="margin-left: 25px;">{{ t('settings.scroll_nav_hint') }}</small>
           </div>
+          <div class="setting-item" style="margin-bottom: 15px;">
+            <label for="image_expand_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
+              <input type="checkbox" id="image_expand_toggle">
+              <span>{{ t('settings.image_expand_on_click') || 'Expand images inline on click' }}</span>
+            </label>
+            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.' }}</small>
+          </div>
           <div class="setting-item" style="margin-top: 15px;">
             <label for="disable_autoplay_toggle"
               style="cursor: pointer; display: flex; align-items: center; gap: 10px;">