* NOTE: I added this tutorial because, yes I have seen a few basic "adding custom pages without a plugin "tutorials but I have yet ever seen one describing making a basic portfolio or a near completed page for that matter..., so this tutorial is designed as a stepping stone towards you the reader improving on the initial tutorial.
So I decided to do a really old school styled
small and basic portfolio... * I did this rather fast, so of course it can be improved in many ways, haha!
Basically at the end of the tutorial you will have 4 project collapsible boxes that contain a project description and 3 images each project box controlled by lightbox and a button link to the project externally..., with a status of the project whether completed or not..., all of these will need to be edited to your usages as this is a rather basic tutorial simply design to get your creative juices flowing. Best of luck!![Smile]( "Smile")
This could be used for project listing or portfolio listing or whatever you want to modify it too
Create a new file titled portfolio.php in your forums root directory
portfolio.php
Add/create a new template in your master/global templates
called portfolio
download:
![.zip]( "Zip File")
portfolio.zip (Size: 948.21 KB / Downloads: 4)
* this contains the lightbox and image files
And upload the folder portfolio to your forums root directory.... continue editing to your usages..., also replace placeholder images with your images matching the image names...
images are in a 3 pattern format per project box
for example:
and labeled to reflect that pattern..., hopefully making this easier to understand on editing for your own usages...
Examples of the end result of this basic tutorial:
General:
![[Image: 15dsz12.jpg]]()
Collapsing:
![[Image: sfb5l5.png]]()
Lightbox with 3 images per project:
![[Image: jpvlah.png]]()
So I decided to do a really old school styled
small and basic portfolio... * I did this rather fast, so of course it can be improved in many ways, haha!
Basically at the end of the tutorial you will have 4 project collapsible boxes that contain a project description and 3 images each project box controlled by lightbox and a button link to the project externally..., with a status of the project whether completed or not..., all of these will need to be edited to your usages as this is a rather basic tutorial simply design to get your creative juices flowing. Best of luck!
This could be used for project listing or portfolio listing or whatever you want to modify it too
Create a new file titled portfolio.php in your forums root directory
portfolio.php
Code:
<?php
/**
*
* MyBB 1.8
* portfolio.php
* Tutorial by: vintagedaddyo
* https://community.mybb.com/user-6029.html
*
*/
define('IN_MYBB', 1);
define('THIS_SCRIPT', 'portfolio.php');
$templatelist = "portfolio";
require_once './global.php';
add_breadcrumb("Portfolio", "portfolio.php");
eval('$portfolio = "'.$templates->get('portfolio').'";');
output_page($portfolio);
?>Add/create a new template in your master/global templates
called portfolio
Code:
<!--
/**
*
* MyBB 1.8
* portfolio template
* Tutorial by: vintagedaddyo
* https://community.mybb.com/user-6029.html
*
*/
-->
<head>
<title>{$mybb->settings['bbname']} - Portfolio</title>
{$headerinclude}
<link href="{$mybb->asset_url}/portfolio/lightbox/css/lightbox.css" rel="stylesheet">
<script src="{$mybb->asset_url}/portfolio/lightbox/js/lightbox.js"></script>
</head><body id="portfolio">
{$header}
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2"><strong>Project - One</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio1']}.png" id="folio1_img" class="expander" alt="[-]" title="[-]" /></div></td>
</tr>
</thead>
<tbody style="{$collapsed['folio1_e']}" id="folio1_e">
<tr>
<td class="trow1"><a href="{$mybb->asset_url}/portfolio/img/folio1/folio1a.png" data-lightbox="folio1" data-title="Project One A"><img src="{$mybb->asset_url}/portfolio/img/folio1/folio1a.png" alt="" style="max-width: 100%"/></a> <a href="{$mybb->asset_url}/portfolio/img/folio1/folio1b.png" data-lightbox="folio1" data-title="Project One B" ></a> <a href="{$mybb->asset_url}/portfolio/img/folio1/folio1c.png" data-lightbox="folio1" data-title="Project One C" ></a></td>
<td class="trow1" width="30%"><div class="post_controls">
<h2>Project One Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project One Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="images/valid.png">
Complete </h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2"><strong>Project - Two</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio2']}.png" id="folio2_img" class="expander" alt="[-]" title="[-]" /></div></td>
</tr>
</thead>
<tbody style="{$collapsed['folio2_e']}" id="folio2_e">
<tr>
<td class="trow1"><a href="{$mybb->asset_url}/portfolio/img/folio2/folio2a.png" data-lightbox="folio2" data-title="Project Two A"><img src="{$mybb->asset_url}/portfolio/img/folio2/folio2a.png" alt="" style="max-width: 100%"/></a> <a href="{$mybb->asset_url}/portfolio/img/folio2/folio2b.png" data-lightbox="folio2" data-title="Project Two B" ></a> <a href="{$mybb->asset_url}/portfolio/img/folio2/folio2c.png" data-lightbox="folio2" data-title="Project Two C" ></a></td>
<td class="trow1" width="30%"><div class="post_controls">
<h2>Project Two Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Two Link</a></div>
<strong>Status: </strong>
<h3 style="color:#A21111;">
<img src="images/invalid.png">
Not Yet Complete </h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2"><strong>Project - Three</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio3']}.png" id="folio3_img" class="expander" alt="[-]" title="[-]" /></div></td>
</tr>
</thead>
<tbody style="{$collapsed['folio3_e']}" id="folio3_e">
<tr>
<td class="trow1"><a href="{$mybb->asset_url}/portfolio/img/folio3/folio3a.png" data-lightbox="folio3" data-title="Project Three A"><img src="{$mybb->asset_url}/portfolio/img/folio3/folio3a.png" alt="" style="max-width: 100%"/></a> <a href="{$mybb->asset_url}/portfolio/img/folio3/folio3b.png" data-lightbox="folio3" data-title="Project Three B" ></a> <a href="{$mybb->asset_url}/portfolio/img/folio3/folio3c.png" data-lightbox="folio3" data-title="Project Three C" ></a></td>
<td class="trow1" width="30%"><div class="post_controls">
<h2>Project Three Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Three Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="images/valid.png">
Complete</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2"><strong>Project - Four</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['folio4']}.png" id="folio4_img" class="expander" alt="[-]" title="[-]" /></div></td>
</tr>
</thead>
<tbody style="{$collapsed['folio4_e']}" id="folio4_e">
<tr>
<td class="trow1"><a href="{$mybb->asset_url}/portfolio/img/folio4/folio4a.png" data-lightbox="folio4" data-title="Project Four A"><img src="{$mybb->asset_url}/portfolio/img/folio4/folio4a.png" alt="" style="max-width: 100%"/></a> <a href="{$mybb->asset_url}/portfolio/img/folio4/folio4b.png" data-lightbox="folio4" data-title="Project Four B" ></a> <a href="{$mybb->asset_url}/portfolio/img/folio4/folio4c.png" data-lightbox="folio4" data-title="Project Four C" ></a></td>
<td class="trow1" width="30%"><div class="post_controls">
<h2>Project Four Title</h2>
</div>
<p><strong>Description: </strong> Commodo celos purus consequat diam rapide volutpat interdum responder porttitor quis sodales vehicula est netus blandit quis posuere populos erat sapien neque tempus non diam ligula litteratura fringilla duis molestie non congue elementum bibendum phasellus uso curae; populos posuere sagittis neque mauris qui risus nulla nisl lacinia eros tincidunt post non cras scelerisque sed lacinia prime connectiones ultrices dolor leo eros nam sodales mauris sit vestibulum basate faucibus</p>
<div class="post_controls"></div>
<br />
<div class="float_right"><a href="#" class="button new_reply_button">Project Four Link</a></div>
<strong>Status: </strong>
<h3 style="color:#2CAA3A;"> <img src="images/valid.png">
Complete</h3>
</td>
</tr>
</table>
<br />
<span class="smalltext">Portfolio by: <a href="http://community.mybb.com/user-6029.html" target="_blank">Vintagedaddyo</a></span>
{$footer}
</body>
</html>download:
portfolio.zip (Size: 948.21 KB / Downloads: 4)
* this contains the lightbox and image filesAnd upload the folder portfolio to your forums root directory.... continue editing to your usages..., also replace placeholder images with your images matching the image names...
images are in a 3 pattern format per project box
for example:
Quote:folio1a.png
folio1b.png
folio1c.png
and labeled to reflect that pattern..., hopefully making this easier to understand on editing for your own usages...
Examples of the end result of this basic tutorial:
General:
Collapsing:
Lightbox with 3 images per project: