Search the Community

Hi everyone, This module completely replaces the default ProcessWire image sizing engine with the powerful Intervention Image v3 library. The goal was to modernize how we handle images in ProcessWire, bringing in features like AVIF support, superior resizing quality, and strict aspect-ratio handling, while keeping the API compatible with what you already know. 🚀 What does it do? Replacement: It hooks into Pageimage. You can keep using $image->width(300), $image->size(800, 600), or $image->crop(...) just like you always have. Modern Formats: Automatically handles WebP and AVIF generation. Smart Responsive Images: It introduces a configuration-based approach where you define Breakpoints, Grid Columns, and Resizing Factors. The module uses these settings to automatically calculate and generate the perfect srcset for your layouts. ✨ New Methods: render() and attrs() While standard methods work as expected, I’ve added/updated methods to handle modern HTML output: 1. $image->render(string $preset, array $options) This outputs the complete HTML tag. It automatically handles: The <img> tag with srcset and sizes. The <picture> tag with <source> elements if you have enabled extra formats (like AVIF/WebP) in the settings. Lazy Loading & LQIP: It automatically generates a Low Quality Image Placeholder (pixelated/blur effect) and applies a base64 background to the image tag for a smooth loading experience. // Example: Render a 'landscape' preset defined in module settings echo $page->image->render('landscape', ['class' => 'my-image']); 2. $image->attrs(string $preset, array $options) Perfect for developers who use template engines like Twig or Latte, or prefer full control over their HTML. This returns an array of attributes instead of an HTML string. $data = $page->image->attrs('landscape'); // Returns array like: // [ // 'src' => '...', // 'width' => 1200, // 'height' => 675, // 'srcset' => '...', // 'sources' => [ ... ], // Array for picture tag sources // 'style' => 'background-image: url(data:image...);', // LQIP Base64 // 'class' => 'iv-lazy ...' // ] ⚙️ Configuration Strategy Instead of hardcoding sizes in your templates, you configure your design tokens in the module settings: Breakpoints (e.g., 1200px) Aspect Ratios (e.g., 16:9) Grid Columns (e.g., 1-1, 1-2, 1-3) Factors (e.g., 0.5, 1, 1.5, 2 for Retina support) The module calculates the necessary image dimensions based on these combinations. If you request a specific aspect ratio, it ensures strict adherence to it, preventing 1px rounding errors. 📝 A Note on Documentation I wanted to get this into your hands as soon as possible, but due to a heavy workload, I haven't finished writing the detailed README.md yet. Currently, you can grab the code from GitHub (link below). I will submit this to the official ProcessWire Modules Directory after add some other features and after update readme.md Download / GitHub: GitHub Repo I’d love to hear your feedback and suggestions!

Hello, I am currently playing around to build my first module. It will be a simple module for the ImageOptim web service, but I am a little bit stuck on which right hook to use. Currently I use following hook: $this->pages->addHookAfter('saveFieldReady', $this, 'imageOptimSave'); I would like to pass images and its variations to the web service after adding them to the image field. But if I use the saveFieldReady hook only the original image will be optimized, not the API generated image variations, because they will be generated after viewing the page for the first time. Can anybody please help me how to hook into the image variations? I already tried to use my own method, but this one used in the template would be called on every page render. Regards, Andreas

