SquareImages - Perfect Square Crops for Product Galleries

[maximus]

Hi everyone! 👋

I'd like to share SquareImages - a simple module that creates perfect square images from any source format.

Born from a real-world need: displaying vertical product images (like Coca-Cola bottles) uniformly in galleries and grids without distortion or awkward sizing.

The Problem

// Traditional methods don't work well for mixed aspect ratios:
$image->width(300);        // Too narrow for vertical images
$image->height(300);       // Too wide
$image->size(300, 300);    // Distorted

The Solution

// One simple method - smart cropping, perfect squares:
$square = $image->square(300);

Key Features

• 🎯 Smart Cropping - Automatically centers on longer dimension
• 📦 Format Preservation - Maintains original format (JPG/PNG/GIF)
• 🌐 WebP Support - Chain with ->webp() for compression
• ⚡ Performance - Fast URL generation
• 💾 Automatic Caching - Built on PW's image engine

Quick Example

<div class="product-grid">
    <?php foreach ($page->products as $product): ?>
        <?php $thumb = $product->photo->square(300); ?>
        <img src="<?= $thumb->url ?>" alt="<?= $product->title ?>">
    <?php endforeach; ?>
</div>

Perfect uniform squares, regardless of source dimensions!

API Methods

$image->square(400);           // Main method
$image->squareWidth(500);      // Based on width
$image->squareHeight(600);     // Based on height
$image->getSquareURL(300);     // Direct URL (faster)

// WebP conversion
$image->square(500)->webp();   // 25-65% smaller files

Installation

GitHub: https://github.com/mxmsmnv/SquareImages

cd site/modules/
git clone https://github.com/mxmsmnv/SquareImages.git

Or download ZIP and extract to /site/modules/SquareImages/

Then refresh modules in admin and install.

Use Cases

• E-commerce product galleries
• Team member avatars
• Blog thumbnails
• Social media previews
• Instagram-style grids