Jump to content
rafaoski

I just added a new Uikit3 / Minimal Profile for ProcessWire 3x

Recommended Posts

Posted (edited)

This is a profile based on the Uikit3 framework and features from the regular site profile.
Requires the latest version processwire 3.0.127

Download from this link:
https://github.com/rafaoski/site-uk3-minimal

Live Example: https://uk3-min.templatek.pl/

Basic Info:

  1. Most of the profile settings and translates are in the _init.php file.
  2. Functions can be found in the _func.php, _uikit.php file.
  3. The entire view is rendered in the _main.php file that uses markup regions.
  4. You can easily add hooks using the ready.php file.
  5. Options page added with the new “Unique” status, which you can use in this simple way like:
    pages('options')->site_name
    pages->get('options')->site_name
  6. The Author's website's blog entries use URL segments (/ authors / {author-name} /), see views/blog/blog.php for more info.
  7. This profile has additional functions (_uikit.php) from the regular uikit3 profile, which is located in the basic ProcessWire installer ( there are minor changes, such as adding translations from _init.php )

Screnshoots:

home.thumb.png.f5996ecfcc5fc37d15dd1ebc186dbf60.png

 

about.thumb.png.4fd3795ec34a8d9407c1b27ea24131e7.png

 

contact.thumb.png.f0f869498c9e810ca91c3024cf8a3140.pngcontact.thumb.png.f0f869498c9e810ca91c3024cf8a3140.png

 

blog.thumb.png.973069a68c6f2a62b0d1e82c5c4b4695.png

 

blog-post.thumb.png.72b68fcc489eaa24b620d86a8b0674e6.png

 

pages.thumb.png.0a25e27b2dafdac057aafae7123ae429.png

options.thumb.png.dd94c05c708ebb47a3b1fc8b9d9c2a72.png

 

 

 

 

 

Edited by rafaoski
Change the link to page view
  • Like 7

Share this post


Link to post
Share on other sites

Nice.

Apparently, my anti-virus software thinks your demo site is spam.

spam.PNG.4fef8d3f50b1ee56ffbacdd8ffa5f3bc.PNG

 

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

Thanks for info @dragan ... This is just the test domain that I got along with the hosting ... Apparently something is wrong with her ... I've added a profile to a different domain  https://uk3-min.templatek.pl/ ... Now it should be better 🙂

 

Edited by rafaoski
Update demo profile URL

Share this post


Link to post
Share on other sites
On 7/19/2019 at 11:10 AM, rafaoski said:

Thanks for info @dragan ... This is just the test domain that I got along with the hosting ... Apparently something is wrong with her ... I've added a profile to a different domain  https://proc-profiles.tk/uk3-min/  ... Now it should be better 🙂

 

That leads to a 404 😞

 

Anyone else try this neat profile?

Share this post


Link to post
Share on other sites

Hi @rafaoski, thank you for the profile. The demo seems to be unavailable via the link above, would you be able to bring it back to life?

  • Like 1

Share this post


Link to post
Share on other sites

Hello!

First: Thank you for this great profile!!!

I have a question: where can I turn of comments displayed on the blog post page? I cannot find it in the _func.php!

Thank you very much!

  • Like 1

Share this post


Link to post
Share on other sites

Hi and thanks @MateThemes ...
The _init.php file is responsible for most profile settings ...

You can change the setting blog comments options on this line:
https://github.com/rafaoski/site-uk3-minimal/blob/9ea54af1f144fbb9642baee67adb604be0f4b1ea/templates/_init.php#L33
'comments' => true, // Blog Comments
Just change to false:
'comments' => false, // Blog Comments

