Story 2269: Enable Conditional S3 Storage for development

Author: jlchilders11

.gitignore

@@ -208,3 +208,6 @@ test-logs.txt
 smoke-logs.txt
 extract_links.py.py
 extract_links.py
+
+# Large static images
+static/static-large/*

core/templatetags/custom_static.py

@@ -0,0 +1,14 @@
+from django import template
+from django.conf import settings
+
+register = template.Library()
+
+
+@register.simple_tag
+def large_static(file_path: str):
+    # Strip any leading slashes to avoid footguns
+    file_path = file_path.lstrip("/")
+    if settings.LOCAL_DEVELOPMENT:
+        return f"{settings.STATIC_URL}static-large/{file_path}"
+    else:
+        return f"{settings.STATIC_CONTENT_AWS_S3_ENDPOINT_URL}/{settings.STATIC_CONTENT_BUCKET_NAME}/static/{file_path}"

justfile

@@ -2,6 +2,8 @@ set dotenv-load := false
 COMPOSE_FILE := "docker-compose.yml"
 ENV_FILE := ".env"
 DJANGO_VERSION := "5.2"
+VALID_BUCKETS := "boost.org.v2 stage.boost.org.v2 boost.org-cppal-dev-v2"
+
 
 @_default:
     just --list
@@ -180,3 +182,12 @@ alias shell := console
 
 @manage +args:
     docker compose run --rm web python manage.py {{ args }}
+
+# Static File Management
+@down_sync_images BUCKET='stage.boost.org.v2': ## syncs all items from specified bucket to static/static-large for local development
+    if echo {{VALID_BUCKETS}} | grep -q -w '{{BUCKET}}'; then \
+        aws s3 sync s3://{{BUCKET}}/static/  static/static-large/; \
+        echo "All missing or outdated static items synced."; \
+    else \
+        echo "Bucket name invalid."; \
+    fi

templates/v3/examples/_v3_example_section.html

@@ -721,6 +721,17 @@ <h3>{{ section_title }}</h3>
     </div>
   {% endwith %}
 
+  {% with section_title="Image Handling Example" %}
+    {% load custom_static %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+      <h3>{{ section_title }}</h3>
+      <div class="v3-examples-section__example-box">
+        {% large_static '/img/v3/learn-page/Learn_Octopus.png' as img_url %}
+        <img src="{{img_url}}" />
+      </div>
+    </div>
+  {% endwith %}
+
   {% comment %}
   Position Fixed dark mode toggle for quick theme switching without scrolling to the header.
   {% endcomment %}