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

[leefish]

WHOOOOOOAAAAAAA. this is JUST what I wanted - thanks a LOT. Awesome

[Pirata Nervo]

This looks great

[ZiNgA BuRgA]

Hardly useless, a very logical and looks good.
Maybe allow it for editpost.php too?

[Imran]

Looks great RateU.

[RateU]

Thanks

(09-29-2010 08:50 AM)ZiNgA BuRgA Wrote:  Maybe allow it for editpost.php too?

I've updated it, Yumi

[Imran]

Thanks for the Update RateU. I will definitely try that.

[leefish]

Hi RateU - I am busy test driving on my forum - am I right in thinking that when I click the select button next to an url or BBcode then it selects the text ready to copy? Because its not happening for me. I am on 1.6....

I changed the img1 in the code to pfpic (my key for the image) and used an ELSE statement to be able to use my existing value in thread view

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 33

<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_pfpic_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_pfpic_bbcode.focus();this.form.prev_pfpic_bbcode.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>Direct Link</strong><br /> <input name="prev_pfpic_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_pfpic_dl.focus();this.form.prev_pfpic_dl.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>HTML Code - 160 x 120 Thumbnail</strong> <input name="prev_pfpic_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_pfpic_html.focus();this.form.prev_pfpic_html.select();"> </div> <div class="float_left" style="width: 50%;"> <strong>Full Size Image URL</strong> <input name="prev_pfpic_full" type="text" size="40" value="{$mybb->settings['bburl']}/{URL}" readonly="readonly" /> <input type="button" value="Select" onClick="javascript:this.form.prev_pfpic_full.focus();this.form.prev_pfpic_full.select();"> </div> </td> </tr> <else> <a href="{URL}" rel="lightbox[find]"><img src="{URL}/thumb160x120" alt="{$thread['subject']} Screenshot" title="{$GLOBALS['threadfields']['pfpicdesc']}" style="border: 1px solid #C1C1C1; padding: 3px; margin: 3px;" /></a></if>

---

I am unsure what I am doing wrong here.

[ZiNgA BuRgA]

It looks like it _should_ work.
Maybe just try a different browser as a quick check.

[leefish]

Hi, I tried it in Opera, IE8 and FF3.6. Same result on all. Maybe its some kind of MYBB1.6 fail. Grrr. This is JUST what I wanted too.