Jump to content
Clément Lambelet

SOLVED: Generate image variation on upload (client-side image resizing)

Recommended Posts

Hi all,

 

I'm really new to ProcessWire, maybe I missed the solution in the documentation.

I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive).

I can't use ImageSizerEngineIMagick to help (my host doesn't support it).

 

I was wondering if there was a way to hook to the process of client-side image resizing (https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/) to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ?

 

Any ideas and suggestions are welcome!

Edited by Clément Lambelet
Solved (not the best way…)

Share this post


Link to post
Share on other sites

Hi Clément and welcome to the forums.

I'm not sure about hooks, but I just wanted to mention that each variation you use in your templates, is only generated once - when you first visit the page in the frontend. Every subsequent frontend visit to that page will load much faster, since PW checks if an image variation exists or not.

re: timeout errors: Are they occuring in the backend?

Share this post


Link to post
Share on other sites

Hi dragan,

thanks for your message.

I don't have any timeout error in the backend (or any error at all for that matter).

I saw that the variations are only generated once, but I'm still losing a lot of time to generate them. The last page I created had 15 pictures and it took about 7 minutes to generate all the variations (7 timeout errors). It kind of break my workflow to have to wait that much and it  really slows every other pages (which will be bad once I want to add pages to the public site).

 

Should I try to have less variations? It seems to me that for responsive images (srcset), it's okay to have 7 different sizes.

I would really prefer to have a way to generate them via the client-side image resizing script.

Share this post


Link to post
Share on other sites

What you describe here is far, far away from what can be expected in a somewhat "normal" server / hosting setup.

If you can share a link to such pages, we could have a look at it. Or you could do this yourself - open the same page you opened as PW admin in FF/Chrome "anonymous mode".

You mentioned that IMagick is not allowed/installed on your server. Are you aware of any other server-side restrictions? Can you define custom settings via .htaccess, php.ini, user.ini or in php files with ini_set()?

Quote

I would really prefer to have a way to generate them via the client-side image resizing script.

I'm afraid someone else has to look into this (relatively new) method and check if there are options...

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for your help.

FYI, here's some server config I could find:

PHP version 		7.1
max_execution_time 	60 seconds
memory_limit 		640 Mo

I can modify .htaccess, but can't change php.ini or user.ini.

I could try to use ini_set() in a php file, but don't know what to put.

I will ask my host (infomaniak), if it would be possible to add IMagick.

 

As for the pages, they are quite simple: https://c-lambelet.com/new/en/projects/collateral-visions/

Here's the code responsible to generate the variations (excerpt):

$options = array(
  'quality' 	=> 71,
  'upscaling' 	=> false,
  'cropping' 	=> false,
  'sharpening' 	=> 'none'
);
		
if($size == 1) { // context specific, here's means full width of browser window
    $i400 = $image->width(400, $options);
	$i800 = $image->width(800, $options);
	$i1200 = $image->width(1200, $options);
	$i1600 = $image->width(1600, $options);
	$i1850 = $image->width(1850, $options);
	$i2250 = $image->width(2250, $options);
	$i2650 = $image->width(2650, $options);
	$i2880 = $image->width(2880, $options);
			
	$markup = '<img src="'.$domain.$i400->url.'"
					srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
					data-srcset="'.$domain.$i400->url.' 400w,
								'.$domain.$i800->url.' 800w,
								'.$domain.$i1200->url.' 1200w,
								'.$domain.$i1600->url.' 1600w,
								'.$domain.$i1850->url.' 1850w,
								'.$domain.$i2250->url.' 2250w,
								'.$domain.$i2650->url.' 2650w,
								'.$domain.$i2880->url.' 2880w"
					data-sizes="auto"
					class="lazyload"
					alt="'.$alt.' - © Clément Lambelet">';
}

---

14 hours ago, dragan said:
Quote

I would really prefer to have a way to generate them via the client-side image resizing script.

I'm afraid someone else has to look into this (relatively new) method and check if there are options...

Anyone would have an idea for this hook? I would be really interested for other uses as well (like auto tagging of the image).

Share this post


Link to post
Share on other sites

Hi all,

 

