Weekly update – March 13, 2020

[ryan]

I hope you are having a good week and staying healthy with all that’s going on with this Coronavirus pandemic. Here in Atlanta, they have closed the schools indefinitely, so I’ve got my kids with me during the work days for awhile, which started this week. That might slow me down with work and development here, but hopefully not too much. It might also take me a little longer than usual to respond to messages temporarily, as I get used to the new schedule. It’s a nice change of pace to have the kids home during the day, even if it slows work a bit. Thankfully everyone here is healthy and we don’t yet know of anyone being sick. But then again, nobody is apparently able to get tested for it, so who knows. It sounds like the whole world is dealing with this, I hope you and your families stay healthy and safe. 

I’m still working on the same client project I’ve been working on here for months, and of course doing it all in ProcessWire. This week the client project needed to do a lot with user-submitted comments, and I had to make a lot of major upgrades to ProcessWire’s comments system in order to accommodate them. Most of these upgrades are related to API improvements and making the comments field able to better handle completely custom markup for both comments and the forms to submit them. (Commit details). A couple new classes were added, and existing classes went through major refactoring. While there have been some nice API additions as well, there aren’t any breaking changes to the existing API, so it should all keep working as it always has. I’m not going to bump the core version this week because, as major as the additions were, I don’t think they will matter much to most existing installations, so there's little reason to upgrade for most. So I’ll continue plugging away here and save the version update for when there are some more things to share as well, hopefully next week. Thanks for reading and have a great weekend. 

[adrian]

Thanks for the comments system upgrades. Any chance while you're still in that space that you'd consider taking another look at the enhancement this PR (https://github.com/ryancramerdesign/ProcessWire/pull/954) added so that logged in users don't need to fill out name, email fields etc? Thanks.

[ryan]

For logged in users, name and email are already filled in automatically and have been for awhile. There is also an option where you can make them non-editable, so that a logged in user can't modify them for each comment they make. But if you want to pull them from something other than "name" and "email" (which I think might be what you were looking for), then the new classes would definitely make it a lot easier to customize, and populate whatever you'd like in there. Likewise to render a custom avatar or hide fields, etc. The custom classes should open up a lot of new possibilities. 

[adrian]

Hi Ryan,

Yeah, the key things are:

1) make name / email fields non-editable (actually I'd prefer not visible). Where is the "non-editable" option? I can't seem to find it in the field settings or the comments docs.

2) being able to use a different name field - guests who fill out the form are likely to enter something like "John Smith", but the automatic population of this for logged in users is going to be something like "jsmith" or perhaps even "jsmith-gmail.com" - this lack of consistency isn't nice.

3) use local image for the avatar, rather than using Gravatar.

It does look like the new getFormMarkup(), renderForm(), and placeholders() might help solve some of these at least.

[AndZyk]

Hello,

I don't want to hijack this topic, but since this topic is about the comments field I just wanted to ask this short question, because a client just asked me about this:

Is there an easy way to convert links inside comments to clickable HTML-links? I know that HTML tags aren't allowed in the comments field and for a good reason, because that would be unsafe. But our client has a blog and wants to link to an internal blog post inside a comment. I could use preg_replace with a pattern to find links and add markup to them, but this way I would have to recreate the whole markup of:

$comments->render()

I would appreciate some help and I can create a new topic if this is not the right place. ?

Regards, Andreas

[ryan]

Quote

1) make name / email fields non-editable (actually I'd prefer not visible). Where is the "non-editable" option? I can't seem to find it in the field settings or the comments docs.

@adrian There are two options when you initialize your CommentForm that let you define what you want to be populated, and whether or not you want it to be editable. These are the 'presets' (array) and 'presetsEditable' (bool) options. I'm initializing with the new CommentFormCustom class below, but the presets options also work with older versions of PW:

$options = [ 'className' => 'CommentFormCustom' ];
if($user->isLoggedin()) {
  $options['presetsEditable'] = false;
  $options['presets'] = [
    'cite' => "$user->first_name $user->last_name",
    'email' => $user->email,
  ];
}
$form = $page->comments->getCommentForm($options);

As for using a local image for avatar, or deciding whether or not to show cite and email, this is where the CommentFormCustom class comes in handy. It leaves you in full control of the markup, so you can render whatever avatar image in there you want (whether CommentFormCustom or CommentListCustom), and exclude fields in your markup when conditions dictate. In previous versions, if you didn't want to show specific fields in the form then you would hide them with CSS. 

Quote

Is there an easy way to convert links inside comments to clickable HTML-links?

@AndZyk Here's how you might do that with a hook. This looks for markdown style links, i.e. [text](url) and converts them to HTML links. The regex may need improvement still, but maybe it's a starting point. 

$wire->addHookBefore('CommentList::renderItem', function($event) {
  $comment = $event->arguments(0); /** @var Comment $comment */
  $text = $comment->getFormatted('text');
  $textOriginal = $text;
  
  // look for markdown style links: [text](url)
  if(strpos($text, '](') {
    $regex = '!\[(.+?)\]\((https?://[^)\s\r\n;"\']+)\)!i';
    $link = '<a href="$2" rel="noopener noreferrer nofollow" target="_blank">$1</a>';
    $text = preg_replace($regex, $link, $text);
  }
  
  // populate changed comment text
  if($text !== $textOriginal) {
    $comment->set('textFormatted', $text);
  }
});

 

[AndZyk]

4 hours ago, ryan said:

@AndZyk Here's how you might do that with a hook. This looks for markdown style links, i.e. [text](url) and converts them to HTML links. The regex may need improvement still, but maybe it's a starting point. 

Thank you @ryan. I did not know how to just modify the comment text. ?

Personally I like markdown, but in my case I just want to replace links, so I modified this snippet to just replace links with html links:

$wire->addHookBefore("CommentList::renderItem", function($event) {

	$comment = $event->arguments(0); /** @var Comment $comment */
	$text = $comment->getFormatted("text");
	$textOriginal = $text;

	// look for link
	$regex = '@(http)?(s)?(://)?(([a-zA-Z])([-\w]+\.)+([^\s\.]+[^\s]*)+[^,.\s])@';
	$link = '<a href="$0" rel="noopener noreferrer nofollow" target="_blank">$0</a>';
	$text = preg_replace($regex, $link, $text);

	// populate changed comment text
	if ($text !== $textOriginal) {
		$comment->set("textFormatted", $text);
	}

});

Regards, Andreas

 

Edit: The regex I copied from Stack Overflow else doesn't seem to be that correct. Regex is always a big question mark for me. I have to look further. ?