Jump to content

TextformatterImgDataUri - Embed small images as data URLs


BitPoet
 Share

Recommended Posts

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:

 

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

  • 1 month later...

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.

Screenshot 2024-05-11 063638.png

Link to comment
Share on other sites

@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


 

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

@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.

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
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
 Share

×
×
  • Create New...