[Resolved] Updating post with post form messes up images

[Author]

Posts

[ericE-4]

I have a "Lodge" custom post type that I have created a post form to allow users to edit on the front end. Each Lodge post contains a featured image and multiple images in a repeating Image field type. There are 4 repeating image fields: Main Photos, Accommodations Photos, Meals Photos, Boats Photos.

When the post form is submitted, every image field get messed up as follows—here are the steps to duplicate this as well as screencaps illustrating the problem.

1. Log in to the site with temporary the admin account I created (details provided below).
2. Go to page hidden link This page shows the lodge post data assigned to your login.

Note the featured image (the large image displayed at the top), and the grid of 150x150 thumbnails for the Main Photos repeating image field directly below. See form1.jpg. In the back end, you can see that this post has the same featured image set (see form2.jpg) and the the same images for the Main Photos field (see form3.jpg).

3. Click the Save button (this is the form's submit button) without making any changes to the form.

Problems:
- The featured image has been removed from the Lodge post (see form4.jpg)
- On the front end, the 150x150 thumbnails for the Main Photos images have been replaced with the full-size images (see form5.jpg)
- On the back end, you can see that the the 150x150 thumbnails have been replaced by the full-size images.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Eric,

Thank you for contacting us and I'd be happy to assist.

During troubleshooting on my own website, I was able to reproduce this issue only when "Image optimization service by Optimole" plugin was activated.

The way the featured image and other media upload fields work in Toolset Forms, they expect the actual URL of the file, saved based on the website's own domain (example "yourwebsite.com").

But when CDN based image optimization services (like Optimole, Photon from Jetpack or Amazon S3 etc) are active, they automatically filter and replace the actual image URLs with the ones being served through their own server/CDN domain.

As a result, the featured image is not recognized at all and the URLs in the custom fields are also replaced by the image URLs which are on the third-party server/CDN domain.

This has been reported already and some improvements are planned to be included in the next Toolset Form's release ( 2.5.5 ):
https://toolset.com/errata/issues-with-saving-images-and-media-fields-in-toolset-forms-when-using-amazon-s3-and-cloudfront-plugins/

I'll keep you updated with the progress through this ticket and for now, workarounds can be:

1. Either disable Optimole optimization or consult their support to see if it can exclude images inside the editing form.
OR
2. You can use the hook "cred_save_data" ( ref: https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data ), to attach a custom function to form's submission, which replaces the image URLs from the CDN domain with the ones from your website's domain and then save them as featured image and image custom fields, accordingly.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[ericE-4]

Thanks, I'll employ that workaround until this can be addressed.