Image retry

Gemfile

@@ -21,6 +21,7 @@ end
 gem "sassc", "~> 2.4"
 gem "image_optim", "~> 0.31"
 gem "image_optim_pack", "~> 0.10"
+gem "faraday-retry", "~> 2.2"
 
 # Development and deployment
 gem "jgd", "~> 1.14"

Gemfile.lock

@@ -21,6 +21,8 @@ GEM
       logger
     faraday-net_http (3.4.0)
       net-http (>= 0.5.0)
+    faraday-retry (2.3.2)
+      faraday (~> 2.0)
     ffi (1.17.2)
     ffi (1.17.2-x64-mingw-ucrt)
     ffi (1.17.2-x86_64-linux-gnu)
@@ -195,6 +197,7 @@ PLATFORMS
 
 DEPENDENCIES
   csv
+  faraday-retry (~> 2.2)
   http_parser.rb (~> 0.6.0)
   image_optim (~> 0.31)
   image_optim_pack (~> 0.10)

_layouts/base.html

@@ -19,6 +19,7 @@
       </div>
     </main>
 
+    <script src="{{ '/assets/js/image-retry.js' | relative_url }}"></script>
   </body>
 
 </html>

_layouts/post.html

@@ -2,6 +2,7 @@
 layout: base
 ---
 
+
 <article class="article__container">
   <h1 class="article__header_title">{{ page.title }}</h1>
 
@@ -33,16 +34,3 @@ <h1 class="article__header_title">{{ page.title }}</h1>
   {% endif %}
 </article>
 
-<script>
-  const storagePrefix = '{{ page.storage_prefix | default: site.data.site.image_storage.default_prefix }}';
-  const prefixes = {{ site.data.site.image_storage.prefixes | jsonify }};
-  const prefix = (prefixes[storagePrefix] || '').replace(':slug', '{{ page.slug }}');
-  const images = document.getElementsByTagName('img');
-  Array.from(images).forEach((img) => {
-    const originalSrc = img.getAttribute('src');
-    if (originalSrc.startsWith('http://') || originalSrc.startsWith('https://') || originalSrc.startsWith('/assets/')) {
-      return;
-    }
-    img.src = prefix + originalSrc;
-  });
-</script>

_layouts/travel-home.html

@@ -22,8 +22,15 @@ <h1 class="travel-home-title travel-blog-title-font">{{ page.title }}</h1>
         <article class="post-card">
           <a href="{{ post.url | relative_url }}" class="post-card-link">
             <div class="post-card-image">
+              {% assign storage_prefix = post.storage_prefix | default: site.data.site.image_storage.default_prefix %}
+              {% assign prefix = site.data.site.image_storage.prefixes[storage_prefix] | replace: ':slug', post.slug %}
+              {% if storage_prefix == 'local' %}
+                {% assign image_url = '/travel/' | append: post.slug | append: '/' | append: post.preview %}
+              {% else %}
+                {% assign image_url = prefix | append: post.preview %}
+              {% endif %}
               <img 
-                src="{{ site.data.site.image_storage.prefixes[post.storage_prefix] | default: '' | replace: ':slug', post.slug }}{{ post.preview }}" 
+                src="{{ image_url }}" 
                 alt="{{ post.title | escape }}" 
                 loading="lazy"
                 >

_plugins/image_url_processor.rb

