Skip Navigation

[Resolved] Custom post type images upload through the backend appear sideways in the front

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 12 replies, has 2 voices.

Last updated by Waqar 1 year ago.

Assisted by: Waqar.

Author
Posts
#2577849
images-sideways.jpg

The custome post type allows to upload images of Boats for sale.

The images are upright but after uploading them (through the back end), the appear sideways. Looking at the source code, I see that the image name was changed (wpcf was added to the filename (eg. original name is 20230306_155252-1.jpg and the renamed version is 20230306_155252-1-wpcf_1024x1024.jpg)). Something in the upload process resized the image (original size 3024x4032) and flip it sideways (adding wpcf in the filename).

Could not find any references to WPCF, its meaning or else.

This action seems to be related to the picture size. If I resize my pictures before an upload, then the image is not flip sideways and there is no creation of a file containing wpcf in its name. This is my work around. But how can this issue be explained? Sure I could tell my client to resize his pictures before uploading them. But TOOLSET should not be rotating images. Resizing is ok because of performace issue. Are there any parameters that can be tweaked to control that?

Link to the website: hidden link

#2578303

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

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

This image rotation is not something specific to how Toolset handles the image uploads or resizing. It relates to how WordPress reads the metadata stored with each image.

For more background information on this topic and some suggestions to fix it, here is a useful guide on the topic:
hidden link

I hope this helps and please let me know how it goes.

regards,
Waqar

#2578677

Thank you for your reply Waqar.

This does not resolve the issue unfortunaltely. I spent the last 2,5 hours documenting the issue.

Hopefully, these details will help you pinpointing where the problem is. The link below will give you a PDF detailing 3 tests that I ran this morning (I am surprised that I cannot upload a PDF while editing this ticket)

hidden link

Let me know if my documentation is not clear.

Pierre

#2579743

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Pierre,

Thanks for writing back and for sharing your test results.

In your 'TEST 3', I suspect that a new image generated through photoshop starts showing correctly because it doesn't include the metadata or image information that comes with the original image file. The fact that the image's dimensions were changed from 3024x4032 to 1000x1333 doesn't seem like the main cause of this change.

Can you please run another test with the same image, but this time keep the newly generated image's dimensions same as the original one (3024x4032)? This will confirm if the size of the uploaded image has anything to do with it or if it is just because of the image metadata or image information that comes with the original image file.

Also during testing on my website, I couldn't reproduce this behavior, which suggests that something specific to your website or the image(s) being used is involved.

Can you please share temporary admin login details, along with the link to the example page where this image with the incorrect orientation can be seen? I'll also need your permission to download a clone/snapshot of the website, in case this needs to be investigated on a different server.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

#2582251

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing these details and I've downloaded the website's clone.

I'm currently performing some tests on this clone and will share the findings, as soon as this testing completes.

Thank you for your patience.

#2583911

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I just wanted to update you that I'm still working on this and will get back with a detailed reply in the next few hours.

#2584101

Thanks for the update Waqar.

#2586157

Hello Waqar,

Any updates?

#2586475

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for waiting as this investigation took longer than I expected.

After several tests with different types of images, I was able to narrow down the issue of the incorrect image orientation. The images which are shown rotated, are the ones that have the incorrect 'orientation' value stored with them, as the metadata.

For example, if you'll check the metadata of the problematic image 'CRESTLINER-DISCOVERY-155252.jpg', you'll find the 'orientation' value to be '6 (Rotated 90° CCW)', which is wrong because it is upright, as it is.

On the other hand, the resized image 'CRESTLINER-DISCOVERY-155252-ps-optimized.jpg' has no such 'orientation' value set which is why it shows upright on the front-end.

To overcome this, I installed and activated the 'Fix Image Rotation' plugin. After that any images I uploaded, showed correctly on the front end, even if they had the incorrect 'orientation' value stored with them.

You can activate this plugin too and then upload all your images again and check them on the front end.

I hope this helps and let me know how it goes.

#2588885
orientation-of-155252.png

Hello Waqar,

Thanks for your reply.

Where do you see that the orientation is 6 ? The picture attached shows the metadata of the original picture as I see it in Photoshop. And it is set to 1...

I downloaded the scaled pictures from the media library (i.e. 155252-scaled and 155252-ps-optimized-scaled) and 155252-scaled shows an orientation of 1 (in photoshop) and 155252-ps-optimized-scaled shows an orientation of BLANK which makes me think that it lost that information during the optimization process.

Pierre

#2590313

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I checked the original image's data in the image preview tool in MacOS:
hidden link
( screenshot: hidden link )

Note: Only the orientation data of the original image acquired from the camera or phone matters, as the scaled or resized images that WordPress will generate, will make use of the original, as a source. Any image that you'll redo/resize through Photoshop, will have the correct orientation value because Photoshop will correct it, on its own.

#2593065

This is strange because the client is simply using his phone to take pictures. And this is not the first time that he does it.

I have talked with the client and we will experiment taking pictures with a different camera or phone and review the process he is using to transfer images. Maybe something in the process rotates the images... I don't know....

Anyhow... Ticket can be closed for now... We will have a closer look at the picture taking/transforming/uploading process at our end.

I will re-open the ticket if needed.

Thanks for your help Waqar.

Pierre

#2593473

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Sure, feel free to keep experimenting with pictures taken from different cameras, and let us know if there is a pattern.

I'm going to mark this ticket as resolved, but you're welcome to start a new one in case you have any follow-up questions or information.
( just include this ticket's link in it, so that we know that these tickets are linked )

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.