Tools Extension

The Tools extension provides auto-initialization for common frontend utilities.

Features

The Tools extension automatically initializes popular frontend libraries when the DOM is ready:

• Lazysizes: Image lazy loading
• Autosize: Automatic textarea resizing

Configuration

export interface ToolsExtensionOptions {
    autoResizeTextarea?: boolean; // default: true
    lazyLoadImages?: boolean;     // default: true
}

Usage

import { RunThemeExtensions } from 'wly-statamic-theme-extensions';

RunThemeExtensions({
    tools: {
        autoResizeTextarea: true,  // Enable textarea auto-resizing
        lazyLoadImages: true       // Enable image lazy loading
    }
});

Lazysizes (Image Lazy Loading)

When enabled, the extension automatically initializes Lazysizes for image lazy loading.

HTML Usage:

<!-- Standard lazy loading -->
<img data-src="image.jpg" class="lazyload" alt="Lazy loaded image">

<!-- With low quality placeholder -->
<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Image">

<!-- Responsive images -->
<img data-sizes="auto" 
     data-src="image-small.jpg" 
     data-srcset="image-small.jpg 300w, image-large.jpg 600w" 
     class="lazyload" 
     alt="Responsive image">

Autosize (Textarea Auto-resizing)

When enabled, all <textarea> elements on the page will automatically resize to fit their content.

HTML Usage:

<textarea placeholder="This textarea will auto-resize as you type..."></textarea>

Features:

• Automatically adjusts height as content changes
• Works with dynamically added textareas
• Respects min-height and max-height CSS properties
• No additional setup required - works automatically on all textareas

Manual Control

If you need to disable auto-initialization for specific use cases:

RunThemeExtensions({
    tools: {
        autoResizeTextarea: false,
        lazyLoadImages: false
    }
});

// Then manually initialize where needed
import autosize from 'autosize';
import lazy from 'lazysizes';

// Manual textarea setup
autosize(document.querySelector('#specific-textarea'));

// Manual lazy loading setup
lazy.init();