Jump to content

Recommended Posts

We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.

https://github.com/blue-tomato/ImageBlurhash

E.g. where we use this in production:

  • Like 19
  • Thanks 3

Share this post


Link to post
Share on other sites

This is awesome. Have to test it in production. Thank you

  • Like 2

Share this post


Link to post
Share on other sites

Hi @Markus (Blue Tomato)

I also think this is awesome!

I wanted to try it, but I have some strange problems getting in running. I don't know if it is only me, but nevertheless I wanted to post here. Maybe someone can help. 

One strange issue at first: 
When an image is saved, the hash is not stored in the db table (although the "insertBlurhash" function returns true).

And the second issue comes when calling the "getBlurhashDataUri" function. (I manually inserted the hash string to the database, because of the before mentioned issue). 
Then I'll get based on the image up to several 100-thousands warnings like "PHP Notice: Undefined offset: 208 in .../ImageBlurhash/ImageBlurhash.module.php:122".

Maybe there is some config issue on my side or anything else I missed. But maybe someone has an idea. 

Btw. I checked it both on Windows and Linux with PHP 7.2 and latest ProcessWire dev version.

Share this post


Link to post
Share on other sites
8 hours ago, androbey said:

Hi @Markus (Blue Tomato)

I also think this is awesome!

I wanted to try it, but I have some strange problems getting in running. I don't know if it is only me, but nevertheless I wanted to post here. Maybe someone can help. 

One strange issue at first: 
When an image is saved, the hash is not stored in the db table (although the "insertBlurhash" function returns true).

And the second issue comes when calling the "getBlurhashDataUri" function. (I manually inserted the hash string to the database, because of the before mentioned issue). 
Then I'll get based on the image up to several 100-thousands warnings like "PHP Notice: Undefined offset: 208 in .../ImageBlurhash/ImageBlurhash.module.php:122".

Maybe there is some config issue on my side or anything else I missed. But maybe someone has an idea. 

Btw. I checked it both on Windows and Linux with PHP 7.2 and latest ProcessWire dev version.

Hi @androbey,

Hm, sounds strange. What does the createBlurhash return before insertBlurhash is executed?

I think the second issue depends on the first issue. Something is wrong with the creation of the blurhash - I guess it makes an corrupt image. Do you have an example image for me? Maybe I could reproduce it on my system.

FYI: currently in runs on our production server with php 7.4, mysql 5.7 and latest processwire dev version on an debian buster machine

Share this post


Link to post
Share on other sites

Hi @Markus (Blue Tomato),

thanks for your reply. 

I tried again with an image found on the web, but no luck.

createBlurhash for this particular image returns "LdLx}oxdzpwN}tNHNsbI#laxS}f*" (so at least seems to work?), but is not stored in the db.

Image for this test: https://pixabay.com/get/53e2d14b4b5aaf14f6da8c7dda35367b1c3ddce05152774a_1280.jpg

Maybe I can check tomorrow with a different test setup.

Share this post


Link to post
Share on other sites

Hi @androbey,

The whole SQL thing let me rethink how I store the blurhashs. I discovered the Pagefile->fildedata API and refactored the module to use this instead of the custom SQL column in the image field table. At the first try it looks that everything works well. Please test again 🙂

https://github.com/blue-tomato/ImageBlurhash/releases/tag/2.0.0

Share this post


Link to post
Share on other sites

Hi @Markus (Blue Tomato),

thank you for the update. 

I tested the new version and the generation and storage of the blurhashs works fine! On a side node, I find it still strange that the custom SQL did not (always) work.
After upgrading my issue with "undefinded offset" was still present. I checked the used PHP Blurhash library and your code and I adjusted lines 108 and 109 and replaced $height and $width with $calcHeight and $calcWidth.

This solves the issue (no more notices), but I don't know if it has any drawbacks..

  • Like 2

Share this post


Link to post
Share on other sites
10 hours ago, androbey said:

Hi @Markus (Blue Tomato),

thank you for the update. 

I tested the new version and the generation and storage of the blurhashs works fine! On a side node, I find it still strange that the custom SQL did not (always) work.
After upgrading my issue with "undefinded offset" was still present. I checked the used PHP Blurhash library and your code and I adjusted lines 108 and 109 and replaced $height and $width with $calcHeight and $calcWidth.

This solves the issue (no more notices), but I don't know if it has any drawbacks..

There was one problem, that the Hook was sometimes executed before the entry was saved to the database. So the blurhash query did not found the entry. And the second problem was an encoding issue with some characters int he blurhash.

Strange... this undefinded offset did never happen in my side. But I will check if $calcHeight and $calcWidth works on my side and will change this in the repo

  • Like 1

Share this post


Link to post
Share on other sites