@@ -0,0 +1,36 @@
+Jekyll::Hooks.register :posts, :post_render do |post|
+  # Only process travel posts that have storage_prefix
+  if post.url.start_with?('/travel/') && post.data['storage_prefix']
+
+    storage_prefix = post.data['storage_prefix']
+    site_data = post.site.data['site']
+
+    if site_data && site_data['image_storage'] && site_data['image_storage']['prefixes']
+      prefixes = site_data['image_storage']['prefixes']
+
+      if prefixes[storage_prefix] && !prefixes[storage_prefix].empty?
+        prefix = prefixes[storage_prefix].gsub(':slug', post.data['slug'] || '')
+
+        # Process HTML content
+        post.output = post.output.gsub(/<img\s+([^>]*\s+)?src="([^"]+)"([^>]*)>/i) do |match|
+          before = $1 || ''
+          img_url = $2
+          after = $3 || ''
+
+          # Skip if already absolute URL or assets
+          if img_url.match?(/^https?:\/\//) || img_url.start_with?('/assets/')
+            match
+          else
+            # Keep the full path, don't strip subdirectories
+            # This preserves paths like "08/DSC_0972.JPG"
+            new_url = prefix + img_url
+
+            puts "Processing image in #{post.url}: #{img_url} -> #{new_url}"
+
+            "<img #{before}src=\"#{new_url}\"#{after}>"
+          end
+        end
+      end
+    end
+  end
+end

_sass/_archive.scss

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'mixins' as *;
 
 // Archive pages styles
 .archive-page {
@@ -20,20 +23,20 @@
     font-size: 1.8rem;
     margin-bottom: $spacing-base;
     padding-bottom: 8px;
-    border-bottom: 2px solid lighten($primary-color, 70%);
+    border-bottom: 2px solid color.adjust($primary-color, $lightness: 70%);
 
     a {
       color: $text-color;
       text-decoration: none;
 
       &:hover {
-        color: lighten($text-color, 20%);
+        color: color.adjust($text-color, $lightness: 20%);
       }
     }
 
     .post-count {
       font-size: 0.8em;
-      color: lighten($text-color, 40%);
+      color: color.adjust($text-color, $lightness: 40%);
       font-weight: normal;
     }
   }
@@ -45,9 +48,9 @@
 
 .post-item {
   padding: 15px;
-  border: 1px solid lighten($primary-color, 80%);
+  border: 1px solid color.adjust($primary-color, $lightness: 80%);
   border-radius: 6px;
-  background: lighten($background-color, 2%);
+  background: color.adjust($background-color, $lightness: 2%);
   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
   &:hover {
@@ -57,7 +60,7 @@
 
   .post-date {
     font-size: 0.9rem;
-    color: lighten($text-color, 30%);
+    color: color.adjust($text-color, $lightness: 30%);
     font-weight: 500;
   }
 
@@ -70,13 +73,13 @@
       text-decoration: none;
 
       &:hover {
-        color: lighten($text-color, 20%);
+        color: color.adjust($text-color, $lightness: 20%);
       }
     }
   }
 
   .post-description {
-    color: lighten($text-color, 15%);
+    color: color.adjust($text-color, $lightness: 15%);
     line-height: 1.4;
     margin: 8px 0;
   }
@@ -99,20 +102,20 @@
   }
 
   .tag {
-    background: lighten($primary-color, 85%);
-    color: darken($primary-color, 10%);
+    background: color.adjust($primary-color, $lightness: 85%);
+    color: color.adjust($primary-color, $lightness: -10%);
 
     &:hover {
-      background: lighten($primary-color, 75%);
+      background: color.adjust($primary-color, $lightness: 75%);
     }
   }
 
   .category {
-    background: lighten($primary-color, 90%);
+    background: color.adjust($primary-color, $lightness: 90%);
     color: $primary-color;
 
     &:hover {
-      background: lighten($primary-color, 80%);
+      background: color.adjust($primary-color, $lightness: 80%);
     }
   }
 }

_sass/_base.scss

@@ -1,4 +1,7 @@
 
