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 dragan
      All of a sudden image-upload seems broken. No matter if I want to upload one single image or several images.
      Chrome console says:
      Uncaught SyntaxError: Unexpected token in JSON at position 414 at JSON.parse (<anonymous>) at Function.parseJSON (JqueryCore.js?v=1535110864:2) at XMLHttpRequest.<anonymous> (InputfieldImage.js?v=122-1535110864:1973) // File uploaded: called for each file xhr.addEventListener("load", function() { xhr.getAllResponseHeaders(); var response = $.parseJSON(xhr.responseText); // line 1973 The spinning animation GIF keeps on spinning forever...
      I thought I have seen a forum thread about such an error, but I can't find it anymore.
      If I inspect https://dev.mysite.com/backstage/page/edit/?&amp;id=11203&amp;InputfieldFileAjax=1 I only see headers, no content.
      content-type: application/octet-stream (in request header)
      in response headers:
      x-tracy-ajax: 1
      x-xss-protection: 1; mode=block
      Does anyone know what could cause this?
      PW 3.0.111 / PHP 7.2.8
    • By Mustafa-Online
      I got a field with a type of "files" named: course_file .. how can I upload it to custom directory??
    • By j00st
      Hi everyone! 
       
      So I've been going over all the Animated GIF topics before posting this, but unfortunately I'm none the wiser at the moment.
      I'm super happy Horst's module has been included into the Core install, but as you might guess...I'm still having issues with my Animated GIFs 😞
      CMS & File checklist:
      Double-checked if the module is installed = YES
      Correct upload of GIF = YES
      Testing GIF has 72dpi & is 1000x1000px & 563kb = Shouldn't cause any problem, right?
      Uploaded GIF still shows animation in backend = YES
      ProcessWire is up to date = 3.0.108

      Front-end tests:
      Tried the following code, to see if it had to do with the way I'm resizing, but both with no results.
      <?php echo $img->width(720)->url?> <?php echo $img->size(720, 0)->url?> Here's the big catch though: 
      If I just echo the $img->url it will show the GIF...so it has to do with the resizing...but this is where I got stranded...
      UPDATE:
      Just in case, I also added the PHP & MySQL versions I'm running. Server's online not local.
      PHP 5.6.32 (in the overview) ----> But it's in fact, when going to the PHP admin, it's running PHP 7.0. Any chance this is what's causing the issue?
      MySQL 5.6.23-78.1
      Any tips?
       
       
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel