Image Upload & Live Preview - Workflow Explained

Step-by-Step Logic

Understanding Relative Paths: The path ././../assets/page/ is a relative path. Here's how each part breaks down:
- . = current directory
- ./ = still the current directory (redundant but valid)
- ../ = go up one directory level
- assets/page/ = descend into the assets/page folder
So the full path ././../assets/page/ is logically equivalent to ../assets/page/.
Example Folder Structure: This is how the files might be organized:
```
project/
├── index.html
├── about/
│   └── team.html
└── assets/
    └── page/
        └── logo_transformed.svg
      
```
From about/team.html, the file logo_transformed.svg can be referenced using: <link rel="icon" href="././../assets/page/logo_transformed.svg" sizes="35x35" type="image/x-icon">
Best Practice: While ././ is valid, it’s usually cleaner to simplify paths when possible. So you might prefer: <link rel="icon" href="../assets/page/logo_transformed.svg" ... >

Technical Overview

Admin Reset Action: The system includes an admin-triggered reset via a secured POST form, requiring confirmation and a hardcoded reset code.
Database Reset: Upon successful verification, a configured database table is truncated using `TRUNCATE TABLE` to clear all stored entries.
File System Cleanup: Uploaded files in the /uploads directory are deleted. If the directory is missing, this is detected and handled with a detailed warning.
Static File Deletion: A specific static image (assets/page/hero.webp) is checked and deleted if it exists. Failure to delete it is logged and shown as a warning.
Error Handling: The system tracks multiple failure/success states and returns meaningful status via query parameters (type=success|warning|error), allowing for detailed user feedback.
Redirect Feedback: After the reset, the user is redirected to the config page with a status message (URL-encoded and newline-separated). The frontend decodes and styles this message accordingly.
Visual Message System: A styled feedback box on the config page dynamically adjusts based on result type (✅ success, ⚠️ warning, ❌ error), with time of operation displayed.
Logging: All reset attempts are appended to a server-side log file (reset-log.txt) with a timestamp, username (if available), and IP address.

What the Reset Button Does

Secure Reset: Only admins can reset the system, and only with the correct confirmation code.
Wipes the Data: When you click reset, all stored data is deleted from the system’s database.
Deletes Uploaded Files: All files that were uploaded by users are removed — clean slate.
Removes the Hero Image: A special hero image is also deleted — unless it can’t be (and you’ll be told if that happens).
Full Transparency: After the reset, the system shows you a clear message telling you exactly what happened — success, partial reset, or errors.
Looks After You: If something goes wrong (like a missing folder or file), the system won’t crash — it warns you and continues safely.
Everything Is Logged: Every time the reset button is used, it’s recorded with the time and admin info so you always have a history.

Technical Insight: Why File Size Matters

Performance: Large images increase page load time. Every kilobyte counts — especially for mobile users and slow connections.
Server Load: Smaller images reduce bandwidth usage and server response time. This allows more users to access the site concurrently.
SEO Impact: Google and other search engines factor in page speed. Faster pages get better rankings.
User Experience: Nobody likes waiting. Optimized images appear instantly, improving perceived quality and reducing bounce rates.
WebP Format: We use .webp, a modern image format that offers superior compression compared to JPG and PNG — often cutting file size by 25–35% without visible quality loss.
File Constraints: Our system restricts uploads by format and size, ensuring that only lightweight, optimized images are allowed.
Image Tools: Compression is handled client-side (via previews) and server-side (via resizing and WebP re-encoding). External tools like Squoosh or TinyPNG can also help before uploading.

Why We Keep Images Small

