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