Merge branch 'V2'

assets/css/admin.less

@@ -1,16 +1,175 @@
+// Variables
+@primary-color: #2271b1;  // WordPress primary blue color.
+@border-radius: 8px;      // Consistent border radius across components.
+@transition-speed: 0.2s;  // Standard transition speed for animations.
 
-#postimagediv {
+// Main container styles
+.edge-images-wrap {
+    max-width: 800px;
+    margin: 20px 0;
 
-	// Unset absolute positioning.
-	.inside img.edge-images-img {
-		position: relative !important;
-	}
+    // Page title styling
+    h1 {
+        margin-bottom: 1em;
+        padding-bottom: 1em;
+        border-bottom: 1px solid #eee;
+    }
+}
 
-	// Remove the :before pseudo-element. 
-	.edge-images-container {
-		&:before {
-			display: none;
-		}
-	}
+// Settings container with card-like appearance
+.edge-images-container {
+    background: #fff;
+    padding: 2em;
+    border-radius: @border-radius;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
 
-}
+// Provider selector grid layout
+.edge-images-provider-selector {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1em;
+    margin-bottom: 2em;
+}
+
+// Individual provider option styling
+.edge-images-provider-option {
+    display: block;
+    cursor: pointer;
+
+    // Hide radio input visually
+    input[type="radio"] {
+        display: none;
+    }
+
+    // Provider card styling
+    .edge-images-provider-card {
+        display: block;
+        padding: 1.5em;
+        background: #f8f9fa;
+        border: 2px solid #e2e4e7;
+        border-radius: @border-radius;
+        transition: all @transition-speed ease;
+        position: relative;
+        overflow: hidden;
+        text-align: center;
+
+        // Hover effects
+        &:hover {
+            border-color: @primary-color;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+    }
+
+    // Selected state styling
+    input[type="radio"]:checked + .edge-images-provider-card {
+        background: #fff;
+        border-color: @primary-color;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+        // Checkmark indicator
+        &::after {
+            content: "✓";
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: @primary-color;
+            font-weight: bold;
+        }
+    }
+}
+
+// Provider name text styling
+.edge-images-provider-name {
+    display: block;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1d2327;
+}
+
+// Settings field container styling
+.edge-images-settings-field {
+    margin: 0 0 2em;
+    padding: 1.5em;
+    background: #f8f9fa;
+    border-radius: @border-radius;
+    border: 1px solid #e2e4e7;
+
+    // Field label styling
+    label {
+        display: block;
+        font-weight: 600;
+        margin-bottom: 0.5em;
+    }
+
+    // Help text styling
+    .description {
+        margin-top: 0.75em;
+        color: #666;
+        font-size: 13px;
+        line-height: 1.5;
+    }
+
+    // Checkbox alignment
+    input[type="checkbox"] {
+        margin-right: 8px;
+    }
+}
+
+// Submit button container
+.submit {
+    margin: 2em 0 0;
+    padding: 1.5em 0 0;
+    border-top: 1px solid #eee;
+}
+
+// Responsive adjustments for mobile
+@media screen and (max-width: 782px) {
+    .edge-images-provider-selector {
+        grid-template-columns: 1fr;
+    }
+}
+
+// Accessibility: Respect reduced motion preferences
+@media (prefers-reduced-motion: reduce) {
+    .edge-images-provider-option .edge-images-provider-card {
+        transition: none;
+        transform: none !important;
+    }
+}
+
+// Add this to the existing CSS
+.edge-images-imgix-field {
+    display: none; // Hidden by default
+
+    th, td {
+        padding-top: 0; // Remove extra spacing
+    }
+}
+
+// Add this to the existing CSS
+.edge-images-intro {
+    margin-bottom: 2em;
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid #eee;
+
+    p {
+        font-size: 14px;
+        line-height: 1.6;
+        margin: 1em 0;
+        max-width: 800px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    a {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+} 

assets/css/images.less

@@ -1,38 +1,25 @@
+// Main container for edge-optimized images
 .edge-images-container {
 	display: block;
-	width: 100%;
-	max-width: 100%;
-	max-height: 100%;
-	padding: 0;
-	overflow: hidden;
-	& .edge-images-img {
-		width: 100%;
-  		object-fit: cover;
+	position: relative;
+	max-width: min(var(--max-width, 100%), var(--wp--style--global--content-size, 100%));
+	margin-inline: auto;
+
+	img {
 		height: auto;
+		display: block;
+		max-width: 100%;
 	}
-}
 
-@supports (--custom:property) {
-	.edge-images-container {
-		width: ~'var(--max-width, 100%)';
-		height: ~'var(--max-height, auto)';
-		position: relative;
-		&::before {
-			content: "";
-			display: block;
-			padding-bottom: calc(100% / ~'(var(--aspect-ratio, 1/1))');
-		}
-		& .edge-images-img {
-			position: absolute;
-			height: 100%;
-			top: 0;
-			left: 0;
+	&.contain {
+		 img {
+			object-fit: contain;
 		}
 	}
-}
 
-.edge-images-container.contain {
-	img {
-		object-fit: contain;
+	&.cover {
+		img {
+			object-fit: cover;
+		}
 	}
 }

autoload.php

@@ -1,8 +1,17 @@
 <?php
 /**
- * Edge Images plugin file.
+ * Edge Images plugin autoloader file.
  *
- * @package Edge_Images
+ * This file handles the autoloading of all plugin classes. It follows PSR-4 autoloading 
+ * standards and converts namespace paths to file paths according to WordPress coding standards.
+ * The autoloader supports class names in the format Edge_Images\Class_Name and maps them to
+ * files in the classes directory.
+ *
+ * @package    Edge_Images
+ * @author     Jono Alderson <https://www.jonoalderson.com/>
+ * @copyright  2024 Jono Alderson
+ * @license    GPL-2.0-or-later
+ * @since      1.0.0
  */
 
 namespace Edge_Images;
@@ -15,30 +24,35 @@
 }
 
 /**
- * An autoloader for the plugin's classes
+ * An autoloader for the plugin's classes.
  *
- * @param string $class_name The name of the requested class.
+ * Converts class names in the Edge_Images namespace to file paths and includes them.
+ * For example:
+ * - Edge_Images\Handler becomes /classes/class-handler.php
+ * - Edge_Images\Edge_Providers\Cloudflare becomes /classes/edge-providers/class-cloudflare.php
  *
- * @return bool              Whether or not the requested class was found.
+ * @since 1.0.0
+ * 
+ * @param string $class_name The fully qualified class name to load.
+ * @return bool Whether the class was successfully loaded.
  */
-function autoloader( string $class_name ) : bool {
-
+function autoloader( string $class_name ): bool {
 	// Bail if the class isn't in our namespace.
 	if ( strpos( $class_name, __NAMESPACE__ ) !== 0 ) {
 		return false;
 	}
 
-	// Tidy up the class name.
+	// Remove namespace prefix and clean up class name.
 	$class_name = str_replace( array( __NAMESPACE__ . '\\' ), '', $class_name );
 	$class_name = str_replace( '_', '-', $class_name );
 	$class_name = explode( '\\', $class_name );
 
-	// Align to our syntax and directory structure.
+	// Add 'class-' prefix to the final component.
 	$class_name[] = 'class-' . array_pop( $class_name );
 	$class_name   = implode( '/', $class_name );
 	$class_name   = strtolower( $class_name );
 
-	// Construct the path.
+	// Build the full file path.
 	$path = sprintf(
 		'%1$s%2$s%3$s.php',
 		realpath( dirname( __FILE__ ) ),
@@ -52,6 +66,8 @@ function autoloader( string $class_name ) : bool {
 		return true;
 	}
 
-	// Bail if the class wasn't found.
 	return false;
 }
+
+// Register our autoloader with PHP.
+spl_autoload_register( __NAMESPACE__ . '\autoloader' );