[WallabyKidMember Post count: 8]

Thought this might be of interest…
When File-Upload column types are used predominantly for images,
it bugged me that when using the jqmWindow file-browser it was often
difficult to find and select the desired image file in the absence of
good, self-explanatory image filenames.

To overcome this, I’ve added a little preview DIV just to the right of the
jqmWindow DIV which displays a thumbnail preview for image type files
onmouseover of the image filenames in the filebox.

The caveat however, is that it requires modification of 4 core pods files,

1. pods/ui/ajax/misc.php
2. pods/ui/js/pods.ui.js
3. pods/ui/input_form.php
4. pods/ui/style.css

Of course this means that unless Scott decides to incorporate this, you’ll lose the preview upon updating pods.

Mods as follows:

In – pods/ui/ajax/misc.php

Replace…

PHP

if (0 < mysql_num_rows($result)) { while ($row = mysql_fetch_assoc($result)) { $guid = substr($row['guid'], strrpos($row['guid'], '/') + 1); ?> <div class=&quot;file_match&quot; rel=&quot;<?php echo $row['id']; ?>&quot;><?php echo $guid; ?></div>

1 2 3 4 5

if (0 < mysql_num_rows($result)) {     while ($row = mysql_fetch_assoc($result)) {         $guid = substr($row['guid'], strrpos($row['guid'], '/') + 1); ?>     <div class=&quot;file_match&quot; rel=&quot;<?php echo $row['id']; ?>&quot;><?php echo $guid; ?></div>

with…

PHP

$file_types = array(&quot;.jpg&quot;,&quot;.gif&quot;,&quot;.png&quot;,&quot;.jpeg&quot;); $thmb_width = get_option('thumbnail_size_w'); $thmb_height = get_option('thumbnail_size_h'); $thmb_size = &quot;-{$thmb_width}x{$thmb_height}&quot;; if (0 < mysql_num_rows($result)) { while ($row = mysql_fetch_assoc($result)) { $hover =&quot;&quot;; $guid = substr($row['guid'], strrpos($row['guid'], '/') + 1); $thumb = wp_get_attachment_thumb_url($row['id']); $ext = &quot;.&quot;.substr(strrchr($thumb, &quot;.&quot;), 1); if(in_array($ext,$file_types)) { $url = $thumb; $hover = 'onmouseover=&quot;swf_preview(this.title)&quot; onmouseout=&quot;swf_hide();&quot;'; } else $url = &quot;file&quot;; ?> <div class=&quot;file_match&quot; rel=&quot;<?php echo $row['id']; ?>&quot; style=&quot;width: 280px; cursor:pointer;&quot; title=&quot;<?php echo $url ?>&quot; <?php echo $hover; ?> ><?php echo $guid; ?></div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$file_types = array(&quot;.jpg&quot;,&quot;.gif&quot;,&quot;.png&quot;,&quot;.jpeg&quot;); $thmb_width = get_option('thumbnail_size_w'); $thmb_height = get_option('thumbnail_size_h'); $thmb_size = &quot;-{$thmb_width}x{$thmb_height}&quot;; if (0 < mysql_num_rows($result)) {     while ($row = mysql_fetch_assoc($result)) {         $hover =&quot;&quot;;         $guid = substr($row['guid'], strrpos($row['guid'], '/') + 1);         $thumb = wp_get_attachment_thumb_url($row['id']);         $ext = &quot;.&quot;.substr(strrchr($thumb, &quot;.&quot;), 1);         if(in_array($ext,$file_types))         {   $url = $thumb;             $hover = 'onmouseover=&quot;swf_preview(this.title)&quot; onmouseout=&quot;swf_hide();&quot;';         }         else $url = &quot;file&quot;; ?>     <div class=&quot;file_match&quot; rel=&quot;<?php echo $row['id']; ?>&quot; style=&quot;width: 280px; cursor:pointer;&quot; title=&quot;<?php echo $url ?>&quot; <?php echo $hover; ?> ><?php echo $guid; ?></div>

In – pods/ui/js/pods.ui.js

ADD

PHP

function swf_preview(src){ jQuery(&quot;.fb_preview&quot;).css(&quot;background-image&quot;,&quot;url('&quot;+src+&quot;')&quot;).show(); } function swf_hide(){ jQuery(&quot;.fb_preview&quot;).css(&quot;background-image&quot;,&quot;url('')&quot;).hide(); }

1 2 3 4 5 6

function swf_preview(src){     jQuery(".fb_preview").css("background-image","url('"+src+"')").show(); } function swf_hide(){     jQuery(".fb_preview").css("background-image","url('')").hide(); }

In – pods/ui/input_form.php

ADD…

PHP

<div class='fb_preview'></div>

1	<div class='fb_preview'></div>

AFTER… < div class="filebox">< /div>’ IN < div class="jqmWindow" id="dialog">

In – pods/ui/style.css

ADD

PHP

/* pods swf_upload filebox preview*/ .fb_preview { display:none; width: 154px; height:137px; background: #e4f2fd; background-repeat: no-repeat; background-position: center; border:2px solid #c6d9e9; position:absolute; left:300px; top:-15px; }

1 2 3 4 5 6 7 8 9 10 11 12 13

/* pods swf_upload filebox preview*/ .fb_preview {     display:none;     width: 154px;     height:137px;     background: #e4f2fd;     background-repeat: no-repeat;     background-position: center;     border:2px solid #c6d9e9;     position:absolute;     left:300px;     top:-15px; }

And there you have it. A nice little thumbnail preview when mousing over your image filenames in the jqmWindow filebox. Now… maybe somebody can see a way to reformulate this as a package, but that’s well above my pay grade!

[sc0ttkclarkKeymaster Post count: 791]

You know what, Pods 2.0 has a completely revamped Media Library integration with a much better browser and interface —– BUT —– This would actually make a great addition to the existing interface with minimal work on my part to incorporate since you’ve done the hard work of actually doing it for me

I’ll patch this into the next release as an enhancement, thanks for your contribution to Pods core and keep it up – patches are always welcome around here and your help is invaluable to the project’s health. I encourage everyone else to make leaps like this, I’m more than likely going to include it if it makes sense and is minimally invasive to the codebase for 1.x (focusing more on 2.0, if you want to patch that then go at it too!)

[sc0ttkclarkKeymaster Post count: 791]

This will finally go into Pods 1.14.4, sorry for the wait, been so busy with getting Pods 2.0 to go out next week

[Author]

Posts