Image Preview In Newthread And Editpost

[RateU]

This is a simple way how to view an image preview when creating a new thread (XThreads attachments only). The preview will be displayed when we hit the Preview Post button. This also works for edit post preview.

In image custom thread fields (in this example, we use img1 as key), use this kind of code in display format:

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<if THIS_SCRIPT == 'newthread.php' OR THIS_SCRIPT == 'editpost.php' then> <tr> <td class="trow_sep" align="center" colspan="2"><strong>Image 1 Preview &amp; URL</strong></td> </tr> <tr> <td class="trow1" align="center"> <img src="{URL}/thumb160x120" alt="" title="" /> </td> <td class="trow1" valign="top"> <div class="float_left" style="width: 50%;"> <strong>BBCODE - 160 x 120 Thumbnail</strong> <input name="prev_img1_bbcode" type="text" size="40" value="[IMG]{$mybb->settings['bburl']}/{URL}/thumb160x120[/IMG]" readonly="readonly" /> <input type="button" value="Select" onClick="javascript:this.form.prev_img1_bbcode.focus();this.form.prev_img1_bbcode.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>Direct Link</strong><br /> <input name="prev_img1_dl" type="text" size="40" value="&lt;a href=&quot;{$mybb->settings['bburl']}/{URL}/thumb160x120&quot;&gt;{FILENAME}&lt;/a&gt;" readonly="readonly" /> <input type="button" value="Select" onClick="javascript:this.form.prev_img1_dl.focus();this.form.prev_img1_dl.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>HTML Code - 160 x 120 Thumbnail</strong> <input name="prev_img1_html" type="text" size="40" value="&lt;img src=&quot;{$mybb->settings['bburl']}/{URL}/thumb160x120&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;" readonly="readonly" /> <input type="button" value="Select" onClick="javascript:this.form.prev_img1_html.focus();this.form.prev_img1_html.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>Full Size Image URL</strong> <input name="prev_img1_full" type="text" size="40" value="{$mybb->settings['bburl']}/{URL}" readonly="readonly" /> <input type="button" value="Select" onClick="javascript:this.form.prev_img1_full.focus();this.form.prev_img1_full.select();"> </div> </td> </tr> </if>

---

Depends on how our display format, we can modify it as our needs (maybe using <else> before the if condition closed).
We need to put {$GLOBALS['threadfields']['key']['value']} variable in our newthread or template_prefix_newthread or template_prefix_editpost or template_prefix_editpost_first template. In this example, because we use img1 as key, so, we need to put {$GLOBALS['threadfields']['img1']['value']} variable.

If we have more than one image field type in that forum, and we want to display the preview for each image, use the similar display format with another key and id. Maybe it's better if we set the fields as hidden, and put the inputrow manually in our newthread or template_prefix_newthread or template_prefix_editpost or template_prefix_editpost_first template, then put the {$GLOBALS['threadfields']['key']['value']} variable after each inputrow.

Other method, maybe we can use the prefix_previewpost template to place the preview image.

Screenshots:

Create a new thread:
   

Hit the Preview Post button:
   

We can select one of the URL (hit the select button, example: BBCODE URL), and insert it to post body to be used in our post.
   

Useless maybe. I just want to share it