Faster Website: Smaller images load quicker — especially helpful for people on phones or slow Wi-Fi.
Better for Everyone: When your images are lightweight, visitors get a smoother experience — no waiting, no lag.
Google Likes It: Faster websites rank better in search results. Optimizing your images helps your visibility online.
Modern Format: We use .webp because it's smart — it keeps quality high but size low.
Auto-Resize: When you upload, our system automatically compresses and resizes your image behind the scenes.
Keep It Clean: The system only accepts small files. If yours is too big, it’ll warn you before it even uploads.
Pro Tip: Use free tools like Squoosh to shrink your image before uploading — just drag, drop, and save.
Pro Tip: To keep uploads fast and clean, you can optimize your images before uploading:
- ✅ Squoosh – Google tool, simple drag-and-drop image compression in your browser.
- 🖼️ XnConvert – Free desktop tool for Windows/Mac/Linux to batch convert and compress images to WebP.
- 🌐 file-converter.io – Free desktop tool to bulk convert images (and more) directly to WebP or other formats.
These tools help you avoid errors during upload and ensure the fastest loading times for your website.

Technical Overview: Dynamic SQL & Security

Prepared Statements: All queries use mysqli_prepare() with bind_param() to prevent SQL injection.
Dynamic Parameters: The query adapts based on the label GET parameter:
- If label is set and not "F": selects exact match using WHERE art_tag = ?.
- If label is "F" or not set: selects art_tag = 'F' but excludes known unwanted tags (e.g. A–E) using NOT IN (?, ?, ...).
Dynamic Exclusion: The NOT IN clause is generated dynamically based on a PHP array, allowing flexible filtering without hardcoding.
Safe Sorting: Supports dynamic ordering with ORDER BY art_sort ASC|DESC or ORDER BY RAND() while avoiding injection by validating values server-side.
Parameter Binding: Values for both single parameters and multiple exclusions are bound using $stmt->bind_param() with dynamically generated type strings.

Human Overview: What This Means

Safe Searches: No matter what a user types in the URL (like ?label=F), the system safely chooses what data to show — no chance of unsafe database access.
Smart Behavior: If no label is selected, or if it’s set to "F", the system shows fallback content while still avoiding certain categories (like A–E).
Custom Filtering: If a user selects a specific category (like "News" or "Featured"), the system will show only those matching entries.
Security Built-in: Even if someone tries to manipulate the link manually, the system never puts raw user input directly into the database query. It’s safe by design.
Flexible Sorting: Items can be sorted randomly or by predefined order, based on internal logic or admin settings.

Technical Overview

Responsive Navigation: Added a mobile-first responsive navigation menu that collapses into a hamburger icon on small screens (max-width: 600px).
Hamburger Toggle Logic: JavaScript toggles an .open class to show or hide the nav. Positioning adjusted via left, width, and transform: none !important to align properly below the icon.
Sticky Navigation: Fixed-position nav bar at top center on desktop and left-aligned dropdown on mobile.
Active Link Highlighting: PHP dynamically adds the active class to the current link, styled with a light background and underline on both desktop and mobile.
Session Debug Indicator: A session-based debug flag displays as a styled element aligned as the last menu item (only visible if $_SESSION["debug"] is set).
Dropdown Shadow & Visibility Fixes: Fixed dropdown overflow and visual issues by adjusting positioning, width, and ensuring z-index stacks correctly. Drop shadows added for readability.
Code Cleanup: CSS reorganized into logical sections (nav, layout, modal, gallery, etc.). Conflicts and duplication removed. Mobile overrides properly scoped under media queries.
Photoswipe Compatibility: Verified that imported PhotoSwipe styles do not conflict with the nav or layout behavior after toggling and testing.

What We Improved

Mobile Menu: On phones, the navigation turns into a nice little “☰” icon. Tap it and the full menu appears — clean and simple.
Easy to See What’s Active: When you click a menu item, it now highlights so you know what page you're on — no guessing.
Debug Mode Info: If you’re an admin in debug mode, a red “Debug: on” label now shows in the menu, so you always know it’s active.
Dropdown Positioned Right: The dropdown menu used to float off-screen — now it appears exactly where it should, under the button.
Looks Good Everywhere: The navigation is styled for both desktop and mobile users — clean on big screens, compact on phones.
Readable Over Backgrounds: Added subtle shadows and white text to ensure buttons and icons are readable over any background image.
Fast and Clean: Cleaned up old or duplicate CSS. Everything is now tidy and easier to maintain if you want to make changes later.