+@use 'variables' as *;
+@use 'mixins' as *;
+
 // Base HTML elements
 html {
   background-color: $background-color;

_sass/_images.scss

@@ -1,4 +1,7 @@
 
+@use 'sass:color';
+@use 'variables' as *;
+
 // Image handling and gallery styles
 img {
   position: relative;
@@ -63,4 +66,67 @@ img[data-src] {
   &.loaded {
     filter: blur(0);
   }
+}
+
+// Image loading states
+img {
+  &.loading {
+    opacity: 0.7;
+    background: color.adjust($background-color, $lightness: -5%);
+  }
+
+  &.error {
+    opacity: 0.5;
+    background: color.adjust($primary-color, $lightness: 90%);
+    position: relative;
+  }
+
+  &.retry {
+    animation: pulse 1.5s infinite;
+  }
+}
+
+@keyframes pulse {
+  0% { opacity: 0.5; }
+  50% { opacity: 0.8; }
+  100% { opacity: 0.5; }
+}
+
+// Error placeholder
+.image-error-placeholder {
+  display: inline-block;
+  background: color.adjust($primary-color, $lightness: 95%);
+  border: 2px dashed color.adjust($primary-color, $lightness: 70%);
+  border-radius: 8px;
+  padding: $spacing-base;
+  text-align: center;
+  color: color.adjust($text-color, $lightness: 30%);
+  font-size: 0.9rem;
+  min-height: 100px;
+  width: 100%;
+  max-width: 400px;
+
+  &::before {
+    content: "📷";
+    display: block;
+    font-size: 2rem;
+    margin-bottom: 8px;
+  }
+
+  .retry-button {
+    display: inline-block;
+    margin-top: 8px;
+    padding: 4px 12px;
+    background: $primary-color;
+    color: $background-color;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: color.adjust($primary-color, $lightness: -10%);
+    }
+  }
 }

_sass/_layouts.scss

@@ -1,4 +1,7 @@
 
+@use 'variables' as *;
+@use 'mixins' as *;
+
 // Default layout
 .default-layout {
   @include centered-content;

_sass/_mixins.scss

@@ -1,4 +1,6 @@
 
+@use 'variables' as *;
+
 // Typography mixins
 @mixin font-smoothing {
   -webkit-font-smoothing: antialiased;

_sass/_posts.scss

@@ -1,14 +1,18 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'mixins' as *;
+
 // Post metadata styles
 .post-meta {
   text-align: center;
   margin-bottom: $spacing-base * 1.5;
   padding-bottom: $spacing-base;
-  border-bottom: 1px solid lighten($primary-color, 85%);
+  border-bottom: 1px solid color.adjust($primary-color, $lightness: 85%);
 
   time {
     display: block;
     font-size: 0.9rem;
-    color: lighten($text-color, 30%);
+    color: color.adjust($text-color, $lightness: 30%);
     margin-bottom: 10px;
   }
 
@@ -27,20 +31,20 @@
     }
 
     .category {
-      background: lighten($primary-color, 90%);
+      background: color.adjust($primary-color, $lightness: 90%);
       color: $primary-color;
 
       &:hover {
-        background: lighten($primary-color, 80%);
+        background: color.adjust($primary-color, $lightness: 80%);
       }
     }
 
     .tag {
-      background: lighten($primary-color, 85%);
-      color: darken($primary-color, 10%);
+      background: color.adjust($primary-color, $lightness: 85%);
+      color: color.adjust($primary-color, $lightness: -10%);
 
       &:hover {
-        background: lighten($primary-color, 75%);
+        background: color.adjust($primary-color, $lightness: 75%);
       }
     }
   }
@@ -51,7 +55,7 @@
   text-decoration: none;
   margin: 0 auto;
   padding: $spacing-base;
-  border-bottom: 1px solid lighten($primary-color, 85%);
+  border-bottom: 1px solid color.adjust($primary-color, $lightness: 85%);
   display: block;
   --document-column-size: #{$max-content-width};
 
@@ -184,8 +188,8 @@ blockquote {
   font-size: 1.2rem;
   margin-left: 40px;
   padding-left: $spacing-base;
-  border-left: 3px solid lighten($primary-color, 70%);
-  color: lighten($text-color, 10%);
+  border-left: 3px solid color.adjust($primary-color, $lightness: 70%);
+  color: color.adjust($text-color, $lightness: 10%);
 
   @include mobile {
     font-size: 1.1rem;