module TextformatterImgDataUri - Embed small images as data URLs

[BitPoet]

Here's a small module I wrote a few years ago and was asked to share in the module repo.

TextformatterImgDataUri

This Textformatter checks all images in the field's markup for images under a certain size and converts those from links to data URLs, i.e. it embeds the image data itself. This can be handy when you cache whole pages and want to cut down on the number of requests.

Original post with the module code:

 

[Leftfield]

Hey, @BitPoet I'm excited about this module (and I really need it!). I appreciate your help in advance.

I might be stupid as a rock, but at least I'm consistent. I have tried on Windows and Linux (in both cases, php_fileinfo.dll is on). I placed it in the image field, like in the screenshot, but nothing happened. I've cleared the cache, etc. The debug mode is ON, and no error is logged.

[BitPoet]

Hi @Leftfield, I'm not sure what the reason could be, so I've added logging to the dev branch of the module. You can download it here. With debug mode on, it logs to "imgdatauri".

[Leftfield]

@BitPoetthanks for helping me out!!! All I can get is (normal). Just pasting part of the code:

2024-05-15 09:27:23	leftfield	http://localhost/test/	Running TextformatterImgDataUri
2024-05-15 09:27:23	leftfield	http://localhost/test/	Running TextformatterImgDataUri
2024-05-15 09:27:23	leftfield	http://localhost/test/	Running TextformatterImgDataUri
2024-05-15 09:27:23	leftfield	http://localhost/test/	Running TextformatterImgDataUri
2024-05-15 09:27:23	leftfield	http://localhost/test/	Running TextformatterImgDataUri

 

[BitPoet]

Ah,  sorry, I missed a hint in your screenshot. The module won't do anything applied to the file descriptions. You need to add the Textformatter to the textarea field that uses the images.

[Leftfield]

Oh man, and I've put it in the field description :D. I was born just a few hundred kilometers from the Tesla's house. It seems like I am Jang for his Jing.

[HMCB]

@BitPoet This module is assigned to specific fields, like an image upload field? The resulting URI is then saved in Processwire in a separate field? What I am looking to do is save have both the image and URI saved in PW.

[BitPoet]

15 hours ago, HMCB said:

This module is assigned to specific fields, like an image upload field? The resulting URI is then saved in Processwire in a separate field? What I am looking to do is save have both the image and URI saved in PW.

It's assigned to Textarea fields that contain HTML, and it just modifies the output. The img tags stay unchanged in the database, and the images themselves aren't changed at all.

If you want to retrive the data URI programmatically, that would have to be implemented with a hook. The code for the conversion itself is pretty straight forward (untested):

<?php

// This can be accessed as $image->dataURI
wire()->addHookProperty('Pageimage::dataURI', function(HookEvent $event) {
  $pageimage = $event->object;
  $fullpath = $pageimage->filename;
  
  // Check if image is larger than a certain size, in which case we return the regular image url:
  if(filesize($fullpath) > 16384) {
    return $pageimage->url;
  }
  
  $mime = mime_content_type($fullpath);
  $dataUri = "data:$mime;base64," . base64_encode(file_get_contents($fullpath));
  return $dataUri;
});

If you actually want the data URI stored in the database, you could add a custom field to the image field and fill it in a saveReady hook.

[HMCB]

@BitPoet amazing and helpful response. This is perfect for an opportunity that just materialized in the last 48 hours. Thanks ??.