This is a great concept, thanks for creating a module for it - have to try that soon! 🙂 

  • Like 2

Share this post


Link to post
Share on other sites

Very interesting! This is definitely the cleanest and most straight-forward option for generating low-quality image placeholders. Thanks for releasing 🌝

Two questions  @Markus (Blue Tomato):

1. How is performance for generating the data URIs? Do you generate them on the fly for every request or do you store the final LQIP data URI somewhere as well? My current implementation puts the tiny 200byte LQIP file alongside the source image; I wonder what's better here: generating in memory or reading from disk.

2. I remember you releasing a similar tool for generating SVG shapes — did you stop using that in favor of the blurhash or are you using both in parallel?

Share this post


Link to post
Share on other sites
4 hours ago, d'Hinnisdaël said:

Very interesting! This is definitely the cleanest and most straight-forward option for generating low-quality image placeholders. Thanks for releasing 🌝

Two questions  @Markus (Blue Tomato):

1. How is performance for generating the data URIs? Do you generate them on the fly for every request or do you store the final LQIP data URI somewhere as well? My current implementation puts the tiny 200byte LQIP file alongside the source image; I wonder what's better here: generating in memory or reading from disk.

2. I remember you releasing a similar tool for generating SVG shapes — did you stop using that in favor of the blurhash or are you using both in parallel?

1. Currently the data URIs are not cached or saved somewhere. They are generated on the fly - I did not see huge performance issues yet - we use ProCache for caching the whole HTML.

2. Yes we used "SVG Primitives". But the setup for this was too much work to maintain. Primitive itself was only written in Golang and the generation of the images took a huge amount of server resources.

Share this post


Link to post
Share on other sites

@Markus (Blue Tomato) I had a chance to use this on a production site and it's working great! Looks fantastic. Quite a bit faster than expected as well — I measured 10ms per image on a low-end Digital Ocean box, so no need for atomic caching so far. Thanks again for releasing, really appreciate this one 👽

  • Like 1

Share this post


Link to post
Share on other sites

I get a php notice undefined offset in line 110 on the main module.php file - it doesn't break anything but folks have asked about seeing it in tracy debug.

Share this post


Link to post
Share on other sites
On 7/27/2020 at 12:05 PM, gornycreative said:

I get a php notice undefined offset in line 110 on the main module.php file

I got this too, and it seems to happen when passing fraction values to getBlurhashDataUri() - these were calculated for an image ratio (e.g. $height = $width * 0.35).

If you're doing this, try passing whole numbers, or rounding the calculated dimension first (using floor, round, ceil functions):

$image->getBlurhashDataUri(95, floor(95 * $ratio));

 

  • Like 2

Share this post


Link to post
Share on other sites

Would love to try this module as my site's very image heavy, but is there any alternative way to install it without having to use Composer?

Share this post


Link to post
Share on other sites
On 8/13/2020 at 12:02 PM, houseofdeadleg said:

Would love to try this module as my site's very image heavy, but is there any alternative way to install it without having to use Composer?

Yes it's possible. You can download it from the pw module directory but you also have to install https://github.com/kornrunner/php-blurhash manually and include it.

Share this post


Link to post
Share on other sites
On 8/13/2020 at 12:02 PM, houseofdeadleg said:

Would love to try this module as my site's very image heavy, but is there any alternative way to install it without having to use Composer?

Maybe worth a try: https://php-download.com/

PS: https://stackoverflow.com/questions/40545795/how-do-i-install-composer-php-packages-without-composer

  • Like 2

Share this post


Link to post
Share on other sites
On 8/12/2020 at 11:52 PM, Craig said:

I got this too, and it seems to happen when passing fraction values to getBlurhashDataUri() - these were calculated for an image ratio (e.g. $height = $width * 0.35).

If you're doing this, try passing whole numbers, or rounding the calculated dimension first (using floor, round, ceil functions):


$image->getBlurhashDataUri(95, floor(95 * $ratio));

 

Thx, I pushed a fix for this by rounding width and height directly in getBlurhashDataUri

  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, bernhard said:

Hmmm, can you send me some of your original uploaded images which makes this problem?

Share this post


Link to post
Share on other sites

I'm getting the error with the default Windows desert sample image when using this:

$hash = $page->pic()->getBlurhashDataUri($page->pic()->width, 100);

 

Desert.jpg

Share this post


Link to post
Share on other sites
On 9/18/2020 at 11:22 PM, bernhard said:

I'm getting the error with the default Windows desert sample image when using this:


$hash = $page->pic()->getBlurhashDataUri($page->pic()->width, 100);

 

Desert.jpg

I will take a look into it this week. In the meanwhile you try to create the blurhash based on a smaller size.

I make this on also every blurhash pic on blue tomato

E.g.