Hi, I wish to have a core ImageManipulationClass like the ImageSizer but not only for resizing and cropping images. It should provide these easy to use functionality like with the ImageSizer and additionally a step to step image manipulation whereas the user / module author is not restricted anyhow. The basic image manipulation methods should be included, like: im_flip im_rotate im_crop im_crop_auto im_resize im_sharpen im_stepResize If someone want to do something more fancy or magic, he/she should not to have to reenvent the basics again. He/She just should start with the class by opening the imagefile and create a GD-object, use some basic methods, and at any point get the GD-IM-Reference out, do his fancy magic with it and put it back to the class to use its basics to finalise the file: im_get_im() im_set_im( &$im ) I have started to write something for this. I tried to be as close to the ImageSizer as possible, but some differences will be there. Before I've started with it I have done some tests with sharpening, rotating and others. First I've tried to create a module that hooks into ImageSizer, but have figured out that this wouldn't solve most things what I imagine one want to do with images. I have read the code of ImageSizer very carefully and there are allready very good inprovements in it from the community here. Ok, Ryan has written it and done the most work of all, so tribute to him , - adamkiss, interrobang, mrx, teppo, u-nikos have contributed the improvements to it: . I have looked into apeisas Thumbnail-Module and tried adding functionality for sharpening to it. It think he would have liked if there was a CoreImageManipulation class once when he has written the module. Also Soma actually work on a very cool Module where I really would like to see a link/button or some links/buttons for every image that just let you do some manipulations/corrections to them. <hint, hint ;-)> Any thoughts or Meinungen are welcome. --- EDIT: there is actually a modified ImageSizer class with autoRotation & sharpening available for testing: http://processwire.com/talk/topic/3278-core-imagemanipulation/#entry32284 --- Here are an overview of what allready is in, (I post only properties and method names, not the method bodies): class ImageManipulation extends Wire { // information of source imagefile /** * Filename ImageSourcefile */ protected $filename; /** * Extension ImageSourcefile */ protected $extension; /** * Type of image ( 1 = gif | 2 = jpg | 3 = png ) */ protected $imagetype; /** * Information about the image (width/height) and more */ protected $image = array(); /** * Was the given image modified? */ protected $modified = false; // default options for manipulations /** * Image quality setting, 1..100 */ protected $quality = 90; /** * Allow images to be upscaled / enlarged? */ protected $upscaling = true; /** * Allow images to be cropped to achieve necessary dimension? If so, what direction? * * Possible values: northwest, north, northeast, west, center, east, southwest, south, southeast * or TRUE to crop to center, or FALSE to disable cropping. * Default is: TRUE */ protected $cropping = true; /** * Should a optional Auto-Rotation be performed if EXIF-Orientation-Flag is available? */ protected $auto_orientation = true; /** * the default sharpening mode * * @var array with custom pattern or a string: 'soft' | 'medium' | 'strong' | 'multistep' */ protected $sharpening = 'medium'; /** * if extended imageinfo should be retrieved: number of Channels, Bits/per Channel, Colorspace */ protected $extended_imageinfo = false; /** * Extension / Format for resulting Imagefile (default is same as ImageSourcefile-Extension) */ protected $outputformat; /** * Filename ImageTargetfile if $outputformat is different than InputImage (default is same as ImageSourcefile) */ protected $targetfilename; // other properties /** * Directions that cropping may gravitate towards * * Beyond those included below, TRUE represents center and FALSE represents no cropping. */ static protected $croppingValues = array(); /** * Supported image types (@teppo) */ protected $supportedImageTypes = array(); protected $option_names = array(); private $property_names; // Methods to set and get Properties /** * Here you can specify multiple options as Array, whereas with the * single set* functions you can specify single options * * @param array $options May contain key-value pairs for any valid Options-Propertyname * @return this */ public function setOptions(array $options) public function setQuality($value) public function setUpscaling($value) public function setCropping($value) public function setAuto_orientation($value) public function setSharpening($value) public function setTargetFilename($value) public function setOutputformat($value) /** * Return an array of the current options */ public function getOptions() /** * makes protected and private class-properties accessible in ReadOnly mode * * example: $x = $class->propertyname; */ public function __get( $property_name ) // Construct & Destruct the ImageManipulator for a single image public function __construct( $filename, $options=array() ) public function __destruct() public function im_release() // read image informations, basic and extended protected function loadImageInfo() private function extendedInfo_gif(&$a) private function extendedInfo_jpg(&$a) private function extendedInfo_png(&$a) // helper functions /** * check file exists and read / write access * * @param string $filename * @param boolean $readonly * @return boolean */ private function check_diskfile( $filename, $readonly=false ) /** * helper, reads a 4-byte integer from file */ private function freadint(&$f) // the IM's (ImageManipulation Methods) private $im_dib_dst = null; // is the output for every intermediate im-method and optional a check-out for the im! private $im_dib_tmp = array(); // holds all intermediate im references private function get_next_im( $w=true, $h=null ) public static function is_resource_gd( &$var ) public function im_get_im() public function im_set_im( &$im ) public function im_flip( $vertical=false ) public function im_rotate( $degree, $background_color=0 ) public function im_crop( $pos_x, $pos_y, $width, $height ) public function im_crop_auto( $direction, $width, $height ) public function im_resize( $dst_width=0, $dst_height=0, $auto_sharpen=true, $sharpen_mode='medium' ) public function im_sharpen( $mode='medium' ) public function im_stepResize( $dst_width=0, $dst_height=0 ) // static oneLiner Methods that can be called only with a filename passed to them public static function file_get_exif_orientation( $filename, $return_correctionArray=false ) public static function file_jpeg_auto_rotation( $filename, $quality=95 ) }