Content / Old tutorial about porting Solid theme / 12. Solid - static page About (II.)

12. Solid - static page About (II.)

Don't forget - it was written in 2014

comments: 0
Our today goal:
E107 Users 01
Note: If you use source code from part 11, don't forget change url configuration to get about page work (or link in sitelinks).

I decided to use user's table for this, probably better would be featurebox or custom menu, but I wanted to try something new.

1. preparing data

- create userclass teammember

E107 Users 02
- set available option to upload photo
E107 Users 03
There is problem with photo upload, for temporarily fix change usersetting.php by this: https://github.com/e107inc/e107/pull/691
cca line 328:
$_POST['image'] = '-upload-'.$upload['name'];
$_POST['user_sess'] = '-upload-'.$upload['name'];

- create new users
E107 Users 04

Example:
E107 Users 05
So now we have data prepared:
E107 Users 06

Easy. I have already theme plugin, so I will have the menu there:
Layout:
$LAYOUT['solid_about'] =  '  
    {SETSTYLE=about}
  	{---}
	 <div class="container mtb">
	 	<div class="row centered">
		{SETSTYLE=teammember}
    {MENU=themesolid/teammember}
	 	</div>
	 </div>
  {TESTIMONIALS}
  {OURCLIENTS}  
';


Tablestyle (we need new, because there id h3 tag, we have one with h2 tag)

if($style == 'teammember')
 {
 echo '<h3>'.$caption.'</h3>'.$text';
 return;			
}


We haven't menu yet, but layout works:
E107 Users 07

3. create menu

- create file teammember_menu.php in themesolid plugin
- add basic things to get it works

Example:

<?php if (!defined('e107_INIT')) { exit; }
e107::lan('core','user');
$text   = " Our future team members"; 
$caption = "MEET OUR TEAM!";
$ns -> tablerender($caption, $text, "teammember"); 
?>

Result:
E107 Users 08

4. working with database

- we need to get 4 records from database...
- find ID of our teammember class
e107plugin about page memberlist
- connect with database
- retrieve users from this class
- check if foreach works correctly (only 4 records)

if (!defined('e107_INIT')) { exit; }
e107::lan('core','user');
$caption = "MEET OUR TEAM!";
$userclass = 3;
$sql = e107::getDb();
$teammembers = $sql->retrieve('user', '*', ' WHERE FIND_IN_SET('.$userclass.',user_class) ', TRUE);
$text = '';
if($teammembers)
{
foreach ($teammembers as $teammember)
	{ 
  $text   .= " Our future team members";
  }
}
else
{
	$text = "
	<div class="alert alert-info alert-block text-center">No members</div>
	";
}  

$ns -> tablerender($caption, $text, "teammember");

Result:
E107 Users 10

4. create menu / plugin template

- test with hardcoded member detail (before creating template):
foreach ($teammembers as $teammember)
	{ 
  $text   .= '
  		 	<div class="col-lg-3 col-md-3 col-sm-3">
				<div class="he-wrap tpl6">
				<img src="assets/img/team/team01.jpg" alt=""><div class="he-view">
						<div class="bg a0" data-animate="fadeIn">
                            <h3 class="a1" data-animate="fadeInDown">Contact Me:</h3>
                            <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-envelope"></i></a>
                            <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-twitter"></i></a>
                    	</div>
<!-- he bg -->
					</div>
<!-- he view -->		
				</div>
<!-- he wrap -->
				<h4>Mark Webber</h4>
				<h5 class="ctitle">CEO</h5>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				<div class="hline"></div>
		 	</div> ';
  }

Result:
E107 Users 11

- create template folder in themesolid plugin
(We could use user_template.php in theme folder, but I wanted to test something new)
- create themesolid_template.php file (look at user_template.php)

if (!defined('e107_INIT')) { exit; }

global $user_shortcodes, $pref, $user;

