Upload media image orientation
Can someone please point me to the correct place in the documentation so that images are rotated the correct way?
This might be related to an issue I previously have had with Sharp.
https://github.com/lovell/sharp/issues/688#issuecomment-711132913@imcorfitz Is the easy/cheap fix here just to make sure the height is then less than the width?
because the thumbnail is 400 by 400, so it is having the chaining issue?
How does the file look like when you upload
?
actually.. could you send me the file please? I'd like to try and upload here and see if I can fix it
Sure one sec.
Here ya go
What is your collection config?
import { MyListComponent } from '../components/admin/UploadMultiple'; import type { CollectionConfig } from 'payload/types'; const Media: CollectionConfig = { slug: 'media-collection', fields: [ { name: 'name', type: 'text', }, { name: 'images', type: 'array', fields: [ { name: "image", type: "upload", relationTo: "media", required: true, }, { name: "title", type: "text", }, { name: "alt", type: "text", }, { name: "caption", type: "text", }, ] } ], hooks: { // beforeOperation: [(args) => {console.log(args)}], }, admin: { useAsTitle: 'name', defaultColumns: [ 'name' ], group: 'Media Collection', components: { views: { Edit: MyListComponent } } }, }; export default Media;Work in progress
The media collection *
you have a
relationTo: "media",- could I see the config for that?
import path from 'path'; import type { CollectionConfig } from 'payload/types'; const Media: CollectionConfig = { slug: 'media', admin: { useAsTitle: 'alt', defaultColumns: [ 'id', 'alt' ], group: 'Icons' }, upload: { staticURL: '/media', staticDir: 'media', disableLocalStorage: true, // Specify the size name that you'd like to use as admin thumbnail adminThumbnail: 'thumbnail', imageSizes: [ { height: 300, width: 400, crop: 'center', name: 'thumbnail', }, { width: 900, height: 450, crop: 'center', name: 'sixteenByNineMedium', }, ], }, fields: [ { name: 'alt', type: 'text', } ], }; export default Media;Do you have the same issue still if you download the image you just sent me - from discord.. And then upload that?
let me check
interesting. I do not.
So that solved it. Not sure why.
Maybe I am just dumb? Haha
no you are not.. I think this kinda proves my previous point. Cause discord formats your image when you uppload it.
Basically, nested within your image is a set of metadata, which might not be interpreted correctly by sharp when you upload. However, Discord solves that for the image, so when you download it again, the metadata is stripped from the image, making a correct upload.. I used to pass all images in to photoshop and export simply to strip for metadata.. So i think it relates correctly to my github reference.
So if you could maybe send me the file over wetransfer? That doesn't strip the metadata.
sure. Send me your email?
Sent in pm
So yes.. I can replicate with that image in my own media collection.. Not using your configuration.
Now I'll try and add the rotate command to the imageresizer.js in payload.. 2 sec
Boom!
interesting. Didn't knwo there was a rotate command.
there isn't
it is a "bug" in the sharp library..
So how do I replicate your fix?
Basically by adding
.rotate()to the
sharpBasevariable in the Payload CMS image resizer module - we can resolve your particular issue. As referred to in my answer on Github.. Exactly the same.
the rotate command without any options passed to it, will automatically rotate so sharp has the iamge as the correct orientation.
This unfortunately is not something you can do yourself easily. This will have to be merged as a fix to the payload codebase
@jarrod_not_jared - maybe you can have a look at this?
Fine for now and good to know all of this stuff.
Thanks by the way!
Most welcome mate.. Hopefully this is an easy fix..
@jarrod_not_jared You can pull the image in question here:
https://wetransfer.com/downloads/da02e791687573f52b84f5f193ecb65220230725191310/aee9d9c5b7d88901907b3066bbb08c7c20230725191310/5c8878?trk=TRN_TDL_01&utm_campaign=TRN_TDL_01&utm_medium=email&utm_source=sendgridif you want to test this yourself.
I have opened issue and created PR for your review.
https://github.com/payloadcms/payload/pull/3081@joelcorey - the PR has been merged and a new release of Payload is out with the fix. Would you please update to the latest version and confirm whether or not your problem has been resolved? Cheers.
Hot damn! That's exciting! Will do.
The issue persists. I tried just uploading normally on the first image, and again with imagemagik/mogrify meta data stripping on the second.
Interestingly: it did do a 16 by 9 thumbnail image better than before this latest fix. That is new behavior.
Are you sure you updated the payload version?
Copying your config, this is the result I get:
{ "name": "payload", "version": "1.11.7", "description": "Node, React and MongoDB Headless CMS and Application Framework",wait a sec
hold on.
Do me a favour.. Please try to open your payload cms in a private window and log in and try uploading the image again..
I think what you see is a browser cached version..
Please also note that your different image sizes are located under the "more info" button on the image
The error persists.
-.-'
How did you update your payload install? Maybe I am being a super noob?
yarn add payload
Yeah I don't know.
You mind sharing your repo?
Sure. Send me your email again.
Have you pushed all latest changes?
no apologies
there ya go
After a clean download and installation of your current codebase - this is the result. Works perfectly it seems.
Maybe try and remove your node_modules folder and reinstall everything
Works! Thanks!
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.