Search the Community

I was recently experimenting with optimizing my images to get better load results. The code below is an example of what i've been using. It works nicely but the main problem is if i load a page for the first time after having added a few images my server will overload and return a 503 error. I have to refresh the page a few times for the server to resize all the images. Not a big problem while developing but not something I want on my live website. <picture> <source media='(max-width: 320px)' srcset='{$image->width(320)->url} 1x, {$image->width(640)->url} 2x'> <source media='(max-width: 375px)' srcset='{$image->width(375)->url} 1x, {$image->width(750)->url} 2x'> <source media='(max-width: 767px)' srcset='{$image->width(750)->url} 1x, {$image->width(1500)->url} 2x'> <source media='(max-width: 1023px)' srcset='{$image->width(300)->url} 1x, {$image->width(600)->url} 2x'> <source media='(max-width: 1319px)' srcset='{$image->width(450)->url} 1x, {$image->width(900)->url} 2x'> <source media='(min-width: 1320px)' srcset='{$image->width(510)->url} 1x, {$image->width(1020)->url} 2x'> <img src='{$image->width(1056)->url}' alt='$image->description'> </picture>"; Is there a way to create these different sizes without overloading my server? Ideally i'd like to expand the above code with webp support and a service like tinyPNG to reduce image size even further, but that would stretch the first load time even further.

How to set the image quality as per desired.. I tried using the above code but I get the original image size.. <!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right-->

Hi, I've recently upgraded a website to the latest version (2.7.2) and the image fields are not running properly. Seems like the ImageSizer isn't working anymore. There's a thread in the forums about that particular problem but it's a dead-end. Here's the error i got: ImageSizer::resize(0, 100) failed for [...]/site/assets/cache/WireTempDir/.PagefilesManager1984/1/numbers_layout.0x100.jpg Can anyone help me with this? Thanks.

Currently my system is using nginx server on production recently upgraded from processwire 2.5 to processwire 2.7.2 We are making multiple dimension sizes of images. On our system it is taking very less time locally on apache server. Tested this on another system it work fine there, even tested on nginx locally. Issue arises when we deploy it to server , the performance goes slow and hence it is taking more than normal time. if an image locally take 2 seconds for variations on server same image take almost 50s to 1 min(excluding uploading time). Here is a code for creating image variations. <?php class ImageCreateThumbs extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'ImageCreateThumbs', 'version' => 100, 'summary' => 'This module allows creation of multiple sized images.', 'href' => '', 'singular' => true, 'autoload' => true ); } public function init() { $this->addHookAfter('InputfieldFile::fileAdded', $this, 'sizeImage'); } public function sizeImage($event) { $inputfield = $event->object; if($inputfield->name != 'images' && $inputfield->name != 'image' && $inputfield->name != 'asset_image') return; // we assume images field $image = $event->argumentsByName("pagefile"); $image->size(350,0); $image->size(480,0); $image->size(560,0); $image->size(680,0); $image->size(760,0); $image->size(840,0); $image->size(960,0); $image->size(1200,0); $image->size(1400,0); $image->size(1500,0); $image->size(1900,0); $image->size(2000,0); $image->size(2400,0); } }

I'd like to resize some images on demand, that are not page images, so they are not attached to a page. How to use the ImageSizer class? I could browse through the code but perhaps someone who used this, could provide some lines of example code. I basically want to pass the image path and cropping options. Are the cropped images saved somewhere if they are not page images, or will the cropping be executed every time? Thanks!

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 ) }