[TUT] - Create a basic portfolio page in MyBB
* this was an old tutorial I shared a long time ago (not to be mistaken with the responsive enhanced portfolio tut shared at the same time though I might also re-add that one as well) but figured I would re-share this one again in case anyone found a need for such.
ie:
![[Image: Forums-Portfolio.png]]()
![[Image: Forums-Portfolio-1.png]]()
ok, firstly create a php file called portfolio.php containing:
Upload this file: portfolio.php to your forum root directory
now go into Home » Template Sets » Global Templates
and create a new global template called: portfolio
Edit Template: portfolio
Note: because this is a global template it will work with your various themes:
ie:
![[Image: Forums-Portfolio-2.png]]()
Final step:
Download the required files: http://s000.tinyupload.com/download.php?...3224305632
extract portfolio.zip and take the portfolio folder and its contents and place the portfolio folder in your forums root directory...
after such you can then visit: "yourforumurl"/portfolio.php
& then you can continue editing further for your usages. ** (note this is only an example and not actually tweaked to precise specifics and is meant as a starting point to the reader to then expand upon, edit and improve...) You can edit, change and tweak/customize this any such way you wish!
Final note: if you want to add more than the existing 4 examples, make sure that you compenstae for the collapse functions by adding the respective additional relative #s to that and portfolio images
ie: "folio2, folio2_e, folio2/folio2a.png, folio2/folio2b.png, folio2/folio2c.png" etc, etc
Best of Luck![Big Grin]( "Big Grin")
~V
* this was an old tutorial I shared a long time ago (not to be mistaken with the responsive enhanced portfolio tut shared at the same time though I might also re-add that one as well) but figured I would re-share this one again in case anyone found a need for such.
ie:
ok, firstly create a php file called portfolio.php containing:
<?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);
?>Upload this file: portfolio.php to your forum root directory
now go into Home » Template Sets » Global Templates
and create a new global template called: portfolio
Edit Template: portfolio
<!--
/**
*
* 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}
<style>
@media screen and (max-width: 868px) {
.folio td {
padding: 3px;
text-align: left !important;
float: none !important;
border-top: 0px !important;
border-left: 0px !important;
border-bottom: 1px solid: #DDDDDD;
display: block !important;
width: auto !important;
font-size: 13px !important;
overflow:hidden;
}
}
</style>
<table border="0" cellspacing="0" cellpadding="4" class="tborder folio">
<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="{$expaltext}" title="{$expaltext}" /></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="{$theme['imgdir']}/valid.png">
Complete </h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder folio">
<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="{$expaltext}" title="{$expaltext}" /></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="{$theme['imgdir']}/invalid.png">
Not Yet Complete </h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder folio">
<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="{$expaltext}" title="{$expaltext}" /></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="{$theme['imgdir']}/valid.png">
Complete</h3>
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="4" class="tborder folio">
<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="{$expaltext}" title="{$expaltext}" /></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="{$theme['imgdir']}/valid.png">
Complete</h3>
</td>
</tr>
</table>
<br />
<span class="smalltext">Portfolio by: <a href="https://community.mybb.com/user-6029.html" target="_blank">Vintagedaddyo</a></span>
{$footer}
</body>
</html>
Note: because this is a global template it will work with your various themes:
ie:
Final step:
Download the required files: http://s000.tinyupload.com/download.php?...3224305632
extract portfolio.zip and take the portfolio folder and its contents and place the portfolio folder in your forums root directory...
after such you can then visit: "yourforumurl"/portfolio.php
& then you can continue editing further for your usages. ** (note this is only an example and not actually tweaked to precise specifics and is meant as a starting point to the reader to then expand upon, edit and improve...) You can edit, change and tweak/customize this any such way you wish!
Final note: if you want to add more than the existing 4 examples, make sure that you compenstae for the collapse functions by adding the respective additional relative #s to that and portfolio images
ie: "folio2, folio2_e, folio2/folio2a.png, folio2/folio2b.png, folio2/folio2c.png" etc, etc
Best of Luck
~V