Gallery card should not upscale image

Bugs
1

I created a gallery where the best size images I had were small about 200x300 pixels. They look fine on mobile. But in desktop model, the images are getting upscaled and are thus blurry, looking worse than if they are left alone. This is with the Casper theme.

Steps to Reproduce

  1. Create a gallery of 8 images that about 200x300 pixels
  2. View full-width on desktop with Casper them.

Setup information

Ghost Version

5.2.3

Casper version 5.1.4

The flaw relates to this CSS:

And this JavaScript:

The logic bug is that it assumes the images are always at least as wide as the container-- The CSS sets the image width to 100% of the container.

2

The better resolution I found was to search harder for replacement images of higher quality. :joy:

Another workaround is to use a tool like Photoshop or GIMP to add a solid border around the image-- for example a white background that approximates the size that Ghost will display it at.

Also, the amount of stretching depends on the number and dimensions of items in the gallery. So, removing an item from the gallery may help, and splitting a gallery into two galleries may also help.

3

Sometimes the simplest solution is the best :smile:

Alternatively, you could limit the max-width of the entire element in CSS to a value equal to two images or something similar. That way, the gallery wouldn’t be larger than the intrinsic width of your images.

Finally, you can also exclude the gallery JS and CSS altogether in package.json and implement your own solution.

1 Like
4

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