Change img element in downloads.tpl

[ralphonz]

Hi everyone,

 

I'm trying to get rid of those horrible 16x16 image icons on the downloads page and replace them with some nice Font Awesome icons. Trouble is I can't seem to get it to work.

 

So far i have:

 

{if $download.type eq '<img src="http://www.blueleafstudio.net/web-hosting/images/picture.png" align="absmiddle" alt="" />'}

<i class="fa fa-picture"></i>

{elseif $download.type eq '<img src="http://www.blueleafstudio.net/web-hosting/images/zip.png" align="absmiddle" alt="" />'}

<i class="fa fa-folder"></i>

{else}

<i class="fa fa-download"></i>

{/if}

 

I copied <img src="http://www.blueleafstudio.net/web-hosting/images/picture.png" align="absmiddle" alt="" /> straight from the source code after outputting {$download.type} but the comparison always fails.

 

One would expect the contents of $smarty->_tpl_vars[mostdownloads][0][type] to be a simple string rather than html but there you have it. It's pretty bad practice how html is output as the smarty variable but I'd still expect the above to work.

 

I have to say, WHMCS is a nightmare to customise...

Edited February 27, 2014 by ralphonz

[brian!]

I have to say, WHMCS is a nightmare to customise...

but pretty cool when (if!) you ever finally figure something out!

 

there are at least two ways to do this... either you could use the Smarty 'replace' tag instead...

 

so I assume you're editing downloadscat.tpl and/or downloads.tpl - you'll know which!

 

instead of using...

 

{$download.type}

you could use...

{$download.type|replace:'<img src="images/zip.png" align="absmiddle" alt="" />':'<i class="fa fa-folder"></i>'}

so that's how you would do it for one icon... but you can use multiple replace modifiers in the same block... so to replace zips and images...

 

{$download.type|replace:'<img src="images/zip.png" align="absmiddle" alt="" />':'<i class="fa fa-folder"></i>'|replace:'<img src="images/picture.png" align="absmiddle" alt="" />':'<i class="fa fa-picture"></i>'}

but i'm struggling to think of how to add your default option of using 'fa fa-download' - other than by specifying replaces for every download option... you can't really throw an else in there...

 

the other way is a modified version of your current method - if/else etc.. but instead of checking if $download.type equals something, it would be easier to check if $download.type contains a specific string..

 

{if $download.type|strstr:'picture.png'}
<i class="fa fa-picture"></i>
{elseif $download.type|strstr:'zip.png'}
<i class="fa fa-folder"></i>
{else}
<i class="fa fa-download"></i>
{/if}

I haven't got awesome fonts installed, but i've had both methods working locally using replacement text - so i'm pretty sure the syntax is correct.

Edited February 27, 2014 by brian!
simplifed second block of code.

[ralphonz]

Thanks Brian, very cool indeed!

 

I used the second solution as it gives you the fallback case. Just didn't think of using strstr.

 

Thanks