Image preview gets cut off

This seems to happen only on one of my forums and not the other, for some reason, despite both being close to the same version of Discourse.

Since a recent update, when images are embedded in posts, the lightbox thumbnail cuts off the sides of the image. This makes it really difficult to read the pictures if they have text.

It doesn’t seem to me like this is desired behavior, and in fact, it’s not happening here on Meta.

Full image

Hi @FroggyC :slight_smile:

Then it’s probably because of their files settings, such as:

  • max image width: Maximum thumbnail width of images in a post. Images with a larger width will be resized and lightboxed.

  • max image height: Maximum thumbnail height of images in a post. Images with a larger height will be resized and lightboxed.

  • min ratio to crop: Ratio used to crop tall images. Enter the result of width / height.


I may have read a bit too quickly.

Did the image appear correctly before the update?

If you right-click → Open image in new tab, does the image appear complete?

What settings have not their default value in settings → files?

2 Likes

All of those settings are at their defaults.

The image is not cropped when opened.


I’ve tried restoring the site backup on a new instance, and that also didn’t solve the problem. So it’s obviously a configuration problem, although I honestly don’t know what.

Does anyone have a solution for this? I’m at my wits’ end with this problem.

Try visiting the site in safe mode to see if that makes a difference.

If the image is in a public post, share a link to it here. Maybe someone will be able to figure out what’s going on.

2 Likes

Hello :wave:

I checked the site and it seems there is no custom css or other customization which affect the thumbnails.

This should be a site setting misconfiguration like:

But you said:

By the way what is the default value on your min ratio to crop setting?


Maybe a CDN misconfiguration? If you use a cloud based image resizer to optimized images (thumbnails). This is not very likely but this could be also a possible reason.


An other possible reason is a plugin which can do things with thumbnails. As Simon suggested you can also try upload new images in safe mode to check this might caused by a plugin. (but as I saw, you don’t use such a plugin.) If I am wrong and you use any plugin like this, sometimes disables the plugin on admin is not enough, in this case you have to comment out (remove) from app.yml and try again…

But note that: These thumbnails are cooked in these sizes and cropped in posts. So if you change anything it won’t affect the existing thumbnails until you rebake the posts or resize these manually to recognize it the system as new file and generate new thumbnail for them. With new uploads these changes should show the changed result after reload the page.

3 Likes

Visited the site in safe mode and the problem persists.

I also tried restoring the site on a different server with a Discourse install with the same app.yml, then rebaking posts, just to test if anything would change, and it didn’t.

0.22, and it’s the exact same in another forum I manage that doesn’t have this problem.

My CDN is just the basic one from Amazon AWS, and it’s with the same settings as another site that doesn’t have this problem.

Unfortunately, I don’t use any plugin that would interact with that. Maybe discourse-topic-previews-sidecar?

1 Like

I’ve checked inside my AWS S3 bucket, and it seems it’s the optimized version of the images that got cropped. So it’s some sort of bug that’s happening during image upload.

Can you try :

  1. Edit slightly the original picture (so it’s not recognized as an existing images by Discourse, though I’m not sure it is if you paste if from your clipboard),
  2. Go to safe mode, everything disabled
  3. Create a post
  4. Paste/upload the picture
  5. See if the preview or result is cropped?

:thinking:

This is the kind of case were everyone’s trying hard to pinpoint an issue and in the end we’ll all be “That was so obvious”, right?

season 3 facepalm GIF

1 Like

I saw you writing while I posted my last update. Given my discovery on the AWS bucket, are those steps still useful?

Yeah, re-uploading the image in safe mode (I took a screenshot of it, so it was slightly different) fixes the issue.

Does this mean it’s caused by a plugin?

2 Likes

I believe sidecar plugin has some experimental features.

Can you turn off these setting?

2 Likes

Not that setting, but I had the setting right under it enabled.

Disabling it seems to have solved the issue (at least for new pictures).

Would there be any way now to rebuild all of the optimized versions to fix the problem sitewide?

I see there’s a uploads:regenerate_missing_optimized rake task, but as far as I understand it would only regenerate the optimized versions that are missing.

1 Like
cd /var/discourse
./launcher enter app
rake posts:rebake
1 Like

I thought that only rebaked the post HTML from the markdown. In any case, I’ll try it.

Yeah but I think it should regenerate because your settings changed.

Rebaking the post hasn’t regenerated the optimized versions, unfortunately.

I’m tempted by moving the optimized/ folder in my bucket and running rake uploads:regenerate_missing_optimized. Let’s see if I break everything.

Edit: Ah, but that task only works for internal storage. Not for S3.

In the end the offending images were few enough that I ended up manually reuploading all of them. So, the problem’s solved, although not in the most efficient manner.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.