This site has several Post forms that include an Image upload field that allows multiple images to be uploaded to a post.
We have made no substantial changes to the site recently. The last thing we did was implement some code you gave us to fix drag'n'drop reordering of images on forms, which may or may not be related to this new issue.
At some point in the last month or two, the Image upload field has stopped working correctly:
• After upload, the thumbnail of the image on the front end form is broken, as the full path is missing from the src. Only the file name is included, not the full path. For example, older images that were uploaded correctly have a thumbnail path of "hidden link" where's new images just have a path of "FileName.jpg".
• Instances of the image in Views are exhibiting the same file path issue.
• In the console I get a 404 error in relation to the missing image, where it is trying to find the image in the root of the site: " hidden link".
• The image itself is uploaded to the media library correctly.
I have the same issue on my Dev copy of this site and have deactivated all other plugins (except for the Toolset ones and WooCommerce, as site breaks completely without those activated). This has not helped.
Link to a page where the issue can be seen: hidden link
Access details:
Username: TestStudioManager
PW: V43Kx^Nw%pUA
Hi,
Thank you for contacting us and I'd be happy to assist.
The login details that you've shared, don't seem to have the access to website's admin area.
Can you please share temporary admin login details, so that I can see how this image field and the form are set up in the admin area?
Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.
regards,
Waqar
Hi Waqar,
I've just commented out the code I was supplied by Toolset to fix the drag'n'drop reordering issue and this has fixed the image upload problem.
Please review this code and see if you can make any improvements. You'll also find it in my theme functions.php file, line 474:
add_action('cred_save_data', 'ts_save_the_rf_sort_order_manually',10,2);
function ts_save_the_rf_sort_order_manually($post_id, $form_data) {
// if a specific form
if ($form_data['id'] == 42 || $form_data['id'] == 58) {
$field_slug = 'studio-images';
$field_content = $_POST['wpcf-'.$field_slug];
$sort_order = array();
delete_post_meta($post_id,'wpcf-'.$field_slug);
foreach($field_content as $k=>$v):
$sort_order[] = add_post_meta($post_id,'wpcf-'.$field_slug,$v);
endforeach;
update_post_meta($post_id,'_wpcf-'.$field_slug.'-sort-order', $sort_order);
}
if ($form_data['id'] == 44 || $form_data['id'] == 56) {
$field_slug = 'artist-image';
$field_content = $_POST['wpcf-'.$field_slug];
$sort_order = array();
delete_post_meta($post_id,'wpcf-'.$field_slug);
foreach($field_content as $k=>$v):
$sort_order[] = add_post_meta($post_id,'wpcf-'.$field_slug,$v);
endforeach;
update_post_meta($post_id,'_wpcf-'.$field_slug.'-sort-order', $sort_order);
}
}
Thank you for sharing this update.
I see that the custom code targets both types of forms, i.e. forms to create and edit posts.
Can you please do a quick test to see if it has any effect if the code is made to target only one type of form? (i.e. either only the create forms or edit forms )
Good thought. The custom code probably isn't required for the Create forms as a user won't change the order of uploaded images until after they've first created their post.
I've tried what you've suggested and it obviously means I can now upload images correctly when using the Create forms, but the problem with the image paths remains when using the Edit forms.
Any other ideas?
Thanks.
Thank you for confirming that.
I'm going to perform some testing around this on my test website and will get back to you as soon as I can.
Thank you for waiting, while I completed some testing around this custom code.
The custom code to order the repeating image field in the edit form, worked as expected, on several test websites that I used.
The issue seems to be specific to your website and most likely an image processing plugin like 'Smush' is handling the image custom fields differently.
Can you please test the code with the edit form without the extra plugins, again?
If the issue persists, I'll need your permission to download your website's clone and test it on a different server.
I've tested this again on my Dev version of this site. With all plugins except Toolset and WooCommerce deactivated, the problem persists:
- With your custom code active, I can reorder images but paths are broken when I upload new ones.
- Without your custom code active, paths are not broken when I upload new images, but I cannot reorder them.
So I don't think it is a plugin conflict issue.
I can give you access to my Dev site if you like, or grant you permission to download a clone of the live site for testing.
I've now run that same test on the live site, disabling all plugins except the Toolset plugins (Access, Forms, Maps, Types, Views) and WooCommerce (site becomes inoperable without WooCommerce enabled), but the problems still persist.
It's imperative that we get this fixed asap, my clients cannot wait any longer. There is clearly an issue with Toolset given the need for patch code to fix the drag'n'drop reordering bug, but the patch code is somehow preventing image paths from being referenced correctly once images are uploaded.
What next please?
Thank you for the permission and I've downloaded the website's clone.
I'm currently running some troubleshooting tests on this and will update you with the findings, within the next few hours.
Thank you for waiting while I completed the testing around this edit form for studios, on your website's clone.
Despite several edits, I couldn't reproduce this issue of broken image paths.
Here are the steps that I took:
1. I uncommented the function 'ts_save_the_rf_sort_order_manually' from the theme's 'functions.php' file.
2. I added a new 'Studio' post from the admin area and uploaded 3 images in the 'studio-images' field.
3. Tested the reordering in the admin area and it worked as expected, as you noted too.
4. Next, I tested the reordering of those images from the single studio post, through the form in the 'Edit this Studio' tab. The ordering was properly saved including the correct image paths in the field.
Can you please try the same on the production website too and let me know if the issue is reproducible through some different steps?
Hi Waqar,
Thanks for your further work on this. I'm not surprised you weren't able to reproduce the issue of broken image paths because the steps you took do not match the steps I described when reporting the error.
Firstly, as far as I know, the back end admin area is unaffected. The problem is only with the front end Post forms. Therefore uploading and reordering images through the back end bypasses the problem altogether.
Secondly, with the function uncommented, the drag&drop reordering of images on the front end Post forms will work fine and the image paths will be fine. However uploading new images will not work correctly.
What you need to test is the uploading of new images via the front end form when the 'ts_save_the_rf_sort_order_manually' function is in use. That is what causes the image paths to be saved incorrectly when new images are uploaded via the Post forms.
Does this make sense?
Checking in again, hoping you have some progress for me?
Thank you for sharing the additional details and that cleared it up.
The custom code for ordering the images in edit form was failing to store the correct image path of the newly uploaded images.
This was complicated to be fixed, because the fully image path of the new images is not available in the form's data, that Minesh's code was using to preserve the newly set order.
This complication is the most likely cause of why the internal ticket to fix this in the plugin's core is still pending. We've plans to refactor how images are stored and manged by the Types fields, as a wider goal.
For now, I was able to add some code modifications that preserves the new order separately for the existing and new images and then merges them as whole to store them again.
Example:
add_action('cred_save_data', 'ts_save_the_rf_sort_order_manually',10,2);
function ts_save_the_rf_sort_order_manually($post_id, $form_data) {
// if a specific form
if ($form_data['id'] == 42 || $form_data['id'] == 58) {
$field_slug = 'studio-images';
$upload_dir = wp_upload_dir();
// array of images coming from the form fields
$field_content = $_POST['wpcf-'.$field_slug];
// temp array for storing already uploaded images
$field_content_trimmed = array();
foreach($field_content as $k=>$v):
if (strpos($v, $upload_dir['baseurl']) !== false) {
$field_content_trimmed[] = $v;
}
endforeach;
// array that gets all the uploaded images from the field's value
$field_content_new = get_post_meta( $post_id, 'wpcf-'.$field_slug, false );
// merge temp array of existing images and new ones
$merged_arr = array_unique( array_merge($field_content_trimmed, $field_content_new) );
// deleting custom fields values and storing again to collectively store the new order
$sort_order = array();
delete_post_meta($post_id,'wpcf-'.$field_slug);
foreach($merged_arr as $k=>$v):
$sort_order[] = add_post_meta($post_id,'wpcf-'.$field_slug,$v);
endforeach;
update_post_meta($post_id,'_wpcf-'.$field_slug.'-sort-order', $sort_order);
}
}
This works on my test website as well as on your website's clone.
Hi Waqar,
Brilliant, you have solved it! Well done! Sorry for the delay replying, I've been busy on other projects and only just had time to test your code. It's working fine on the live site.
Appreciate all your help!