Technical Overview

Admin Reset Action: The system includes an admin-triggered reset via a secured POST form, requiring confirmation and a hardcoded reset code.
Database Reset: A configured table is cleared using `TRUNCATE TABLE` to wipe stored entries.
File System Cleanup: Uploaded files in /uploads are deleted. Missing directories are handled with warnings.
Static File Deletion: A hero image (assets/page/hero.webp) is deleted if present. Errors are logged.
Error Handling: The system detects and classifies success, warning, or failure states using `type=` query params.
Redirect Feedback: After reset, the user is redirected with a styled status message in the query string.
Visual Message Box: The frontend decodes the status message and styles it (✅ success, ⚠️ warning, ❌ error) with timestamps.
Logging: Every reset is logged in reset-log.txt with time, user (if available), and IP address.
HTML Validity: All generated markup is HTML5 valid and passes W3C validation.

What the Reset Button Does

Secure Reset: Only admins can perform the reset, and only with the correct confirmation code.
Wipes All Data: Deletes everything stored in the database for a clean restart.
Removes Uploaded Files: All user-uploaded content is cleared out automatically.
Deletes Hero Image: A featured image is deleted if it exists. If not, you get a warning instead of a crash.
Friendly Feedback: You see a clear message after reset telling you if it was successful, partially successful, or if something went wrong.
Safe Failures: If something fails (e.g. missing folder), it shows a warning instead of stopping the system.
Audit Trail: Every reset is recorded, so you can always check who did what and when.

Technical Overview

HTML5 Form: A modern form using enctype="multipart/form-data" and styled buttons.
JS Preview: Displays a live image preview and file metadata (dimensions, size) as soon as a file is selected.
Image Constraints: Accepts only .webp format, max ~*MB (dynamic size display).* (set in config)
FileReader API: Converts the selected file to a previewable data URI.
PHP Validation: Image is resized server-side (e.g. to **×**) and saved as hero.webp. ** (set in config)
Live Refresh: Uploaded image is displayed with cache-busting timestamp and file info. (Clickabel to full img.)

What This Feature Does for You

Easy Upload: Choose a single `.webp` image from your device.
Instant Feedback: You’ll instantly see a preview of the image selected, along with size and dimensions.
Safe Validation: Images are resized on the server before saving, ensuring consistent dimensions.
Smart Display: The current image is always shown after upload, even after refreshing (due to cache busting).
Reset Option: Clear the form with a stylish reset/reload button.
Reset Option: Clear the database/img folder reset/clear button.

Step-by-Step Logic

Initial Display: PHP checks for an existing image and shows it with stats (size, width, height).
Client Preview: JavaScript listens to file input, updates a preview box and text.
Form Submit: Form submits the file, PHP processes it, resizes it, and overwrites existing file.
After Upload: Image is redisplayed using a dynamic timestamp (?v=timestamp) to force reload.

Developer Notes

Use Squoosh to compress or convert images to .webp format for best performance.

Need File-converter Need to convert? Try file-converter.io — great for Windows users.

Image dimensions are checked client-side (via JS) and server-side (via PHP).

The upload process respects file size limits dynamically and prevents wrong formats from uploading.

Use window.location.pathname for reset without keeping old form data or alerts.

Image Upload & Preview - Workflow and Implementation

Step-by-Step Logic

Technical Overview

What the Reset Button Does

Technical Insight: Why File Size Matters

Why We Keep Images Small

Technical Overview: Dynamic SQL & Security

Human Overview: What This Means

Technical Overview

What We Improved

Technical Overview

What the Reset Button Does

Technical Overview

What This Feature Does for You

Step-by-Step Logic

Developer Notes

Summary