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 18
  • 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

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 Mats
      BETA: SplashAndGrab
      https://github.com/madebymats/InputfieldSplashAndGrab
      This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
      (Unsplash is a stock photo service where you can download images for free and use as you wish. No strings attached.)   
      You can search by string, colors, orientation/crop and order by relevance or time published
      I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

      Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.
    • 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();  
×
×
  • Create New...