Support Forum
I have a metabox set up with a standard "image" field. I'm also using the upload_dir and unique_filename_callback options.
When I upload an image it uploads fine, I can see the file with the custom name in my custom folder. However on the backend the image preview is broken.
I did some digging and found what seems to be the root of the problem.
On the documentation page for the Image field type it says "This field saves multiple attachment IDs in the database", and when I look at the code that displays these fields in the backend it uses the WordPress wp_get_attachment_image function to fetch the URL for the thumbnail in the admin area. That function requires an attachment_id.
However, when I look at my database it seems the field is actually saving the full URL, despite the documentation saying it stores an attachment ID. So because the field is returning a URL instead of an attachment ID the thumbnail doesn't show up.
Is there any way to fix this?
Hi,
Thank you for your feedback.
It's not a bug of the image
field, the value saved to the database is the file URL. We also have a note for this case in the documentation when you save the image to the custom folder. Please read more here https://docs.metabox.io/fields/image/#upload-to-a-custom-folder
It is kind of a bug, because the image previews are broken and don't work properly.
It's difficult to manage images if you can't see them.
I'll look for another solution for what I'm trying to do if image fields don't let you see what's uploaded.
There is a really easy fix for this.
The only reason this problem exists is because the plugin calls the "wp_get_attachment_image" function on whatever is returned, since it expects an attachment ID.
So if a simple check is done on the returned value first, we can change the output based on if it's attachment ID or a file URL.
Inside the image.php file if I add a new variable like this:
$attachment_image = (is_numeric($file)) ? wp_get_attachment_image( $file, $field['image_size'] ) : '<img width="150" height="150" src="'.$file.'" alt="" />';
I can then replace the call to wp_get_attachment_image with the $attachment_image variable instead. If an attachment ID is returned, it works as it always did. But if a file URL is returned (because a custom upload folder was used) the preview image still shows up as expected.
This small change seems to make the plugin work as expected, and removes one of the limitations people may run into.
So the original code looks like this:
return sprintf(
'<li class="rwmb-image-item">
<div class="rwmb-file-icon">%s</div>
<div class="rwmb-image-overlay"></div>
<div class="rwmb-image-actions">
%s
<a href="#" class="rwmb-image-delete rwmb-file-delete" data-attachment_id="%s"><span class="dashicons dashicons-no-alt"></span></a>
</div>
<input type="hidden" name="%s[%s]" value="%s">
</li>',
wp_get_attachment_image( $file, $field['image_size'] ),
$edit_link,
esc_attr( $file ),
esc_attr( $attributes['name'] ),
esc_attr( $index ),
esc_attr( $file )
);
And with my changes, it looks like this:
$attachment_image = (is_numeric($file)) ? wp_get_attachment_image( $file, $field['image_size'] ) : '<img width="150" height="150" src="'.$file.'" class="attachment-thumbnail size-thumbnail" alt="" />';
return sprintf(
'<li class="rwmb-image-item">
<div class="rwmb-file-icon">%s</div>
<div class="rwmb-image-overlay"></div>
<div class="rwmb-image-actions">
%s
<a href="#" class="rwmb-image-delete rwmb-file-delete" data-attachment_id="%s"><span class="dashicons dashicons-no-alt"></span></a>
</div>
<input type="hidden" name="%s[%s]" value="%s">
</li>',
$attachment_image,
$edit_link,
esc_attr( $file ),
esc_attr( $attributes['name'] ),
esc_attr( $index ),
esc_attr( $file )
);
Hi,
Thank you for your feedback.
I'm able to reproduce the issue on my end and escalate this issue to the development team to fix it in the next update.