$THEMESOLID_TEMPLATE['teammember'] = '
  		 	<div class="col-lg-3 col-md-3 col-sm-3">
				<div class="he-wrap tpl6">
				<img src="assets/img/team/team01.jpg" alt=""><div class="he-view">
						<div class="bg a0" data-animate="fadeIn">
                            <h3 class="a1" data-animate="fadeInDown">Contact Me:</h3>
                            <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-envelope"></i></a>
                            <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-twitter"></i></a>
                    	</div>
<!-- he bg -->
					</div>
<!-- he view -->		
				</div>
<!-- he wrap -->
				<h4>Mark Webber</h4>
				<h5 class="ctitle">CEO</h5>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				<div class="hline"></div>
		 	</div> ';
';

- use it in plugin menu:
// $template   = e107::getTemplate('myplugin'); 
// loads e107_plugins/myplugin/templates/myplugin_template.php
$TM_TEMPLATE = e107::getTemplate('themesolid');
E107 Users 12

5. use user shortcodes in menu

$user_shortcodes = e107::getScBatch('user');
...
foreach ($teammembers as $teammember)
	{ 
  e107::getScBatch('user')->setVars($teammember);
  $TEAMMEMBER_TEXT     = $tp->parseTemplate($TM_TEMPLATE['teammember'], TRUE, $user_shortcodes);
  $text .= $TEAMMEMBER_TEXT;
  }
}
e107plugin about page

Result: (nothing should changed)
E107 Users 13

6. use user shortcodes in template

- change hardcoded part with user shortcodes
- carefull with image, set maximum size, theme is responsive, it changes size itself (thumb.php has default 20x20px}

At first easy part:
$THEMESOLID_TEMPLATE['teammember'] = '
{SETIMAGE: w=600}
<div class="col-lg-3 col-md-3 col-sm-3">
  <div class="he-wrap tpl6">
    {USER_PICTURE}
    <div class="he-view">
      <div class="bg a0" data-animate="fadeIn">
                      <h3 class="a1" data-animate="fadeInDown">Contact Me:</h3>
                      <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-envelope"></i></a>
                      <a href="#" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-envelope-o"></i></a>
     	</div>
<!-- he bg -->
    </div>
<!-- he view -->		
  </div>
<!-- he wrap -->
  <h4>{USER_REALNAME}</h4>
  <h5 class="ctitle">CEO</h5>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <div class="hline"></div>
</div> ';

Almost done.

We can't use use extended user fields, so try to something else.
1. member title
- there is shortcode , when you check it, it use clean custom_title field, but you can't edit it in admin area. Insert data via phpmyadmin
E107 Users 15

<h5 class="ctitle">{USER_CUSTOMTITLE}</h5>
Result:
E107 Users 16

2. member description
Shortcode seems fine, we need set available this option:
E107 Users 17

<p>{USER_SIGNATURE}</p>
- to solve correct order:
$teammembers = $sql->retrieve('user', '*', ' WHERE FIND_IN_SET('.$userclass.',user_class) ORDER by user_name', TRUE);

Result:
E107 Users 18

Note: after changing usersetting, there is again problem with avatar, so next issue on github.

3. contact part
E107 Users 19


Send email:
- send email should be easy, but there is spam problem, we can use , but this is deprecated.
<a href="mailto:{USER_EMAIL_LINK}" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-envelope"></i></a>
- better idea is link to user profile where link is visible in safe mode
<a href="'.e_HTTP.'user.php?id.{USER_ID}" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-user"></i></a>
Note: I found emailto.sc with emailmember.php, probably something is prepared.

Twitter:
Extended fields doesn't work, so we can use only PM plugin. Activate it and then find better icon for it:
<a href="'.e_PLUGIN_ABS.'pm/pm.php?send.{USER_ID}" class="dmbutton a2" data-animate="fadeInUp"><i class="fa  fa-envelope-o"></i></a>


So page About is finished:

E107 Users 20