Can I add information to the images displayed inside the body?

[Xonox]

Hi,

I need to add the original image dimensions (width x height) for the images inserted in the body field, in a few data-fields. Something like:

<a href="/site/assets/files/1092/image-1.jpg">
  <img alt="" src="/site/assets/files/1092/image-1.690x0-is.jpg" width="690" data-width="1500" data-height="1000 ">
</a>

Where data-width and data-height are the image-1.jpg dimensions.

I tried to do this through a file, to control the field output:

templates/fields/post/body.php

But turns out the body comes already formatted from the DB, so I can't override the image display, unless I use some cumbersome str_replaces. Even with this solution, it's impossible to achieve the desired result.

Is there any way I can do this through a ProcessWire process?

I know it can be done through php, reading the file's header to extract the height and width and then do a str_replace on the body string to insert the desired code. However I'm curious if it can be done in any simpler and more effective way, without having to read the files from disk and do the replaces.

Thanks,

[Macrura]

I think if you make a textformatter is should not be that hard to grab the images and add your data attributes; maybe look at image interceptor and/or the external images modules, and see if you can get the tags by regex or using dom parser...

[kixe]

You can get the original size via API:

// a page has an image field named 'image'
$page->image->first()->size(50,50);
echo $page->image->first()->width; // returns (int) 50
echo $page->image->first()->original->width; // returns (int) 1000 (original size)
// if there doesn't exist a variation of the image the $original property returns null

Learn more: https://processwire.com/api/ref/pageimage/#api-original

[Xonox]

On 6/13/2017 at 3:45 AM, Macrura said:

I think if you make a textformatter is should not be that hard to grab the images and add your data attributes; maybe look at image interceptor and/or the external images modules, and see if you can get the tags by regex or using dom parser...

I tried Image Interceptor, and it didn't fit my needs. I guess I'm stuck with regex, then.

On 6/13/2017 at 6:33 AM, kixe said:

You can get the original size via API:

I knew this, the problem is getting the original size and insert it in the body where the images are placed. I'll have to do it via regex/string replacement.

Thanks for your help. I'll see what I can do with your input.

[Juergen]

4 hours ago, Xonox said:

I tried Image Interceptor, and it didn't fit my needs. I guess I'm stuck with regex, then.

Image interceptor is only a starting point. You need to write your own module that fetches all your Images inside the body field. Maybe you can use a class fe phpquery to get all your Images. After that you can write your prefered image markup. I use it to add a rel=lightbox attribute to images in the body.

[Macrura]

8 hours ago, Juergen said:

Image interceptor is only a starting point

ditto, i was basically implying that the code may be adjustable or tweakable within interceptor, to add your data attributes; the import external images shows how to grab any image tag using dom parser; i can take a look and see how hard it would be to add data attributes to the resultant image since the mod already switches out the href; come to think of it, most of the code for that came from Adrian's wordpress migrator, so there could be something in there also

[Macrura]

This code can be placed into any generic site utilities module and you can add the hook in the init(); you can for example take the hello world module and clone it, rename to SiteUtilities, and then you can throw all of your custom stuff in there, instead of doing independent modules for everything..

$this->pages->addHookBefore('save', $this, 'addImageDataAttributes');	

public function addImageDataAttributes($event) {

		$page = $event->arguments[0];
		$ta_field = 'body'; // change to your editor field that holds the images
		$img_field = 'images'; // change to the name of the images field

		if(!$page->$img_field || !$page->$ta_field) return;

		$html = $page->$ta_field;
		if (strpos($html,'<img') === false) return; //return early if no images are embedded in html

        $dom = new \DOMDocument(); 
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        $images = $dom->getElementsByTagName('img');
        if(!$images->length) return; // not needed?

        $imgCount = 0;
        foreach ($images as $image) {
            $img_url = $image->getAttribute('src');
			$path_parts = pathinfo($img_url);
            $imgName = $path_parts['basename'];

            $sysImage = $page->$img_field->get("name={$imgName}");
            $width = $sysImage->width;
            $height = $sysImage->height;

			$image->setAttribute('data-width', $width);
			$image->setAttribute('data-height', $height);

            $imgCount++;
        }

        if(!$imgCount) return;
    	$page->of(false);

   		$page->$ta_field = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));

   	 	$page->save($ta_field);
   	 	$this->message("image links updated with data attributes.");

    }

 

This has been tested and works, but it will only retain the data attributes if your CK editor settings allow it..

[Robin S]

Adding to @Macrura's suggestion: rather than do the preg_replace and str_replace to remove the unwanted doctype, body, etc, you can avoid those by using an options parameter for loadHTML():

$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);