This setting should disable comments in the files:
templates/views/blog/blog-post.php ( https://github.com/rafaoski/site-uk3-minimal/blob/9ea54af1f144fbb9642baee67adb604be0f4b1ea/templates/views/blog/blog-post.php#L39 )
templates/views/blog/parts/_blog-article.php ( https://github.com/rafaoski/site-uk3-minimal/blob/9ea54af1f144fbb9642baee67adb604be0f4b1ea/templates/views/blog/parts/_blog-article.php#L59 )

You will learn more about the new functions API setting() from this place:
https://processwire.com/blog/posts/processwire-3.0.119-and-new-site-updates/#new-functions-api-setting-function

 

Share this post


Link to post
Share on other sites

Thank you very much for sharing, I have been trying to implement the option of "replying" in the comments for several weeks, I am quite close with the help provided by a user from this community. Do you know if this option is available for this uiKIT profile?

  • Like 1

Share this post


Link to post
Share on other sites

Thank @JheymanMejia for the comment and I am sorry that I reply so late, but now I have a lot of work at home (renovation of the apartment).
If you still need this option, I've added a simple reply button for comments and basic navigation for them.

https://github.com/rafaoski/site-uk3-minimal/commit/bf4b437319f804a0bfcb1ef9000dad056d2a1cb6

nested-comments-compressor.thumb.png.c58222da3d24b3be6e4c019c96cb187f.png

If you want more or less nesting, you must set "Reply depth" in the setting comments field ( this will add a reply button )

reply-d-compressor.png.4b3e297b41c5be079ef20cf88d7be6ba.png

Below is the code for the Regular blog site profile that should work:

1. Replace the selected functions in the file _uikit.php:
https://github.com/processwire/processwire/blob/7d4ca45673152436ea492b6577341ee3550e2821/site-regular/templates/_uikit.php#L898-L1040

To this code:

/*****************************************************************************************
 * ProcessWire/Uikit functions for rendering comments and comment forms
 *
 * Note: comment threads (depth), stars and votes are not yet supported in here.
 *
 */

/**
 * Render a comment repply
 *
 * @param int $commentId get comment id to add reply button
 *
 */
function commentReply($commentId) {
	return "<a class='CommentActionReply uk-button uk-button-text'
			data-comment-id='$commentId' href='#Comment$commentId'>Reply</a>";
}

/**
 * Render a ProcessWire comment using Uikit markup
 *
 * @param Comment $comment
 * @param int $calculateDepth calculate comment depth
 * @return string
 *
 */
function ukComment(Comment $comment, $calculateDepth) {

	$text = $comment->getFormatted('text');
	$cite = $comment->getFormatted('cite');
	$website = $comment->getFormatted('website');
	$field = $comment->getField();
	$page = $comment->getPage();
	$classes = array();
	$metas = array();
	$gravatar = '';

	// Set reply button
	$maxDepth = $comment->getField()->depth; // Max depth from field comments
	$replies = $calculateDepth <= $maxDepth ? commentReply($comment->id) : '';

	if($field->get('useGravatar')) {
		$img = $comment->gravatar($field->get('useGravatar'), $field->get('useGravatarImageset'));
		if($img) $gravatar = "<div class='uk-width-auto'><img class='uk-comment-avatar' src='$img' alt='$cite'></div>";
	}

	if($website) $cite = "<a href='$website' rel='nofollow' target='_blank'>$cite</a>";
	$created = wireDate('relative', $comment->created);

	if($field->get('usePermalink')) {
		$permalink = $page->httpUrl;
		$urlSegmentStr = $this->wire('input')->urlSegmentStr;
		if($urlSegmentStr) $permalink .= rtrim($permalink, '/') . $urlSegmentStr . '/';
		$permalink .= '#Comment' . $comment->id;
		$permalink = "<a href='$permalink'>" . __('Permalink') . "</a>";
		$metas[] = "<li>$permalink</li>";
	}

	$classes = implode(' ', $classes);
	$metas = implode('', $metas);

	$out = "
		<article id='Comment$comment->id' class='$classes uk-comment uk-comment-primary' data-comment='$comment->id'>
			<header class='uk-comment-header uk-grid-medium uk-flex-middle' uk-grid>
				$gravatar
				<div class='uk-width-expand'>
					<h4 class='uk-comment-title uk-margin-remove'>$cite</h4>
					<ul class='uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top'>
						<li>$created</li>
						$metas
					</ul>
				</div>
			</header>
			<div class='uk-comment-body'>
				$text
			</div>
			$replies
			</article>
	";

	return $out;
}

/**
 * Render a list of ProcessWire comments using Uikit markup
 *
 * Note: does not currently support threaded comments (comment depth).
 * Use ProcessWire’s built-in comments rendering for that purpose.
 *
 * @param CommentArray $comments
 * @param array|string $options Options to modify default behavior
 *  - `id` (string): HTML id attribute of the comments list (default='comments').
 * @param int $calculateDepth calculate comment depth
 * @return string
 *
 */
function ukComments(CommentArray $comments, $options = array(), $calculateDepth = 0) {

	$out = '';

	$calculateDepth++;

	$defaults = array(
		'id' => 'comments',
		'ul' => true
	);

	if(!count($comments)) return '';
	$options = _ukMergeOptions($defaults, $options);

	if($options['ul']) $out .= "<ul id='$options[id]' class='uk-comment-list'>";


	foreach($comments as $comment) {

		$out .= "<li class='uk-margin-small'>";

		$out .= ukComment($comment, $calculateDepth);

// check comment children
		if($comment->children) {

			$out .= "<ul class='uk-nav-sub uk-margin-remove'>";
			$out .= ukComments($comment->children, ['ul' => false], $calculateDepth);
			$out .= '</ul>';
		}
		$out .= "</li>";
	}

	if($options['ul']) $out .= "</ul>";

	return $out;
}

/**
 * Render a comment posting form
 *
 * @param CommentArray $comments
 * @param array $options See `CommentForm` class for all options.
 * @return string
 *
 */
function ukCommentForm(CommentArray $comments, array $options = array()) {

	$defaults = array(
		'headline' => "",
		'successMessage' =>
			__('Thank you, your comment has been posted.'),
		'pendingMessage' =>
			__('Your comment has been submitted and will appear once approved by the moderator.'),
		'errorMessage' =>
			__('Your comment was not saved due to one or more errors.') . ' ' .
			__('Please check that you have completed all fields before submitting again.'),
	);

	$options = _ukMergeOptions($defaults, $options);
	$options['successMessage'] = ukAlertSuccess($options['successMessage'], 'check');
	$options['pendingMessage'] = ukAlertSuccess($options['pendingMessage'], 'check');
	$options['errorMessage'] = ukAlertDanger($options['errorMessage'], 'warning');

	if(!isset($options['attrs']) || !isset($options['attrs']['class'])) {
		$options['attrs'] = array('class' => 'uk-comment uk-comment-primary');
	}

	$adjustments = array(
		"<input type='text'" => "<input type='text' class='uk-input'",
		"<input type='email'" => "<input type='email' class='uk-input'",
		"<p class='CommentForm" => "<p class='uk-margin-remove-top CommentForm",
		"<textarea " => "<textarea class='uk-textarea' ",
		"<button " => "<button class='uk-button uk-button-primary' ",
		"<label " => "<label class='uk-form-label' ",
	);

	$out = $comments->renderForm($options);
	$out = str_replace(array_keys($adjustments), array_values($adjustments), $out);

	return $out;
}

2. Change lines from 14 to 25 inside blog-post.php:
https://github.com/processwire/processwire/blob/7d4ca45673152436ea492b6577341ee3550e2821/site-regular/templates/blog-post.php#L14-L25

To this code:

	// https://processwire.com/talk/topic/594-how-can-i-use-pagination-with-comments/
	$limit = 12;
	$start = ($input->pageNum - 1) * $limit;

	// Find comments that don't have a parent ( parent_id=0 )
	$comments = page()->comments->find("start=$start, limit=$limit, parent_id=0");

	// comment list
	if(count($comments)) {
		echo ukHeading3("Comments", "icon=comments");
		echo ukComments($comments);

		if($input->pageNum > 1) {
			echo "<a class='uk-button uk-button-text' href='./page" . (input()->pageNum - 1) . "'>" .
			ukIcon('arrow-left') . __('Previous Comments') . "</a> ";
		}

		// Find comments that don't have a parent ( parent_id=0 )
		if($start + $limit < count(page()->comments->find("parent_id=0"))) {
			echo "<a class='uk-button uk-button-text' href='./page" . (input()->pageNum + 1) . "'>" .
			__('Next Comments') . ukIcon('arrow-right') . "</a>";
		}
	}

	// comment form
	echo ukHeading3("Post a comment", "icon=comment");
	echo ukCommentForm(page()->comments);

Remember to set the Reply depth inside comments field:

reply-d-compressor.png.4b3e297b41c5be079ef20cf88d7be6ba.png

And adding options for page nubmers in the setting blog-post template:

page-numbers-compressor.thumb.png.fcb6058f88f1f7e0058d20771d84b688.png

 

Share this post


Link to post
Share on other sites
18 hours ago, rafaoski said:

Thank @JheymanMejia for the comment and I am sorry that I reply so late, but now I have a lot of work at home (renovation of the apartment).
If you still need this option, I've added a simple reply button for comments and basic navigation for them.

https://github.com/rafaoski/site-uk3-minimal/commit/bf4b437319f804a0bfcb1ef9000dad056d2a1cb6

nested-comments-compressor.thumb.png.c58222da3d24b3be6e4c019c96cb187f.png

If you want more or less nesting, you must set "Reply depth" in the setting comments field ( this will add a reply button )

reply-d-compressor.png.4b3e297b41c5be079ef20cf88d7be6ba.png

Below is the code for the Regular blog site profile that should work:

1. Replace the selected functions in the file _uikit.php:
https://github.com/processwire/processwire/blob/7d4ca45673152436ea492b6577341ee3550e2821/site-regular/templates/_uikit.php#L898-L1040

To this code:


/*****************************************************************************************
 * ProcessWire/Uikit functions for rendering comments and comment forms
 *
 * Note: comment threads (depth), stars and votes are not yet supported in here.
 *
 */

/**
 * Render a comment repply
 *
 * @param int $commentId get comment id to add reply button
 *
 */
function commentReply($commentId) {
	return "<a class='CommentActionReply uk-button uk-button-text'
			data-comment-id='$commentId' href='#Comment$commentId'>Reply</a>";
}

/**
 * Render a ProcessWire comment using Uikit markup
 *
 * @param Comment $comment
 * @param int $calculateDepth calculate comment depth
 * @return string
 *
 */
function ukComment(Comment $comment, $calculateDepth) {

	$text = $comment->getFormatted('text');
	$cite = $comment->getFormatted('cite');
	$website = $comment->getFormatted('website');
	$field = $comment->getField();
	$page = $comment->getPage();
	$classes = array();
	$metas = array();
	$gravatar = '';

	// Set reply button
	$maxDepth = $comment->getField()->depth; // Max depth from field comments
	$replies = $calculateDepth <= $maxDepth ? commentReply($comment->id) : '';

	if($field->get('useGravatar')) {
		$img = $comment->gravatar($field->get('useGravatar'), $field->get('useGravatarImageset'));
		if($img) $gravatar = "<div class='uk-width-auto'><img class='uk-comment-avatar' src='$img' alt='$cite'></div>";
	}

	if($website) $cite = "<a href='$website' rel='nofollow' target='_blank'>$cite</a>";
	$created = wireDate('relative', $comment->created);

	if($field->get('usePermalink')) {
		$permalink = $page->httpUrl;
		$urlSegmentStr = $this->wire('input')->urlSegmentStr;
		if($urlSegmentStr) $permalink .= rtrim($permalink, '/') . $urlSegmentStr . '/';
		$permalink .= '#Comment' . $comment->id;
		$permalink = "<a href='$permalink'>" . __('Permalink') . "</a>";
		$metas[] = "<li>$permalink</li>";
	}

	$classes = implode(' ', $classes);
	$metas = implode('', $metas);

	$out = "
		<article id='Comment$comment->id' class='$classes uk-comment uk-comment-primary' data-comment='$comment->id'>
			<header class='uk-comment-header uk-grid-medium uk-flex-middle' uk-grid>
				$gravatar
				<div class='uk-width-expand'>
					<h4 class='uk-comment-title uk-margin-remove'>$cite</h4>
					<ul class='uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top'>
						<li>$created</li>
						$metas
					</ul>
				</div>
			</header>
			<div class='uk-comment-body'>
				$text
			</div>
			$replies
			</article>
	";

	return $out;
}

/**
 * Render a list of ProcessWire comments using Uikit markup
 *
 * Note: does not currently support threaded comments (comment depth).
 * Use ProcessWire’s built-in comments rendering for that purpose.
 *
 * @param CommentArray $comments
 * @param array|string $options Options to modify default behavior
 *  - `id` (string): HTML id attribute of the comments list (default='comments').
 * @param int $calculateDepth calculate comment depth
 * @return string
 *
 */
function ukComments(CommentArray $comments, $options = array(), $calculateDepth = 0) {

	$out = '';

	$calculateDepth++;

	$defaults = array(
		'id' => 'comments',
		'ul' => true
	);

	if(!count($comments)) return '';
	$options = _ukMergeOptions($defaults, $options);

	if($options['ul']) $out .= "<ul id='$options[id]' class='uk-comment-list'>";


	foreach($comments as $comment) {

		$out .= "<li class='uk-margin-small'>";

		$out .= ukComment($comment, $calculateDepth);

// check comment children
		if($comment->children) {

			$out .= "<ul class='uk-nav-sub uk-margin-remove'>";
			$out .= ukComments($comment->children, ['ul' => false], $calculateDepth);
			$out .= '</ul>';
		}
		$out .= "</li>";
	}

	if($options['ul']) $out .= "</ul>";

	return $out;
}

/**
 * Render a comment posting form
 *
 * @param CommentArray $comments
 * @param array $options See `CommentForm` class for all options.
 * @return string
 *
 */
function ukCommentForm(CommentArray $comments, array $options = array()) {

	$defaults = array(
		'headline' => "",
		'successMessage' =>
			__('Thank you, your comment has been posted.'),
		'pendingMessage' =>
			__('Your comment has been submitted and will appear once approved by the moderator.'),
		'errorMessage' =>
			__('Your comment was not saved due to one or more errors.') . ' ' .
			__('Please check that you have completed all fields before submitting again.'),
	);

	$options = _ukMergeOptions($defaults, $options);
	$options['successMessage'] = ukAlertSuccess($options['successMessage'], 'check');
	$options['pendingMessage'] = ukAlertSuccess($options['pendingMessage'], 'check');
	$options['errorMessage'] = ukAlertDanger($options['errorMessage'], 'warning');

	if(!isset($options['attrs']) || !isset($options['attrs']['class'])) {
		$options['attrs'] = array('class' => 'uk-comment uk-comment-primary');
	}

	$adjustments = array(
		"<input type='text'" => "<input type='text' class='uk-input'",
		"<input type='email'" => "<input type='email' class='uk-input'",
		"<p class='CommentForm" => "<p class='uk-margin-remove-top CommentForm",
		"<textarea " => "<textarea class='uk-textarea' ",
		"<button " => "<button class='uk-button uk-button-primary' ",
		"<label " => "<label class='uk-form-label' ",
	);

	$out = $comments->renderForm($options);
	$out = str_replace(array_keys($adjustments), array_values($adjustments), $out);

	return $out;
}

2. Change lines from 14 to 25 inside blog-post.php:
https://github.com/processwire/processwire/blob/7d4ca45673152436ea492b6577341ee3550e2821/site-regular/templates/blog-post.php#L14-L25

To this code:


	// https://processwire.com/talk/topic/594-how-can-i-use-pagination-with-comments/
	$limit = 12;
	$start = ($input->pageNum - 1) * $limit;

	// Find comments that don't have a parent ( parent_id=0 )
	$comments = page()->comments->find("start=$start, limit=$limit, parent_id=0");

	// comment list
	if(count($comments)) {
		echo ukHeading3("Comments", "icon=comments");
		echo ukComments($comments);

		if($input->pageNum > 1) {
			echo "<a class='uk-button uk-button-text' href='./page" . (input()->pageNum - 1) . "'>" .
			ukIcon('arrow-left') . __('Previous Comments') . "</a> ";
		}

		// Find comments that don't have a parent ( parent_id=0 )
		if($start + $limit < count(page()->comments->find("parent_id=0"))) {
			echo "<a class='uk-button uk-button-text' href='./page" . (input()->pageNum + 1) . "'>" .
			__('Next Comments') . ukIcon('arrow-right') . "</a>";
		}
	}

	// comment form
	echo ukHeading3("Post a comment", "icon=comment");
	echo ukCommentForm(page()->comments);

Remember to set the Reply depth inside comments field:

reply-d-compressor.png.4b3e297b41c5be079ef20cf88d7be6ba.png

And adding options for page nubmers in the setting blog-post template:

page-numbers-compressor.thumb.png.fcb6058f88f1f7e0058d20771d84b688.png

 

Hello, thanks for the information, I see it very complete. With the help of @MilenKo i can moved forward a bit, I will also review what you share and I will tell you how it goes later.

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