Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Image Preview In Newthread And Editpost
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #1
Image Preview In Newthread And Editpost
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 Biggrin


(This post was last modified: 10-12-2010 03:17 PM by RateU.)
09-29-2010 04:37 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #2
RE: Image Preview In Newthread
WHOOOOOOAAAAAAA. this is JUST what I wanted - thanks a LOT. Awesome Smile


[Image: leelink.gif]
MYBB1.6 & XThreads
09-29-2010 05:09 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Pirata Nervo Offline
Member
***
Posts: 235
Joined: Jan 2008
Post: #3
RE: Image Preview In Newthread
This looks great
09-29-2010 06:54 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #4
RE: Image Preview In Newthread
Hardly useless, a very logical and looks good.
Maybe allow it for editpost.php too?

My Blog
09-29-2010 08:50 AM
Find all posts by this user Quote this message in a reply
Imran Offline
Member
***
Posts: 204
Joined: Apr 2010
Post: #5
RE: Image Preview In Newthread
Looks great RateU. Smile

[Image: logo.png]

[Image: twitter.png]
09-30-2010 01:03 AM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #6
RE: Image Preview In Newthread
Thanks Biggrin

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

I've updated it, Yumi Biggrin

09-30-2010 05:18 AM
Find all posts by this user Quote this message in a reply
Imran Offline
Member
***
Posts: 204
Joined: Apr 2010
Post: #7
RE: Image Preview In Newthread
Thanks for the Update RateU. I will definitely try that. Smile

[Image: logo.png]

[Image: twitter.png]
09-30-2010 05:33 AM
Visit this user's website Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #8
RE: Image Preview In Newthread
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.



[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 09-30-2010 09:00 AM by leefish.)
09-30-2010 08:46 AM
Visit this user's website Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #9
RE: Image Preview In Newthread
It looks like it _should_ work.
Maybe just try a different browser as a quick check.

My Blog
09-30-2010 07:20 PM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #10
RE: Image Preview In Newthread
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.


[Image: leelink.gif]
MYBB1.6 & XThreads
10-01-2010 12:53 AM
Visit this user's website Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: