Better "Preview" for templates in the CP

[Admin]

This is a very quick hack that enhaces the "Preview" feature in the Template Editor. Currently I find the preview to be useless, I can also see funky colors and odd tables.
With this hack, you will get a slightly better idea of how the template will really look like, because all the {replacement} variables will be replaced with their real value.

If you have Mutt's "Advanced Template Editor" hack installed, please follow the directions in this post:
https://vborg.vbsupport.ru/showthread.php?action=showpost&postid=253878
Thanks Mutt!

In template.php replace:
function dotemplatejavascript() {

$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function displayHTML() {
var inf = document.name.template.value;
win = window.open(\", \", 'popup', 'toolbar = no, status = no, scrollbars=yes');
With this:
function dotemplatejavascript() {
global $DB_site, $bburl;

$replacementsetid = 1; ### Change me to use a different replacement set!

$vars = $DB_site->query("
SELECT findword,replaceword FROM replacement
WHERE replacementsetid IN(-1,'$replacementsetid')
ORDER BY replacementsetid DESC,replacementid DESC
");
while ($var=$DB_site->fetch_array($vars)) {
if ($var['findword']!="") {
if ($var['findword'] == '{imagesfolder}'
or $var['findword'] == '{titleimage}'
or $var['findword'] == '{newthreadimage}'
or $var['findword'] == '{closedthreadimage}') {
$var['replaceword'] = $bburl . '/' . $var['replaceword'];
}
$varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");
';
}
}

$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">

function replace(string,text,by) {
// Replaces text with by in string
var strLength = string.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return string;

var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,txtLength))) return string;
if (i == -1) return string;

var newstr = string.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(string.substring(i+txtLength,strLength),te xt,by);

return newstr;
}

function displayHTML() {
var inf = document.name.template.value;
$varinf
win = window.open(\", \", 'popup', 'toolbar=no,status=no,scrollbars=yes,width=800,hei ght=600');

You can change the $replacementsetid if you want:
$replacementsetid = 1; ### Change me to use a different replacement set!

Enjoy! :)

[Admin]

And here is a screen shot for the imagination challenged...

[Admin]

Here's how it looks currently, without the hack. Ugly right?

[FleaBag]

Until now I'd never even realised that this 'Preview' feature was there, I must be a little short sighted! Nice work FireFly! Running on 2.2.5 well. :D

[Logician]

very nice addition and works perfectly here..

[Admin]

BTW, there is a small bug when you Preview empty templates. The Javascript function I added (found it by Google ;)) doesn't support empty strings, so the page will just hang. Then again you shouldn't have any empty templates, and if you had you wouldn't want to preview them, so...

[JAC]

Very Nice, works great for me.

[scsa20]

nice hack, I'll have to install it when I get home ;)

[Dean C]

omg u read my mind firefly... i was going to request this 2nite... how about being able to allow images in the preview??

also my replacement set doesn't seem to be working on the previews...??? any ideas??

Thanks In Advance

[Dark_Wizard]

Just a word of caution...if your using Mutt's Template Editor this will not work correctly....

[Dalius]

Yeah, it would help me alot to have a perfect Preview, with all the variables and images showing

[Xanthine]

Wow, I didnt even know there was a preview button. Would there any way to display images or maybe even display the variables?

Thanks again Chen.

[ceo_tfw]

installed, it took 2 minutes and work great, I love it, very smooth

[Velocd]

Originally posted by Xanthine
Wow, I didnt even know there was a preview button. Would there any way to display images or maybe even display the variables?

Thanks again Chen.

display the images by just replacing {imagefolder} or "images/" with the full URL "http://www.website.com/images/"

only temporarily (just for previews)...if you're asking how to do it without then I'm not too sure...

as for displaying the variables, that would be cool

[CeleronXL]

Originally posted by Dark_Wizard
Just a word of caution...if your using Mutt's Template Editor this will not work correctly.... Aww... Damn, I just finished installing it too and then I read that. *cries openly*

[c-pr0mpt]

Big time excitement here. I never use preview because its pointless. But this creates a use finally! Thanks

[Siggi]

Many thanks
I use a vb 2.2.1 and have noticed the following error.

Unfortunately, it works this one look for badge in the template no more.

I hope somebody can help me.

Please, my bad one excuses English.

[Neo]

want to make it so it also parses the $variables ?

[Admin]

Making it eval() the $variables would be a much more complicated, because you need to set an "example url" for each template, then call it with the temp template. It's not very simple, trust me.

I'll try to fix the images not showing in a minute...

[Admin]

Ok, just released a new version and now it also shows you the images.

To upgrade, replace this:
global $DB_site;

$replacementsetid = 1; ### Change me to use a different replacement set!

$vars = $DB_site->query("
SELECT findword,replaceword FROM replacement
WHERE replacementsetid IN(-1,'$replacementsetid')
ORDER BY replacementsetid DESC,replacementid DESC
");
while ($var=$DB_site->fetch_array($vars)) {
if ($var['findword']!="") {
$varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");
With this:
global $DB_site, $bburl;

$replacementsetid = 1; ### Change me to use a different replacement set!

$vars = $DB_site->query("
SELECT findword,replaceword FROM replacement
WHERE replacementsetid IN(-1,'$replacementsetid')
ORDER BY replacementsetid DESC,replacementid DESC
");
while ($var=$DB_site->fetch_array($vars)) {
if ($var['findword']!="") {
if ($var['findword'] == '{imagesfolder}'
or $var['findword'] == '{titleimage}'
or $var['findword'] == '{newthreadimage}'
or $var['findword'] == '{closedthreadimage}') {
$var['replaceword'] = $bburl . '/' . $var['replaceword'];
}
$varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");

[Boofo]

Ahhh, life is so much easier now. :) Thanks, Firefly! (Now I can see all of my mistakes as I do them. :))

[Boofo]

Is it just me, or is the PHP code box not clickable now here? I tried it on my sire and I can still click them. But I can't seem to do it here now.

[scsa20]

really, really, nice ;)

[Admin]

I removed it Boofo, it became annoying when you just want to copy a small portion of the code.

[Boofo]

Did it add any extra load to the site? The reason I am asking is I just got it set up on my site and think it is the greatest thing to come along on any system. Do you still have it for the larger code or is it gone altogether? Can it be set up for a certain length of code or higher?

Originally posted by FireFly
I removed it Boofo, it became annoying when you just want to copy a small portion of the code.

[Admin]

It doesn't add any load, no.

[Boofo]

I was just curious. :) What about being able to set it up for a certain size of code or larger? Can that be done?

[Admin]

Not sure what you mean, but can you please ask this in the hack's thread? Thanks.

[Boofo]

np, sorry.

[FleaBag]

Good work FireFly!

[squawell]

NICE HACK!! squawell like this one too...thankz..FireFly..:D:D:D

[Xelation]

hmmm, I installed the first part yesterday... and today I did the upgrade for the images... everything is fine except the images still dont show up... you know what could be wrong?......




update, figured out my problem... your code says to search for the word { imagesfolder } (w/o the spaces) erm, I dont use that, I just do images/yaddayaddayadda.gif oh well, never the less its a good hack :)

[Mutt]

Nice job Firefly

When I first added the preview button, I really wanted it to replace the vars but counldn't think of any easy way to do it. I know it was ugly, but I found it better than nothing. It was just some code I found at a javscript site. this is 100% better. a huge improvement.

I read that it didn't work with the template editor. i'll figure it out and see where the conflict is.

thanks again. very cool

[Dark_Wizard]

Originally posted by Mutt
Nice job Firefly

When I first added the preview button, I really wanted it to replace the vars but counldn't think of any easy way to do it. I know it was ugly, but I found it better than nothing. It was just some code I found at a javscript site. this is 100% better. a huge improvement.

I read that it didn't work with the template editor. i'll figure it out and see where the conflict is.

thanks again. very cool

Thx Jeff...I was going to look into it but don't have the time right now...

[Mutt]

Fireflys hack is a huge improvement. everyone should install it. Great job!!

I was able to get it working with my advanced template editor. the changes are minimal. function dotemplatejavascript from the advanced template editor is slightly different than the original one. here is the slightly modified version that works with it.

THIS IS ONLY FOR PEOPLE USING THE ADVANCED TEMPLATE EDITOR!!!!!

here is the code to look for
function dotemplatejavascript() {
global $template;
$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function displayHTML(form) {
var inf = form.template.value;

and replace it with this
function dotemplatejavascript() {
global $DB_site, $bburl, $template;

$replacementsetid = 1; ### Change me to use a different replacement set!

$vars = $DB_site->query("
SELECT findword,replaceword FROM replacement
WHERE replacementsetid IN(-1,'$replacementsetid')
ORDER BY replacementsetid DESC,replacementid DESC
");
while ($var=$DB_site->fetch_array($vars)) {
if ($var['findword']!="") {
if ($var['findword'] == '{imagesfolder}'
or $var['findword'] == '{titleimage}'
or $var['findword'] == '{newthreadimage}'
or $var['findword'] == '{closedthreadimage}') {
$var['replaceword'] = $bburl . '/' . $var['replaceword'];
}
$varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");
';
}
}

$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function replace(string,text,by) {
// Replaces text with by in string
var strLength = string.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return string;

var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,txtLength))) return string;
if (i == -1) return string;

var newstr = string.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(string.substring(i+txtLength,strLength),te xt,by);

return newstr;
}

function displayHTML(form) {
var inf = form.template.value;
$varinf

ONCE AGAIN, THIS IS ONLY FOR PEOPLE USING THE ADVANCED TEMPLATE EDITOR!!

[FWC]

Well done, Firefly! :)

[Admin]

Thanks Mutt! I edited your post BTW, you had replacement in the code. :)

[Neo]

Originally posted by FireFly
Making it eval() the $variables would be a much more complicated, because you need to set an "example url" for each template, then call it with the temp template. It's not very simple, trust me.

I'll try to fix the images not showing in a minute...
Hmm looks like something I might try to do, but I just might be insane :confused:

[Boofo]

Whenever I try to preview a template now, I get a Runtime Error. The error says "Line 324" "Object expected". The file is says it is in is the template.php. Here is the code and the line it stops at is the Preview line.

<input name='string' type='text' accesskey='t' size=20 onChange='n=0;'>
<input type='button' value='Find' accesskey='f' onClick='javascript:findInPage(document.name.strin g.value)'>&nbsp;&nbsp;&nbsp;
<input type='button' value='Preview' accesskey='p' onclick='javascript:displayHTML()'>
<input type='button' value='Copy' accesskey='c' onclick='javascript:HighlightAll()'></p></td>

I have the better template preview hack AND the images hack installed. Any ideas on this one, anybody? :)

[Illuvatar]

Thanks Firefly!!

And yet another usefull hack that was very easy to install!!

/me bows down!!

[Boofo]

Chen,

I uninstalled the hack and reinstalled it and I get the same javascript errors when I try to use either FIND or PREVIEW. When I uninstalled it, everything went back to working the old way. I can use find and preview now with no errors. Is there any way that I can get this working somehow? It looks like exactly what I need. I'd like to get it working if possible. :)

[FleaBag]

Working on 2.2.6, thanks FireFly! :D

[countryboy713]

i know im a n00b, but i dont quite get what to do where it says addslashes. if thats supposed to be there, then im getting a parse error on line 25 in template.php. any help would be appreciated.

[+d-cipher]

anybody get this working with 2.2.9?

[Kurayami]

Not working on 2.3.0, unfortunately... I get the aforementioned parse error at line 25.