// original pic size: 500/200
$hash = $page->pic()->getBlurhashDataUri(50, 20);

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 Bike
      Hello everyone!
      I am new to PW and at this moment there are these issues that I cannot clearly understand:
      1) Image Position
      Previously I used TinyMCE and there I could get an image floating left or right by simply selecting it and pressing the text justify buttons from the menu bar. In CKEditor however it just causes the hole paragraphs content to be aligned which results in code like this and of course the image is not floating that way:
      <p class="xyz" style="text-align:right"><img alt="" src="someimage.jpg" width="1000" /></p> Q: Is it possible to add float to images just by clicking the text align buttons? As far as I figured it out the only way to align images is within the image dialouge which I find is pretty inconvenient.
      2) Image Caption / Figure / Figcaption
      When a title is given to an image it is wrapped inside a figure tag and a figcaption tag is applied. That's fine. But I need the image to be wrapped inside another picture tag for styling reasons (I want to add a shadow png with picture::after). I'd like to end up with this:
      <figure><picture><img alt="" src="someimage.jpg" width="1000" /></picture> <figcaption>Caption there</figcaption> </figure> Q: I think I have to modify the plugins code to achieve it, right? If so does anyone knows the file / location?
      Q: If a figure tag is placed how would I change its position say to another paragraph? Drag & drop just relocates the image leaving the figure tag where it was. How to reposition the whole thing?
      Q: How / where would I enter image description the be shown only in say a lightbox but not alongside the image itself? I thought the textarea provided in the image field could do the job but how to access it from the editor? Even possible?
      Well I hope someone understands and I'd be thankful for a clue of any of these questions.
      ✌️ Bike
       
    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By Marvin
      Hello,
      I'm new at process wire and i want to make an web using upload file and showing it at the table as a link to open it at the new tab. I wa succed while upload a file, but how i showing it as a link at the table to open it at the new tab of my browser? Any suggestion may helpfull
      Here i attach my code below :
      This code is for upload it to back-end (process wire)
      <?php $note = $note2 = $hidden =""; if($input->post->submit){ $upload_path = $config->paths->assets.'files/upload/'; if(!is_dir($upload_path)){ if(!wireMkdir($upload_path)) throw new WireException("No upload path"); } $original = $sanitizer->text($input->post->original); $indonesia = $sanitizer->text($input->post->indonesia); $other = $sanitizer->text($input->post->other); $composer = $sanitizer->text($input->post->composer); if(!$original || !$indonesia || !$other || !$composer){ $note = "Data tidak lengkap"; } else { $newFile = new WireUpload("song_files"); $newFile->setMaxFiles(1); $newFile->setOverwrite(false); $newFile->setDestinationPath($upload_path); $newFile->setValidExtensions(array('pdf','docx','doc')); $files = $newFile->execute(); if(!count($files)) { $newFile->error("No files received, so not creating page."); return false; } $newImg = new WireUpload("img_files"); $newImg->setMaxFiles(1); $newImg->setOverwrite(false); $newImg->setDestinationPath($upload_path); $newImg->setValidExtensions(array('jpeg','jpg','png','gif')); $files = $newImg->execute(); if(!count($files)) { $newImg->error("No files received, so not creating page."); return false; } $newPage = new Page(); $newPage->template = "files"; $newPage->parent = $pages->get("/files/"); $newPage->title = $original; $newPage->text_1 = $indonesia; $newPage->text_2 = $other; $newPage->text_3 = $composer; $newPage->of(false); $newPage->save(); foreach($files as $filename) { $filepath = $upload_path . $filename; $newPage->files->add($filepath); $newPage->message("Add file : $filename"); unlink($filepath); } $newPage->save(); } } ?> and this code to showing it as a link at the table
      <table class="border"> <tr> <th>No.</th> <th>Original Song Title</th> <th>Indonesia Song Title</th> <th>Other Song Title</th> <th>Composer</th> <th>File (pdf)</th> </tr> <?php $num = 1; $song; foreach($pages->get("/files/")->children as $child) { //showing every child at files parent directory $page == $child; $song = $pages->get("/files/".$child->id."/")->files; //showing uploaded files at child directory echo $child->id; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$song->httpUrl."'</a>".$song->name."</td></tr>"; } ?> </table> Thank you for any suggestion
    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
    • By picarica
      so this is really weird issue i am so confused about this, so i have setup 'images' field where i put images and the include them in CKeditor, should work right? well it works on some sites, i use it nearly in every page but at one page, the images included in that CKeditor only show up, when i am logged into processwire, when i turn on incognito mode the images dissapear, but only on this specific page, everywhere else it works perfectly, has anyone came across this issue? i have nowhere in the site login checker, i have no idea what is going on
×
×
  • Create New...