thanks @bernhard for this idea. I didn't know how to implement wire-queue properly.

So I went with a more simple way (for myself) which was to modify InputFieldImage.js (in wire/modules) , and make an ajax call to a script which resize the images.

I'm pretty sure it's not the best way to do that, but it's working better (the server seems to handle the resize better if it's from different requests).

It takes around 10 sec to generate the 7 sizes (with GD) compare to a 60 seconds timeout before.

 

Thanks for the help. I will mark the topic as solved.

  • Like 1

Share this post


Link to post
Share on other sites

Are you aware that your changes to wire/modules/InputFieldImage.js will be lost when you update your processwire installation? I'm sure there's a better but also simple solution if you already have a working setup :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
    • By rushy
      Hi all
      Continuing my first project where I am creating and manipulating stuff from the frontend. Till now I've always added things like images from the backend, but in this project I need to add and move images from a frontend control. This is a photo album where images are stored in albums, each album being a page containing a Pageimages array in the usual way. So what I want to know is how do I move an image from one album (page) to another in the frontend? I just need some guidance on how to approach this.  I suppose I need to do a copy and delete - but how do I copy an image or images from one page to another? What function should I use to create a new image on an existing page? I include a code snippet from the server side of my delete image request and it works fine. I'd like to implement something similar for a move and upload new image request. 
      Many thanks for any help. Paul 
      <?php namespace ProcessWire; // sanitize inputs as 1-line text $action = $sanitizer->text($input->post('action')); $instr = $sanitizer->text($input->post('input')); $sel = $input->post('selected'); // Expect JSON for image selected image list $selected = json_decode($sel); $nosel = count($selected); $response = array(); // for building JSON response switch($action) { // delete selected images case 'delete': $out = "<p>Deleted $nosel image(s)</p>"; foreach($selected as $item){ $album = $pages->get($item->album); $album->of(false); $out .= "<p>Image {$item->file} from album {$album->title}</p>"; $album->images->delete($item->file); $album->of(true); } $out .= saveUpdatedAlbums($pages, $selected); // add the response message for the delete $response['message'] = $out; break; ...... // save any album that had an image deleted function saveUpdatedAlbums($pages, $selected) { $cur = ''; $out = ''; foreach($selected as $item){ $album = $pages->get($item->album); if($album->id != $cur) { $album->of(false); $album->save('images'); $album->of(true); $cur = $album->id; $out .= "<p>Updated album {$pages->get($cur)->title}</p>"; } } return $out; }  
       
       
    • By Robin S
      Inspired by a recent question.
      Image Crop Ratios
      Allows preset aspect ratios to be defined per image field for the ProcessWire image crop tool.
      The module adds a select dropdown to the crop tool. Choose an aspect ratio and the crop area will be fixed to that ratio.
      Screencast

      Installation
      Install the Image Crop Ratios module.
      Configuration
      Default aspect ratios for all image fields can be defined in the module config. Aspect ratios for specific image fields can be defined on the Input tab of the field settings. You can override the ratio settings in template context if needed. Insert a hyphen as the first item in the ratio settings unless you want to force a ratio to be applied to the crop tool. The hyphen represents a blank option that allows a free crop area to be drawn. Usage
      Click the "Crop" link on the details view of an image thumbnail. Click the "Crop" icon at the top of the editor window. Choose an option from the "Ratio" select dropdown.  
      https://github.com/Toutouwai/ImageCropRatios
      https://modules.processwire.com/modules/image-crop-ratios/
    • By rushy
      Bit of a newbie type question, even though I've been using PW for quite a while, I've not had to manipulate assets from the front end before.  I now have a need to update image properties from the front end and I'm trying to update an image description and tags when clicking on a link. I get the selected image and for example I can delete it with the code below. But I am missing some basic understanding when updating image description field as nothing happens, no errors but the description field remains empty. Any idea what steps I am missing? Many thanks. 
      // how to update image description? $al = $pages->get($album); $pgfile = $al->images->getFile($file); $al->of(false); $pgfile->description = "Test description"; $al->save(); // to delete an image - this works $al->of(false); $al->images->delete($file); $al->save();  
    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

×
×
  • Create New...