Jump to content
Xonox

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

Recommended Posts

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,

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

  • Like 4

Share this post


Link to post
Share on other sites

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);

 

  • Like 4

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 skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      Using:
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
    • By totoff
      Dear all,
      I'm upgrading an older side with the new custom fields for images feature as of 3.0.142. My image field is set to "Automatic" and holds a bunch of images together with their respective description on each page. New custom fields include "caption" among others and to make my live easier I I'm trying to populate "caption" with the value from the (default) description field. But unfortunately I can't seem to find out how to save the newly set values. This is my code:
      <?php foreach (page()->images as $image) { $image->set('caption', $image->description); bd($image->caption); echo files()->render("markup/views/view-card-image-fancybox.php", array('image'=>$image)); } ?> <?php $page->save(); bd($page->save()); ?> This sets the value as intended (see screenshot) but doesn't save it permanently to the database. What am I doing wrong?
      Thanks!
       

    • By dalibor
      I'm using hook for retrieving data from image metadata (IPTC) after image upload and filling them to some fields. When I choose server-side image resize, everything works well. But when I use client-side resize (which si much faster and client comfortable  - it uses PWImageResizer.js) image metadata are lost during resizing - I have downloaded the file after resize and checked for EXIF, IPTC etc. and they are not present.  Using PW 3.0.165. Tried to look into PWImageResizer.js but uhh it's too javascreepy to me:) 
×
×
  • Create New...