Styling Multiple File Inputs

[leefish]

I currently use the single file inputs for my images, this is the display format I use:

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 34

<if THIS_SCRIPT == 'newthread.php' OR THIS_SCRIPT == 'editpost.php' then> <tr> <tr><td class="tcat" align="center" colspan="2"><strong>Image 1 Preview &amp; URL</strong></td></tr> <tr> <td class="trow1" align="center"> <img src="{$GLOBALS['threadfields']['pfpic']['url']}/thumb160x120" alt="" title="" /> </td> <td class="trow1" valign="top"> <div class="float_left" style="width: 50%;"> <strong>BBCODE - 640 x 480 Thumbnail</strong><br /> <input name="prev_pfpic_bbcode" type="text" size="40" value="[IMG]{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfpic']['url']}/thumb640x480[/IMG]" readonly="readonly" /> <input type="button" class="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="<func htmlspecialchars_uni><a href="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfpic']['url']}">{$GLOBALS['threadfields']['pfpic']['filename']}</a></func>" readonly="readonly" /> <input type="button" class="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>BB Code - Inline Lightbox</strong><br /> <input name="prev_pfpic_html" type="text" size="40" value="[LIGHTBOX={$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfpic']['url']}]{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfpic']['url']}/thumb640x480[/lightbox]" readonly="readonly" /> <input type="button" class="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><br /> <input name="prev_pfpic_full" type="text" size="40" value="{$mybb->settings['bburl']}/{$GLOBALS['threadfields']['pfpic']['url']}" readonly="readonly" /> <input type="button" class="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 itemprop="image" src="{URL}/thumb160x120" alt="{$thread['subject']} Screenshot" width="{$GLOBALS['threadfields']['pfpic']['thumbs']['160x120']['w']}" id="pfpic" height="{$GLOBALS['threadfields']['pfpic']['thumbs']['160x120']['h']}" class="bigav ximage" /></a> </if>

---

I repeat this for each image threadfield, so when the users are uploading they can press "submit images" (preview post in disguise) and they get a screen that looks like the attached. Then they can select an image and copy paste into the post.

The users are not very tech-savvy, so I try and make it easy for them to compose the post.

I am trying to make a tutorials set up, and sims tutorials can be picture heavy so it makes sense to use the multiple file upload for the images too.