Theme Six Client Area Template – Clientareaproductdetails.tpl

VERSIONS 1.4 AND ABOVE

To replace the default image that appears on the client area product details page (/templates/{template}/clientareaproductdetails.tpl) for your active client area template, replace the following code:


<i class="fa fa-circle fa-stack-2x"></i>

<i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{else}archive{/if} fa-stack-1x fa-inverse"></i>


With the following code:


<div id="productimage-include"></div>

Next, add one of the following code sets to the very bottom of the file:


TO AUTOMATICALLY LOOP PHOTOS 

<div id="productimage-insert" style="display:none;">
<div class="productimage-wrapper" style="margin: auto; border: 10px solid #fff; width:160px; height:160px;"> <!--Note: Wrapper width/height should equal double the border width/height plus the image width/height.-->
{if $productimageid["product"][$pid]|@count < 2}
<img id="{$productimageid["product"][$pid][0]}" src="modules/addons/productimage/product_images/{$productimageid["product"][$pid][0]}.png" style="width: 140px; height: 140px;" onclick="productImageOpenModal(this.id);" onerror="productImageError(this);">
{else}
<div class="jcarousel-auto">
<ul>
{foreach $productimageid["product"][$pid] as $image}
<li><img id="{$image}" src="modules/addons/productimage/product_images/{$image}.png" style="width: 140px; height: 140px;" onclick="productImageOpenModal(this.id);" onerror="productImageError(this);"></li>
{/foreach}
</ul>
</div>
{/if}
</div>
</div>
<script type="text/javascript">
document.getElementById("productimage-include").innerHTML = document.getElementById("productimage-insert").innerHTML;
</script> 


TO ALLOW USERS TO MANUALLY SCROLL THROUGH PHOTOS

<div id="productimage-insert" style="display:none;">
<div class="productimage-wrapper" style="margin: auto; border: 10px solid #fff; width:160px; height:160px;"> <!--Note: Wrapper width/height should equal double the border width/height plus the image width/height.-->
{if $productimageid["product"][$pid]|@count < 2}
<img id="{$productimageid["product"][$pid][0]}" src="modules/addons/productimage/product_images/{$productimageid["product"][$pid][0]}.png" style="width: 140px; height: 140px;" onclick="productImageOpenModal(this.id);" onerror="productImageError(this);">
{else}
<div class="jcarousel">
<ul>
{foreach $productimageid["product"][$pid] as $image}
<li><img id="{$image}" src="modules/addons/productimage/product_images/{$image}.png" style="width: 140px; height: 140px;" onclick="productImageOpenModal(this.id);" onerror="productImageError(this);"></li>
{/foreach}
</ul>
</div>
<a href="#" class="jcarousel-control-prev" style="text-decoration: none;">&lsaquo;</a>
<a href="#" class="jcarousel-control-next" style="text-decoration: none;">&rsaquo;</a>
{/if}
</div>
</div>
<script type="text/javascript">
document.getElementById("productimage-include").innerHTML = document.getElementById("productimage-insert").innerHTML;
</script>

Note: You can style this as necessary to match your current template. 



VERSIONS 1.3.7 AND BELOW

To replace the default image that appears on the client area product details page (/templates/{template}/clientareaproductdetails.tpl) for your active client area template, replace the following code:


<i class="fa fa-circle fa-stack-2x"></i>

<i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{else}archive{/if} fa-stack-1x fa-inverse"></i>


With this code:


<img src="modules/addons/productimage/product_images/{$pid}.png" align="center" style="height: 75px;" onerror="productImageError(this);"><br />


Note: You can style this as necessary to match your current template. 

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Theme Six Client Area Template – Clientareaproducts.tpl

VERSIONS 1.4 AND ABOVE To add product images to the list of active products/services...

Customization of jCarousel (Image Carousel and Scrolling)

In Product Image Module versions 1.4 and above, components of the jQuery plugin jCarousel have...

*Required* - Add Code to header.tpl

VERSION 1.4 AND ABOVEAdd the following code to the <head></head> section of the...

*Required* - Add Code to footer.tpl

VERSION 1.4 AND ABOVEAdd the following code directly above the line {$footeroutput} in the...

Server Modules with an overview.tpl File

Some server modules use a custom file called overview.tpl (located in...