Check if image is used in texarea

[tires]

Hello!

I got a template containing a textarea and an image field.
The files from the image field are sometimes inserted into the textarea (CKEditor).
If that is the case i dont want to show (output) them again. If not i want to show (output) them below the textarea.

I there a way to check, if an image is already outputted on the page?

 

[horst]

I think, you need to parse the html markup of the textarea field(s) for <img src="..." />, collect any found in an array, and then, when displaying all images from the images field, compare each name with the collection and skip those that exists in the collection.

[tires]

Thank you!

So there is no way to handle it with processwire and i have to use php?

Did you tried this method and can you post a code snippet?

[horst]

No, sorry, no snippet at hand. But you can look into any TextformatterModule that deals with images, as they do exactly that (parsing the markup and identify images). Look into the modules directory to find some. ;-)

[BitPoet]

Here's a quick&dirty snippet:

// Make sure to adapt the name to your image field here:
$baseUrl = $page->images->url;

$match = [];
preg_match_all(
	'~<img[^>]+src=([\'"])(' . $baseUrl .'[^\'"]+)\\1~is',
      $page->body,	// Adapt the name of your richtext field if not "body"
      $match
);
$seen = $match[2];

// Again, adapt the image field name
foreach($page->images as $img) {
	if(! in_array($img->url, $seen)) {
		// Output image
	}
}

 

[tires]

Thanks a lot!!!
I will try it out soon!

Wouldn`t that be a helpful add on to the textarea or the image module (for example "exclude images that are already rendered on page").

[wbmnfktr]

Those are independet fields - at least by default, even though there are some connections between textareas and image fields.

Since I started using ProcessWire, back in 2014/2015, I never had this kind of need/request.

I guess the project you are working on is kind of automated or at least kind auto-optimized - a larger blog or something. Am I right with this?

[tires]

21 hours ago, wbmnfktr said:

I guess the project you are working on is kind of automated or at least kind auto-optimized - a larger blog or something. Am I right with this?

No, it just some kind of blog.
Some articles contains images which usually appears at the end of the article.
But in some articles i want to add some of the images in the textareas. Those images just should not appear twice on the page.

Is there another way to achive this?

[tires]

On 8/12/2019 at 2:29 PM, BitPoet said:

Here's a quick&dirty snippet:

// Make sure to adapt the name to your image field here:
$baseUrl = $page->images->url;

$match = [];
preg_match_all(
	'~<img[^>]+src=([\'"])(' . $baseUrl .'[^\'"]+)\\1~is',
      $page->body,	// Adapt the name of your richtext field if not "body"
      $match
);
$seen = $match[2];

// Again, adapt the image field name
foreach($page->images as $img) {
	if(! in_array($img->url, $seen)) {
		// Output image
	}
}

 

The code don't work for me. ?

At least one of the images are still shown below the textarea.

[Robin S]

Here's a slightly different approach. Assumes an image field named "images" and a CKEditor field named "body".

foreach($page->images as $image) {
	// Get the image URL excluding the file extension (to account for image variations)
	$match_url = substr($image->url, 0, -strlen($image->ext));
	// Skip the image if the match URL occurs at the start of a src attribute in $page->body
	if(strpos($page->body, "src=\"$match_url") !== false) continue;
	// Output the image or whatever
	echo "<img src='{$image->width(300)->url}' alt='$image->description'>";
}

 

Edited August 14, 2019 by Robin S
Edited because it's more reliable to keep the last fullstop in $match_url

[BitPoet]

15 hours ago, tires said:

The code don't work for me. ?

At least one of the images are still shown below the textarea.

Didn't think of image variations (which you get when you resize/edit the image in CKEditor's image dialog), so that's the likely reason. @Robin S' solution should catch these too.

[tires]

Works perfectly!!!

Thanks a lot!!!

[tires]

BTW. Is there a way to take the image title from the image field an show it under the image in the textarea field?