Jump to content
tires

Check if image is used in texarea

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

  • Like 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
Posted (edited)

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 by Robin S
Edited because it's more reliable to keep the last fullstop in $match_url
  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...